Can anyone tell me why this fiddle isn't working properly? My third and fourth logical rows are on top of one another. It's caused by the <div class="col-lg-8">. If I add a col-md-12 like <div class="col-md-12 col-lg-8"> it works as I would expect but as I read the documentation, I don't need that. It also works if I add a <div class="clear-fix"></div> before the second <div class="col-lg-8">
https://jsfiddle.net/4puugwfb/
Here's the code
<div class="row">
<div class="col-lg-8">
<div class="fixed-height">
double width double width double width double width double width double width double width double width double width double width double width
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="fixed-height">
single width single width single width single width single width single width single width single width single width single width single width single width single width
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="fixed-height">
single width single width single width single width single width single width single width single width single width single width single width single width single width
</div>
</div>
<!-- Problem is this element -->
<div class="col-lg-8">
<div class="fixed-height">
double width double width double width double width double width double width double width double width double width double width double width
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="fixed-height">
single width single width single width single width single width single width single width single width single width single width single width single width single width
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="fixed-height">
single width single width single width single width single width single width single width single width single width single width single width single width single width
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="fixed-height">
single width single width single width single width single width single width single width single width single width single width single width single width single width
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="fixed-height">
single width single width single width single width single width single width single width single width single width single width single width single width single width
</div>
</div>
</div>
Related
I have a customized bootstrap setup to use 960 grid instead of the default width. I have this HTML using the bootstrap grid:
<div class="container">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6"></div>
<div class="col-md-3"></div>
</div>
</div>
However on a specific page I need to be exact in their width, for instance I need the first row to be 280 pixels, the second 500 pixels and the third 160 pixels. How can I do that using the bootstrap grid so that it still will be responsive for mobile devices?
Is it possible to create columns in Bootstrap for a small width ONLY?
The default colums are inherited for larger sizes. So a 2 colum layout for for the xs width would also be a 2 colum layout for sm, md, etc.
<div class="row">
<div class="col-xs-6"></div>
<div class="col-xs-6"></div>
</div>
If your "small width ONLY" means that other screen sizes should display like a block, the rendering will be like a 1 column layout. So simply add a layout rule for SM to append it to all >=SM screen sizes.
For example, if you want a 2 column layout for XS only and 1 column layout for all other screen sizes, this should do the trick :
<div class="row">
<div class="col-xs-6 col-sm-12"></div>
<div class="col-xs-6 col-sm-12"></div>
</div>
I want a BorderContainer like the picture, two ContentPane at the top, and one in the bottom, but I'm not able to do it with the regions, so I don't know if there isn't a way to do it with the regions.
Thank you
It depends a little bit on how you want the panes to scale when you resize the window. Do you want the bottom pane to take all extra height? Do you want the top two panes to stay 50/50 in width?
Assuming you want the division of space to stay 50/50 both in width and height, you could do it like this:
<div data-dojo-type="dijit/layout/BorderContainer">
<div data-dojo-type="dijit/layout/ContentPane"
data-dojo-props="region: 'leading'"
style="width: 50%">leading</div>
<div data-dojo-type="dijit/layout/ContentPane"
data-dojo-props="region: 'center'">center</div>
<div data-dojo-type="dijit/layout/ContentPane"
data-dojo-props="region: 'bottom'"
style="height: 50%">bottom</div>
</div>
Normally, the center region will grab all extra space when you resize the window, but you can set a relative width/height on the leading/top/trailing/bottom regions so that they always use that share of the screen.
I think you want to have a nested border container. Basically, you want a top and center (or center and bottom) and in the top put a left and center (or center and right).
<div data-dojo-type="dijit/layout/BorderContainer">
<div data-dojo-type="dijit/layout/BorderContainer"
data-dojo-props="region: 'top'" style="height: 50%">
<div data-dojo-type="dijit/layout/ContentPane" style="width: 50%"
data-dojo-props="region: 'left'">inner top left</div>
<div data-dojo-type="dijit/layout/ContentPane"
data-dojo-props="region: 'center'">inner top center</div>
</div>
<div data-dojo-type="dijit/layout/ContentPane"
data-dojo-props="region: 'center'">outer center</div>
</div>
I have a DOJO Editor that is movable
<div id="dnd" dojoType="dojo.dnd.Moveable">
<div data-dojo-type="dijit/Editor" height="120px" width="250px"
id="editor3"
data-dojo-props="plugins:['bold','italic']">
<p>This instance is created with customized toolbar/ plugins</p>
</div>
</div>
I would like to know :
1- why changing the width attribute does not make any difference in the Editor's width
2- why the Editor resizes itself only when dragged for the first time(to the appropiate height)
I use DOJO 1.9.1
Use the style attribute on the div and not height and width and dojo will honor that.
<div id="editor3"
data-dojo-type="dijit/Editor" style="width:250px;"
data-dojo-props="plugins:['bold','italic'], height: '120px'">
<p>This instance is created with customized toolbar/ plugins</p>
</div>
The height will be auto-determined (be as small as possible and expand as required), but there is a minHeight property and a height property (shown above) you can assign in your data-dojo-props if you require height control
I want to have height set to AUTO for all my content panes in my dojo accordion. But it is currently taking the def height or the height i set for the accordion.
does anyone know how to set the height of a content pane to dynamic or auto inside the dijit.layout.accordionpane.
Here is my sample code.
<div dojoType="dijit.layout.AccordionContainer" id="#getId("Accordion")" duration="80" style="width: 760px; height:auto;">
<div dojoType="dijit.layout.ContentPane" id="#getId("InfoPane")" selected="true"
title="Basic Information">
</div>
<div dojoType="dijit.layout.ContentPane" id="#getId("ContactPane")" title="Contact
Information">
</div>
</div>
Please advice.
Thanks,
Vivek
I used the doLayout parameter of Accordion.
With this all the ContentPane's height will be set to their content instead of the Accordion height.