I am aware the .row .row problem occurs when you two .row elements not seperated by a column element.
However, my markup is as follows:
<div class="row content">
<div class="large-5 none show-for-medium columns">
<div id="panel">
<ul class="row">
<li class="columns">
<div class="row"><!--THIS IS THE ELEMENT AFFECTED-->
<div class="small-9 columns"></div>
<div class="small-3 columns"></div>
</div>
</li>
</ul>
</div>
</div>
<div class="large-7 columns">
</div>
</div>
Apart from #panel, all the mark up seems to be to Foundation's specs.
I tried removing the #panel div altogether, but got the same result.
Would anyone know what could be causing this?
Related
I'm new with CSS. I want to do something simple like have a treeview on span the entire left of a page col-4 for example and several grids on the major portion of the page stacked vertical col-8 for example.
What I have below is pushing the tree the entire width of the page and only one grid is displaying and that is below the tree instead of to the right of it.
I'm not sure if maybe the dynatree or jqgrid CSS is messing this up or my bootstrap is wrong?
<body>
<div class="row">
<div class="col-sm-4" id="tree">
</div>
<div id="info"> </div>
<div class="col-sm-8">
<table id="grid"></table>
<table id="grid"></table>
</div>
</div>
</body>
in your case col-sm-8 will always fell down because of <div id="info"> </div> that is a block element without any float so it run like a bootstrap row.
Try to do this:
<body>
<div class="container">
<div class="row">
<div class="col-sm-4" id="tree">
</div>
<div class="col-sm-8">
<table id="grid"></table>
<table id="grid"></table>
</div>
<div id="info"> </div>
</div>
</div>
</body>
or better (according o bootstrap):
<body>
<div class="container">
<div class="row">
<div class="col-sm-4" id="tree">
</div>
<div class="col-sm-8">
<table id="grid"></table>
<table id="grid"></table>
</div>
</div>
<div class="row">
<div id="info"> </div>
</div>
</div>
</body>
As a test, I would remove
<div id="info"> </div>
Divs are block elements, which could be forcing the floated div to a new line.
I cannot center my five two columns inside of a ten column inside of a twelve column. http://jsfiddle.net/p8znkgv2/. I have tried the following "solutions" without any luck:
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="col-sm-1"> </div>
<div class="col-sm-10 col-centered">
<div class="col-sm-2">Coontent</div>
<div class="col-sm-2">Coontent</div>
<div class="col-sm-2">Coontent</div>
<div class="col-sm-2">Coontent</div>
<div class="col-sm-2">Coontent</div>
</div>
</div>
<div class="col-sm-1"> </div>
</div>
.col-centered{ margin: auto; float: none; }
Make the container a table and each column a table cell item ( failed )
Make the container (10 column) float none with an auto margin. ( failed on large displays )
So how can I center each two column inside the ten column with the ten column centered inside the twelve column?
So how can I center each two column inside the ten column with the ten column centered inside the twelve column?
By using .col-sm-offset-* class. Examples can be found here. http://getbootstrap.com/css/#grid-offsetting. Here's a fiddle as well. http://jsfiddle.net/yongchuc/m12cysv1/
Something like this? http://jsfiddle.net/p8znkgv2/2/
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="col-sm-10 col-sm-offset-1">
<div class="col-sm-2 col-sm-offset-1">Coontent</div>
<div class="col-sm-2">Coontent</div>
<div class="col-sm-2">Coontent</div>
<div class="col-sm-2">Coontent</div>
<div class="col-sm-2">Coontent</div>
</div>
</div>
<div class="col-sm-1"> </div>
</div>
</div>
A lot of problems with your structure.
One is you create child div elements with those grid classes e.g. col-sm-* without adding and element with .row class first.
Html should be:
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="row">
<div class="col-sm-1"> </div>
<div class="col-sm-10 col-centered">
<div class="row">
<div class="col-sm-2">Coontent</div>
<div class="col-sm-2">Coontent</div>
<div class="col-sm-2">Coontent</div>
<div class="col-sm-2">Coontent</div>
<div class="col-sm-2">Coontent</div>
</div>
</div>
<div class="col-sm-1"> </div>
</div>
</div>
</div>
</div>
And regarding to center those 5 cols, since there's no specific class for 5 cols since it's a 12 grid system, add a custom style for those elements.
e.g.
.col-centered .row .col-sm-2 {
width: 20%;
}
Fiddle
I have a problem where I need to be able to scroll on mobile for a specific piece of content.
So I have a row lets say, the left half of it I want to stay as is - the right half of it will need the content in it to overflow and be able to scroll. So that part of the row would extend out past the screen width and the user could scroll the content.
How would I go about this?
Currently I have my rows setup as I need them but anytime I put more content in the right hand side it tries to push it underneath the current content.
Ignore any custom css they just make changes to base padding.
<div class="row">
<div class="row">
<div class="small-6 columns smallpadding-right">
<div class="small-5 columns">
<img class="productImg" src="images/sub_subcategories/airtools.jpg">
</div>
<div class="small-5 columns font10 nopadding">
Brooks DeWalt D25123K-GB <br />
Remove
</div>
<div class="small-2 columns smallpadding">
<img class="arrows" src="images/arrow_up.png"/>
</a><input class="input-padding" type="text" value="21"/>
<img class="arrows" src="images/arrow_down.png"/></a>
</div>
</div>
<div class="small-6 columns">
<div class="small-6 columns">
<img class="productImg" src="images/sub_subcategories/airtools.jpg">
</div>
<div class="small-6 columns">
<img class="productImg" src="images/sub_subcategories/airtools.jpg">
</div>
</div>
</div>
</div>
according to How to enable overflow scrolling within a Semantic Ui Grid? and CSS: series of floated elements without wrapping but rather scrolling horizontally (duplicates??)
You should, if i understand your question well be able to fix your issue with the HTML like that shown beneath:
<div class="row">
<div class="small-6 columns smallpadding-right">
<div class="row">
<div class="small-5 columns">
<img class="productImg" src="images/sub_subcategories/airtools.jpg">
</div>
<div class="small-5 columns font10 nopadding">
Brooks DeWalt D25123K-GB <br />
Remove
</div>
<div class="small-2 columns smallpadding">
<img class="arrows" src="images/arrow_up.png"/>
</a><input class="input-padding" type="text" value="21"/>
<img class="arrows" src="images/arrow_down.png"/></a>
</div>
</div>
</div>
<div class="small-6 columns">
<div class="row" style="overflow-x:scroll; white-space: nowrap">
<div class="small-6 columns" style="display:inline-block; float: none;">
<img class="productImg" src="images/sub_subcategories/airtools.jpg" alt="1">
</div>
<div class="small-6 columns" style="display:inline-block; float: none;">
<img class="productImg" src="images/sub_subcategories/airtools.jpg" alt="2">
</div>
<div class="small-6 columns" style="display:inline-block; float: none;">
<img class="productImg" src="images/sub_subcategories/airtools.jpg" alt="3">
</div>
<div class="small-6 columns" style="display:inline-block; float: none;">
<img class="productImg" src="images/sub_subcategories/airtools.jpg" alt="4">
</div>
</div>
</div>
</div>
Notice the inline styles style="display:inline-block; float: none;" and style="overflow-x:scroll; white-space: nowrap" which can be replace with CSS and classes.
Demo: http://sassmeister.com/gist/9530d90ef425eb805da6
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.
I'm trying to layout a page element using bootstrap 3 as it's base. I've been ok with most of the layout but I'm having trouble with a particular layout I'm trying to create.
Using the standard container > row > column approach the first row only contains an image, the second row a nav type panel which is meant to sit beneath the image. Instead it's appearing at the top.
Looking at it with chrome the first row appears to have no height, despite the image.
There's something I'm missing or don't understand here.
Update
The image in the main container is absolutely positioned with -50% top to handle an oversized image. The main container is set to relative.
Here's an image of what I'm trying to create (90% there)
I've created a jsfiddle here: http://jsfiddle.net/longestdrive/vt24K/
the html is below:
<div id="hole-stats-modal">
<div class="container" >
<div class="row">
<div class="col-sm-12">
<!-- image -->
<img src="http://downssiteassets.s3.amazonaws.com/content/articles/th_downs%20golf%20503.JPG" class="img-responsive course-image" />
</div>
</div>
<!-- hole stat panel -->
<div id="hole-stats-panel" class="transparent-back">
<div class="container">
<div class="row">
<div class="col-sm-12">
<!-- side stats -->
<h3>Hole Detail</h3>
<p>Content for this panel</p>
</div>
</div>
</div>
</div>
<!-- hole text info -->
<div id="course-guide" class="transparent-back">
<div class="container">
<div class="row">
<div class="col-sm-1">
<h3 id="hole-n-2" >3</h3>
</div>
<div id="hole-description" class="col-sm-8 ">
<p>Some text here</p>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="hole-navigation">
<div class="container">
<div class="row">
<ul class="unstyled list-inline">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</div>
</div>
</div>
</div>
The hole stat panel and hole info panel correctly appear where I expect them to but the nav panel does not
Any help appreciated
I think you had way more containers and rows than are needed. I recreated what you are looking for using a lot less elements.
you really only need two rows, one for the image and one for the bottom nav.
jsFiddle Demo
<div id="hole-stats-modal">
<div class="container">
<div class="row">
<div class="col-sm-12"> <!--optional-->
<div class="image"> <!-- Relative Pos with image as background -->
<div class="right-overlap transparent-back">...</div><!-- Absolute Pos to right-->
<div class="bottom-overlap transparent-back">...</div><!-- Absolute Pos ro bottom-->
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12"><!--optional-->
<div class="hole-navigation">
</ul></ul> <!--Nav-->
</div>
</div>
</div>
</div>
</div>