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.
Related
I'm working in a codebase that is using Bootstrap 3. According to their documentation this is how you create a basic grid structure:
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
The code base I'm currently working in applies the grid structure in the following way.
<div class="form-group">
<label class="control-label col-sm-4"> Name<span class="text-danger">*</span> </label>
<div class="col-sm-8">
<input type="text" class="col-xs-10" value="Default" name="panel:expandedContentContainer" id="id9428">
</div>
</div>
I've never seen the grid applied in this way and I just want to make sure this won't cause problems down the road. I have two questions. Is it okay to use '.col-- without a row? And is it okay to put '.col--' directly on elements?
In Bootstrap 3, the .row class will apply a negative margin of ($grid-gutter-width / 2) to both the left and right.
The .col-* classes will apply a padding of ($grid-gutter-width / 2) to both the left and right.
Adding the .col-* class to the sub elements will not necessarily cause you problems, but unless you override the padding on .col-* through your own CSS you will find elements will be indented more that you were perhaps hoping for.
Yes, you can use '.col--' without a row. Then it just isn't vertical align. more information about that: http://www.helloerik.com/the-subtle-magic-behind-why-the-bootstrap-3-grid-works
And yes it is okay to put 'col--' directly on element. I don't have any bad experience with that.
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");
This may seem like a dumb question, but is there an official bootstrap class reference? I looked on the website and was unable to find one.
I'm looking though some of the examples and I'll see stuff like:
<div class="container-fluid">
How am I supposed to figure out what all the contain-fluid tag does? Am I expected to dig through the css for every class to look at the rules and then divine how it will affect my page? That seems like a quick way to make assumptions and run into problems later.
Is there an official reference somewhere that I'm missing? I've seen some class lists compiled by third parties, but it seems like those are always going to lag behind new changes and may contain assumptions of intensions.
Not official but current as of 2/2016 https://bootstrapcreative.com/resources/bootstrap-3-css-classes-index/
Printable pdf and a sortable table with descriptions to help sort through the list of classes.
http://www.tutorialspoint.com/bootstrap/bootstrap_quick_guide.htm contains a very good reference for many of the bootstrap layout and css components.
Bootstrap 3 moved to a "mobile first" approach. .container is really only there in instances where you need/want a boxy layout. but, if you exempt the div.container-fluid entirely, you're left with a fluid layout by default.
for example, to have a two-column fluid layout, simply use:
<body>
<header>...</header>
<div style="padding:0 15px;"><!-- offset row negative padding -->
<div class="row">
<div class="col-md-6">50%</div>
<div class="col-md-6">50%</div>
</div>
</div>
<footer>...</footer>
</body>
The 2.x .container-fluid was replaced by .container in Bootstrap 3.x (http://getbootstrap.com/getting-started/#migration), so the .container is fluid, but it's not full width.
You can use the row as a fluid container, but you must tweak it a little to avoid a horizontal scroll bar. Excerpt from the docs (http://getbootstrap.com/css/#grid)..
"Folks looking to create fully fluid layouts (meaning your site stretches the entire width of the viewport) must wrap their grid content in a containing element with padding: 0 15px; to offset the margin: 0 -15px; used on .rows."
More on changes in 3.x: http://bootply.com/bootstrap-3-migration-guide
Demo: http://bootply.com/91948
UPDATE for Bootstrap 3.1
container-fluid has returned again in Bootstrap 3.1. Now container-fluid can be used to create a full width layout: http://www.bootply.com/116382
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/
I'm using Rails helper methods to build a form, and using validations.
Whenever one of these validations fails, rails wraps the corresponding inputs and labels in a field_with_errors tag. Which is fine.
However, for some reasons rails is wrapping both the input AND the label in different divs, making styling really hard:
eg:
<div class="field">
<div class="field_with_errors">...label...</div>
<div class="field_with_errors">..input ...</div>
</div>
and what I need is:
<div class="field">
<div class="field_with_errors">...label & input...</div>
</div>
Does anyone know how I would achieve this?
One way is to replace the divs with spans, which don't break formatting as they're not block level elements. To do so, put this somewhere in an initializer:
ActionView::Base.field_error_proc = Proc.new do |html_tag, instance|
"<span class=\"field_with_errors\">#{html_tag}</span>".html_safe
end
Another way would be to simply make the original divs not display as block level elements, with this line in your CSS file:
.field_with_errors { display: inline-block; }
but this is not fully supported by some of the older browsers (looking at you IE6 and 7).