I'm getting mad with my css.. I want to get the following Structure
<div class="taskbar">
<div class="startbutton">
Text
</div>
<div class="tasks">
<div class="task">task 1</div>
<div class="task">task 2</div>
<div class="task">task 3</div>
...
</div>
<div>
Where the following criterias meet:
-taskbar should pe placed on the screen bottom (position:absolute?)
-startbutton should be left (width dynamic to content text)
-tasks should take the rest of the window width
-task should have a min-width and max-width... depending of window width, the width can be variable between min and max-width.
The problem with the dynamic task width is no problem. i will solve that with jquery on resize event... But the rest is getting me mad!!!
I'm not posting any css content to not leed into you into my wrong direction :-(
Thanks for reply...
Update: Here is my jsfiddle http://jsfiddle.net/XjYVD/1/
Related
I have the html layout the following way
<div id="tab-container"> <!--(position = absolute) -->
<div id="contentpane"> <!--//(position = absolute)-->
<div id="dgrid"> <!--//(position = relative)-->
<div id = "grid-header"> <!--//(position= absolute)--> </div>
<div id="grid-content"> <!--//(overflow:auto; margin-top:50px;position:absolute)--> </div>
</div>
</div>
</div>
I have problem scrolling through the grid results, when ever i scroll to a result programmatically, the grid is going out of parent div and not positioned properly. I don't see the header showing up.
I tried with different positioning of div, but not able to figure out the root cause. What could be causing this?
I need to make my bootstrap column span the full height of a row. The issue i am having is that I cannot get it to change size.
currently my HTML looks like this
<div class="container">
<div class="row">
<div class="col-sm-1">
</div>
<div class="col-sm-11">
<!-- Content removed for demo | large form here -->
</div>
</div>
</div>
The col-sm-11 contains a form which is x height (around 400/500px)
the col-sm-1 contains no content but I want to make it 100% height so it matches the form next to it. How do I go about doing this
Attempts
I have tried applying height 100% to that column but it remains the same.
I have also tried setting a static amount like 300px but this just pushes the form down. and i need it to be 100% anyway
The easiest way I can think of for you to do this is to use one line of jQuery, if possible.
Add a class, two separate ones, to each of your two columns.
<div class="col-sm-1 col1">
</div>
<div class="col-sm-11 col2">
</div>
In jQuery, simply add this line of code at the top of your $(document).ready(function() {...});
$('.col1').height($('.col2').height());
Here is a JSFiddle
Note: I made your col-sm's col-xs's so that you could see it in JSFiddle without resizing.
Note #2: You may want to put the line of jQuery inside of a $(window).resize(function() {...}); so that it changes with the responsiveness.
So, this is how it looks like when I'm on full screen: http://i.imgur.com/quQt09E.png
And this is how I would like to look when I resize to a certain point: http://i.imgur.com/pKGKoCq.png
I'm only able to have div 1 on top of div 2. I tried everything I know but I'm afraid that my knowledge is a little bit limited when it comes to this kind of challenges. I would really appreciate if anyone could help me.
I think you can achieve what you're looking for with a CSS grid like Bootstrap has. Check the following fiddle: http://jsfiddle.net/nunoarruda/156trje7/
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-sm-push-6 div2">DIV 2</div>
<div class="col-xs-12 col-sm-6 col-sm-pull-6 div1">DIV 1</div>
</div>
</div>
I've used the Bootstrap CSS grid and the push/pull classes to reorder the columns beginning from small (sm) screens. You can change it to medium (md) or bigger. Check the Bootstrap documentation for that: http://getbootstrap.com/css/#grid-column-ordering
AS i see there is a grey rectangle below the div2. That induce me to this that div 2 is inside div1. To set permanently div2 on top on div1 I would use the following schema:
1) Create a general div, this will include the two div's inside.
2) Create div2 inside the general div with a width of 100% and height 50% of the general div.
3) make the same with div1 but define it below.
This way both divs are fixed in a previous div wich you can move as you wish.
trying to change bootstrap panel height's to be equal the body height's
so to be like side bar :
<div class="container-fluid">
<div class="row">
<div class="col-sm-2">
<div class="panel panel-primary ">
<div class="panel-heading">Welcome User!</div>
<div class="panel-body client-left-side">
Cpanel Menu
</div>
<div class="panel-footer">Logout Button</div>
</div>
</div>
</div>
</div>
result :
I want to stretch it , so it's height from the end of the navigation bartill the beginning of the footer...
EDIT: link to the test page
I like this, personally:
.panel-primary {
height: calc(100vh - 145px);
}
Two points
1) Bootstrap-3 doesnot let you play with height easily. If you want to play with height then you have to go for table structure where you can set the row-span of each columns, BUT this is NOT a good approach.
2) The other way (easy) is that to use jquery for this. All you need to do is to get the height of #body and set the height of panel to #body's height. You might some media queries here too.
If you want to set the heights to 100% you should give your enclosing div's the proper height as well. I am guessing your col,row and container are not the full height till the footer.
If you could provide the URL, its easier to see and provide you with a concrete answer.
I think you want to increase the panel-body height, not the entire panel. One way to do this is to use CSS flexbox and make sure any of the panels containers are 100% height (including the html and body)
http://www.bootply.com/BZQYq01ABC
What is the expected behaviour of the following?
<div id="navi" style="float:left;width:230px">
<div>...</div>
<div>...</div>
<div>...</div>
</div>
<div id="content" style="float: left">
<div id="diagram" style="float: right"><img src="..." /></div>
<div id="text">
<h1>...</h1>
<h2>...</h2>
<p>...</p>
</div>
</div>
I am trying to create a 2 column page with a nested 3rd column in the content div floating to the right to show a diagram image.
However, the browsers rendering for all chrome, ff and ie seems to be inconsistent. Since the <p> content is a lot, it can fill a wide space even on a 24" wide screen. Depending on which monitor/resolution I open the browser in, the browser may either render 3 columns (desired) or the navi on top and the content div below with the text and diagram side by side.
How can I make it consistently show 3 columns without using a table and have the text div have "fluid/spring width"? preferably just div and css positioning.
You have to assign width as a percentage (you can always use even min-width for set the minimum width of the page and avoid wrong views)
I am sure this is what you want to achieve please view it at jsFiddle