I am using
Foundation 5's "prefix" class to style labels for HTML input elements. The problem I am having, is that when the text inside of the label becomes too long (either because of the text's length or from resizing the browser window), the label begins to disappear, and allows the input element to take over the rest of the space. This is the code I am using:
<div class="row">
<div class="large-6 columns">
<div class="row collapse prefix-radius">
<div class="small-3 columns">
<span class="prefix">A Test Label</span>
</div>
<div class="small-9 columns">
<input type="text" placeholder="Value">
</div>
</div>
</div>
</div>
Here is a jsfiddle.
The behavior that I would like to have, is that all of the text on the label is always visible, and the input element becomes smaller (or hidden) if needed.
Bootstrap actually handles this situation exactly as I would like (jsfiddle), but I need to emulate this behavior using Foundation.
You can adjust the column classes to specify different widths for different screen sizes.
<div class="row">
<div class="large-6 columns">
<div class="row collapse prefix-radius">
<div class="small-5 medium-4 large-3 columns">
<span class="prefix">A Test Label</span>
</div>
<div class="small-7 medium 8 large-9 columns">
<input type="text" placeholder="Value">
</div>
</div>
</div>
</div>
Related
I have the following structure of my page:
<div class="container-fluid">
<div class="row">
<div class="col-md-9">
<div class="picture">
<div class="row" style="margin-left:0px !important;margin-right:0px !important;padding-bottom:10px;">
<div class="col-md-1">
<img src="url" />
</div>
<div class="col-md-11">
Some name <br/>
Some email
</div>
</div>
</div>
</div>
<div class="col-md-3">
some text here
</div>
</div>
</div>
My issue is that when device width is smaller, name and email goes on the next row but not in the same row where image is. How to fix that? It should be responsive. Thanks!
Every column at a mobile breakpoint will have a width of 100%, which means your .col-md-* classes will all have a width of 100% at smaller sizes. This is a common expectation for responsive grid systems.
To get the image and inputs on the same line, you will have to add another class that overrides the widths set by the bootstrap col classes. Bootstrap has specific classes to target different breakpoints that you can use. See: https://getbootstrap.com/examples/grid/
HTML
<div class="col-md-1 col-xs-6">
<img src="url" />
</div>
<div class="col-md-11 col-xs-6">
Some name <br/>
Some email
</div>
This should do the trick.
I'm using form-group in Bootstrap 3. It is causing some horizontal alignment issues.
Here's an example of what I mean: http://jsfiddle.net/7723q8kr/. Notice columns 3 and 4 are lower than 1 and 2.
<div class="container-fluid">
<div class='row'>
<div class="form-group">
<div class="col-xs-3">Hi</div>
<div class="col-xs-3">Hi</div>
</div>
<div class="form-group">
<div class="col-xs-3">Hi</div>
<div class="col-xs-3">Hi</div>
</div>
</div>
<div class='row'>
<div class="form-group">
<div class="col-xs-3">Hi</div>
<div class="col-xs-3">Hi</div>
</div>
<div class="form-group">
<div class="col-xs-3">Hi</div>
<div class="col-xs-3">Hi</div>
</div>
</div>
<div class="row">
<div class="form-group">
<div class="col-xs-3">Hi</div>
<div class="col-xs-3">Hi</div>
</div>
<div class="form-group">
<div class="col-xs-3">Hi</div>
<div class="col-xs-3">Hi</div>
</div>
</div>
</div>
When form-group is removed, as shown here http://jsfiddle.net/1kL4tfux/, the problem goes away.
Is there a way to use form-group within this context and not have it affect alignment?
Any col class divs in Bootstrap have a float applied. But the form-group is a block element, which by default will take up 100% width. It also has a margin-bottom property which will push the next divs down. This causes the form group items to stack (which is what it is intended to do).
You can wrap them in a form-inline element. But you lose a bit of your formatting, so you'd need to specify the width of the form-group. As the Bootstrap documentation says:
Requires custom widths
Inputs and selects have width: 100%; applied by
default in Bootstrap. Within inline forms, we reset that to width:
auto; so multiple controls can reside on the same line. Depending on
your layout, additional custom widths may be required.
So you could do something like this? http://jsfiddle.net/7723q8kr/1/
I have problem with the Bootstrap grid system on my new website /services-page (kenpils.se.
I would prefer 3 rows with 2 columns instead to make the text in the columns better readable on tablet. Right now the columns are to narrow due to the icon on the left side of each column.
As far as I understand, each row is one div which makes it difficult to slide up the "commercial-column" next to the "editorial-column". There is also a divide30-class between the two rows.
Would appreciate some advice.
The solution to this I have found works best is to duplicate your content in a tablet layout. then use visible-* (documented here) class attributes to hide and make visible specific content to specific screen resolutions. You will need to add visible-* class attributes to your <div class="row"> and change your col-sm-4 to col-md-4 see below:
<div class="row visible-lg visible-md">
<div class="col-md-4">
<!-- Your Content 1-->
</div>
<div class="col-md-4">
<!-- Your Content 2-->
</div>
<div class="col-md-4">
<!-- Your Content 3-->
</div>
</div>
<div class="row visible-lg visible-md">
<div class="col-md-4">
<!-- Your Content 4-->
</div>
<div class="col-md-4">
<!-- Your Content 5-->
</div>
<div class="col-md-4">
<!-- Your Content 6-->
</div>
</div>
Then add a section under that in your code duplicating the information and hiding it on larger screen resolutions. see below:
<div class="row visible-sm visible-xs">
<div class="col-sm-6">
<!-- Your Content 1-->
</div>
<div class="col-sm-6">
<!-- Your Content 2-->
</div>
</div>
<div class="row visible-sm visible-xs">
<div class="col-sm-6">
<!-- Your Content 3-->
</div>
<div class="col-sm-6">
<!-- Your Content 4-->
</div>
</div>
<div class="row visible-sm visible-xs">
<div class="col-sm-6">
<!-- Your Content 5-->
</div>
<div class="col-sm-6">
<!-- Your Content 6-->
</div>
</div>
This will provide the formatting you desire. Hope this helps.
NOTE: THE BELOW SOLUTION DOESNT ALTER THE LAYOUT AT ALL as you require. It provides an alternative solution !
<div class="col-services">
<div class="row">
<div class="col-sm-4></div>
<div class="col-sm-4></div>
<div class="col-sm-4></div>
</div>
</div>
This means that the break wont occur until the width reduces below tablet-zone !
col-sm-4 -> break after tablet-zone width
col-md-4 -> break after normal desktop width
Replace it with
<div class="col-services">
<div class="row">
<div class="col-md-4></div>
<div class="col-md-4></div>
<div class="col-md-4></div>
</div>
</div>
This makes sure that the break occurs at the tablet level itself!
I'm trying to bulid grids like the photo below
IMG LINK: http://postimg.org/image/qo3b4nof1/
But i'm getting the DIV E in almost next to the D-DIV
here's my code
<div class="container">
<div class="row">
<div class="col-md-1">
<div class="col-md-1">A</div><br/>
<div class="col-md-1">B</div><br/>
<div class="col-md-1">C</div>
</div>
<div class="col-md-11">D<br/>
<div class="col-md-1">E</div>
</div>
</div>
</div>
The break-lines i added because DIV-A and DIV-B become one piece without breaklines.
is it better to do it with table ?
You do not need to use container and row with bootstrap 3.*
I changed you code to match the provided screenshot, see this http://jsfiddle.net/Sd2zw/ .
I just use xs columns because the small screen of jsfiddle, you can replace it back by md :
<div>
<div class="col-xs-1">
<div class="col-xs-12">A</div>
<div class="col-xs-12">B</div>
<div class="col-xs-12">C</div>
<span class="clearfix"></span>
</div>
<div class="col-xs-11">
<div class="col-xs-12 d-container">D</div>
<div class="col-xs-12">
<div class="col-xs-1">E</div>
<span class="clearfix"></span>
</div>
</div>
<span class="clearfix"></span>
</div>
Also, use some clearfix tags to clear the float.
What's the best way to use nesting.
Multiple spans inside row - dynamic content :
One row per 12 columns ?
OR, One row for ANY number of columns ?
Sample case n°1 - which one is the best & why ? :
<div class="row">
<span class="span6"></span>
<span class="span6"></span>
<span class="span6"></span>
<span class="span6"></span>
</div>
Or
<div class="row">
<div class="span6"></div>
<div class="span6"></div>
</div>
<div class="row">
<div class="span6"></div>
<div class="span6"></div>
</div>
Sample case n°2 - More levels to organise the content.
Here, use the div "my_margin" to add some margin at left & right - and you must have "first_row" around it.
So it's : row-->span10,offset1-->row-->SPANS
<div id="first_row" class="row">
<div id="my_margin" class="span10 offset1">
<div class="row">
<div class="span6"></div>
<div class="span6"></div>
<div class="span6"></div>
<div class="span6"></div>
</div>
</div>
</div>
Or,
You shouldn't use the span10,offset1 but direct margin;
In that case, you must create rules for each #Media_size to make it responsive.
<div style="margin-right:XYpx; margin-left:XYpx" class="row">
<div class="span6"></div>
<div class="span6"></div>
<div class="span6"></div>
<div class="span6"></div>
</div>
Or - Spans are 'supposed' to be use for your main contents, and then you just play with css. So, something like that :
<div row>
<div class="span6">
http://jsfiddle.net/JkPhw/
<div class="span6">
<div class="span6">
http://jsfiddle.net/JkPhw/
<div class="span6">
</div>
To case n°1:
It depends, if you have for example a list of nine teasers where three teasers fill a line, I'd do it with one row:
<ul class="row">
<li class="span4"></li>
<li class="span4"></li>
<li class="span4"></li>
<!-- six more -->
</ul>
If you're using the grid for layouting a form, I'd make a row for each label-input pair:
<!-- one label-input pair does not fill the whole content width -->
<form>
<div class="row">
<label class="span3"></label>
<input class="span5" />
</div>
<div class="row">
<label class="span3"></label>
<input class="span5" />
</div>
<!-- and so on -->
</form>
I think you shouldn't make a grid and put your content in the different grid cells to layout it, but build semantically correct markup and apply the grid to layout the content (tiny difference).
PS: keep box-sizing in mind.
To n°2:
I don't quite get the idea there, if you're using the grid, you shouldn't apply left/right-margin to it. The grid depends on its horizontal margins to work properly... if you have to change this to match your frontend with the design it's probably not in the grid anymore.
Update: I'd most certainly use your first example though, if you have smaller content. But use the correct grid span widths:
<article class="row">
<header class="span12"></header>
<div class="span10 offset1">
<div class="row">
<div class="span5"></div>
<div class="span5"></div>
</div>
</div>
</article>