I would like to re-order some div using only CSS if possible.
Here is the HTML sample I want to re-order:
<div class="block1">
Block1
</div>
<div class="block2">
<div class="subblock1">S-Block1</div>
<div class="subblock2">S-Block2</div>
<div class="subblock3">S-Block3</div>
</div>
And this is the graphical result I want:
S-Block1
S-Block2
Block1
S-Block3
I already tried playing with display: flex; and order: X but with no success. The main problem lays in the fact that I want to split the block2 before and after the block1. The flex display only allow me to change order of block of the same "level".
I would really like to have a solution that doesn't not use JavaScript to re-write the DOM (by taking subblock3 and putting it elsewhere to please my CSS) if possible.
It appears this is not possible and javascript is not an option for my problem.
Here is the sample code I used (jQuery needed).
$(".subblock2").prependTo(".form-wrapper");
$(".subblock1").prependTo(".form-wrapper");
Related
I'm using the Bulma CSS framework with a Rails app. I have a long list of items and would like to display them in tiles. However, the tiles run off the screen instead of wrapping to the next line.
The Bulma Documentation doesn't address this issue. Since I am creating the tiles dynamically from a variable-length list, explicit nesting as described in their docs isn't so easy and I'd rather have it cleanly wrap to the next line.
Here's what my code basically looks like:
<div class="tile is-ancestor">
<div class="tile is-parent">
<% #my_list.each do |item| %>
<div class="tile is-child box">
<p><%= item %></p>
</div>
<% end %>
</div>
</div>
Since Bulma is based on flexbox, I would think there is some equivalent to flex-wrap: wrap;, but I couldn't find this option yet.
Update: It's possible to add the style flex-wrap: wrap;to the parent-container, but is there a Bulma-integrated class flag?
It seems that there is currently no class-flag in Bulma addressing this directly.
However, since Bulma is based on flexbox, it is possible to add the style flex-wrap: wrap; to the parent container to achieve the desired outcome.
For the gridsystem Bulma does have a class for this.
If you add is-multiline to your .columns element it should wrap automatically. (adds flex-wrap: wrap; under the hood)
Source: Bulma column docs
(Not sure how this applies to tiles, but you could always wrap them into columns)
The DevTools inspector shows that Bulma's box p has a default style of white-space: nowrap.
Applying style="white-space: normal!important;" directly onto the <p> tag forced it to wrap as normal and fixed the problem for me.
I'm trying to adapt bootstrap's standard practices to speed up some of my development but have a quick question related to showing and hiding cols.
I have the following simple layout
<div class="row" id="contactGrid">
<div class="col-sm-2">Sidebar</div>
<div class="col-sm-10">Content</div>
</div>
When I use AngularJS to show/hide the Sidebar col I expect the Content col to stretch the entire width of the container but it doesn't it says at 'col-10'. Do I need to programmically change the class/width to col-sm-12 when I hide the sidebar?
Thanks for your help, I'm sure this is an easy one!
The element with the class col-sm-10 will always have 10/12 of the width of it's parent row. Therefore you need to update it on the fly, when your sidebar changes to hidden. As you already use AngularJS you might have a variable defining if your sidebar should be visible or not. This variable may also define your class conditionally for your content div.
<div class="row" id="contactGrid">
<div class="col-sm-2" ng-show="booleanVariable">Sidebar</div>
<div ng-class="{col-sm-10: booleanVariable, col-sm-12: !booleanVariable}">Content</div>
</div>
Daniel,
Your answer is the reason I'm trying to learn the BS/NG style of UI. It's just knowling where the shortcuts begin and end. To polish it off I used a ternary expression in the ng-class. showFilterSidebar is my hide/show variable. Thanks Again!
<div ng-class="showFilterSidebar ? 'col-sm-10' : 'col-sm-12'">
Yes you need to change class to col-sm-12 and hide for col-sm-2 to avoid problems with floatin .
Just wondering what exactly is the best practice for say, setting the height of a header in a responsive layout. Would you set it to the column, the row, or perhaps the element(s) nested inside the row. I know its a pretty basic question and there may not be a correct answer, but I am having trouble finding a consensus on this.
Is it best to use the framework in a completely detached way from other elements, eg, never add custom css to a row/col tag just use inner containers? What is preferred?
I usually let the content set the height.
<header>
<div class="container">
<div class="row">
<div class="span12">
<h1 class="padding_min-height_etc"><!-- h1 with a height / margin / padding etc -->
Although I have noticed others using classes set on the header itself.
<header id="overview" class="jumbotron subhead">
<div class="container">
<h1>Components</h1>
I was always taught to not use HTML tags to style content thought...
I'm using Twitter Bootstrap, but I'm having slight difficulties on a particular element.
Here is a 'Scaffolding' markup already provided by the interface, which I will use as an example.
<div class="row">
<div class="span6">
Level 1 column
<div class="row">
<div class="span3">Level 2</div>
<div class="span3">Level 2</div>
</div>
</div>
</div>
Also, to help this case... There are 'Responsive utility classes', which you can check out here - http://twitter.github.com/bootstrap/scaffolding.html#responsive
So, what I am looking to do is simply change the class="span3" to, for example, class="span6" when I am using the 'responsive utility class' .visible-tablet.
Initially, I thought that it would miraclely automatically change to the 'max-width', but it didn't, unfortunately.
As #scumah pointed out, you're not going to change the class using CSS. For that you would use JS.
However, if you want to change the characteristics of a class (in this case span3) when it is contained in an element with a given class (here visible-tablet) that's just a matter of getting your CSS selectors working:
.visible-tablet .span3 {
width: 352px;
}
This would change the span3 to be identical to what is, by default, the width of a span6.
JSFiddle
However, all this seems a bit hackish, so you might want to reconsider what essentially you're trying to accomplish.
Hi there I am not sure how to go about a particular problem so here it is.
Without using a Table I would like to display a paragraph with multiply lines of text then have an image on the right.
So far I have tried this:
<div id="container">
<p>
Some Text
Some Text
Some Text
Some Text
</p>
<p>
<img src="image.jpg"/>
</p>
</div>
I use a separate stylesheet
and have tried such things as display inline with no luck.
I will be grateful for any suggestions although I do not want to use a table as I am not a fan of using tables for layout.
Thank you.
You need another set of containers indie your container:
<div style="float:left;width:50%">
<p>...<p/>
</div>
<div style="float:left;width:50%">
<p>...<p/>
</div>
If you may consider using flexbox (which is fairly well supported now : https://caniuse.com/#feat=flexbox )
You just need to make your container a display : flex; (example : https://codepen.io/anon/pen/GvZYwj)
#container {
display: flex;
}
For more infos about flexbox you can start out by reading MDN : https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes.
And if you want to get more about flexbox, there is this amazing tutorial : http://flexboxzombies.com/p/flexbox-zombies
If I understand what you're wanting to do. You could give the tag a class/style and do float:right in the CSS. Which would look like this:
<p style="float:right;"><img src="image.jpg" /></p>
Do yo want text flow around image? If yes then it is something like this:
http://jsfiddle.net/2FMPf/1/
If you want separate column for image, then it is something like this:
http://jsfiddle.net/2FMPf/2/