I have 2 divs with content that uses JQuery slidetoggle to show/hide, but I want the second to occupy all the remaining vertical height of the screen.
$('.heading').click(function (e) {
$(e.target).parent().children('.content').slideToggle("fast", "swing");
});
jsFiddle I started: http://jsfiddle.net/LMHgM/
Any ideas how this can be done without resorting to javascript? Hopefully this should be browser resizing and other element resizing should keep this greedy div in the correct state. Currently my only solution has been to trigger my own resize method on slidetoggle and browser resize to correct the height.
Thanks.
You should specify the height as 100% to the element and also to the body and html
DEMO http://jsfiddle.net/kevinPHPkevin/LMHgM/3/
body, html {
height:100%;
}
#second {
border: 1px dashed blue;
height:100%;
}
Basically it is collapsing to fit content, not expanding to fit the page. You can also put a wrapper div around the divs with position: absolute and height: & width: 100%
Updated fiddle: http://jsfiddle.net/LMHgM/2/
.wrapper{
position: absolute;
height: 100%;
width: 100%;
}
Seems the best solution is to use display: table to divide up the screen.
.wrapper {
width: 100%;
height: 100%;
display: table;
border-collapse: collapse;
}
.group {
display: table-row;
}
http://jsfiddle.net/LMHgM/5/
Related
I've a modal window that I want to take the full screen. I've got it to have 100% height but width isn't working. I've tried using min-width: 100%; but that gave more than 100%.
https://jsfiddle.net/k5adr0wc/
Just click on that img icon or the modal buttons. I've also tried
.remodal-is-initialized {
display:inline-block;
width: 100%;
height: 100%;
Add the following to your CSS:
.remodal {
max-width: 100% !important;
}
Here is a JSFiddle demo
The problem is in the following media query. You have a max-width of 700px.
Remove it and it will work.
/* Media queries
========================================================================== */
#media only screen and (min-width: 641px) {
.remodal {
max-width: 700px;
}
}
Also remove the padding on the .remodal class.
.remodal {
width: 100%;
margin-bottom: 10px;
/* remove padding */
padding: 35px;
...
There also seems to be a problem with the #outer div. You have overflowing content which produces a second scroll-bar on the right.
I also noticed at the bottom of the modal there's a little gap of just empty space? How do I get rid of that?
When one column has a long value, without spaces, the table breaks out of any container with a set width (or percentage). Currently, I'm needing a table with 50% width, and the long value breaks the table out of the 50% width container.
This jsFiddle simplifies my issue, with a width of 70%, and any custom CSS I've used overriding typical DataTables.net CSS (besides visual styling).
http://jsfiddle.net/mswieboda/8qVh4/
HTML:
<div class="container">
<table class="grid"></table>
</div>
CSS:
.dataTable {
width: 100% !important;
margin: 0;
}
.dataTables_wrapper {
position: relative;
}
.dataTables_scrollHeadInner {
width: 100% !important;
}
.container {
position: relative;
width: 70%;
border: 1px solid #f0f;
}
.container .grid {
position: relative;
overflow-x: hidden;
}
Note: I realize I shouldn't use !important, but that's an issue for another day.
Please see the jsFiddle for the specific JS, and DataTables.net options I'm using.
I'd like to cut off/truncate the long value with ellipses using CSS. I probably need something like:
.dataTable tbody td {
text-overflow: ellipsis;
overflow: hidden;
}
The only solution that's worked for me is to have a div in the td and setting a max-width/width on the div, but I don't want to set a fixed width, since I want it to be figured out from DataTables.net options, using the sWidth option.
I've done some research, but haven't come up with any solid solutions yet. Does anyone have a solution for this?
Add this CSS. The CSS must be applied before the table is renderd.
table { table-layout: fixed; }
td {
overflow: hidden;
text-overflow: ellipsis;
}
jsfiddle
If you don't really need to show ellipses, you can force a line break inside the td.
table { table-layout: fixed; }
td { word-wrap:break-word; }
So if I want to have two divs, each of 100% of the entire page, side by side, given that the wrapper has overflow:hidden, how should I go about implementing it?
I have tried using inline-block but it did not work.
I have tried using float too but it caused errors.
I want the second div to be hidden so I can change it's left as an animation, sort of like a slide.
Thanks in advance!
If I've understood you correctly, you can achieve what you're after using inline-block. You just have to be a little careful with white space (i.e. you need to make sure you've got no white space between the two child div elements). I've stopped the divs from wrapping by setting white-space: nowrap;.
<div class="foo">
<div> woo woo !</div><div> woo woo !</div>
</div>
.foo {
overflow: hidden;
white-space: nowrap;
}
.foo > div {
display: inline-block;
vertical-align: top;
width: 100%;
background: aqua;
}
.foo > div + div {
background: lime;
}
Try it out at http://jsfiddle.net/8Q3pS/2/.
Edit: Here's an alternative implementation using position: absolute;: http://jsfiddle.net/8Q3pS/5/. That way you'll be able to animate the second one into view using left. Note that you'll need to set a height on the parent div.
.foo {
position: relative;
width: 100%;
height: 1.5em;
overflow: hidden;
}
.foo > div {
position: absolute;
top: 0;
left: 0;
width: 100%;
background: aqua;
}
.foo > div + div {
left: 100%;
background: lime;
}
This should be purely a matter of positioning one of the divs off the page using absolute positioning and transitioning the left property using either hover state or javascript.
Hover the red div.
Codepen Example
Could you not set max-width to 100%, not set the actual width and float them side by side? With both overflow:hidden, as they expand it should create horizontal scrollbars.
This dreaded problem.
What I currently have
html:
<html>
<body>
<div class="wrapper"></div>
<div class ="footer"></div>
</body>
</html
css:
* {
margin: 0;
}
html, body {
height: auto !important;
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0;
}
.footer
height: 36px;
}
The problem is when i inspect the rendered page with chrome a few problems I see:
1. The html tag has a height associated with it hmmm and its not the entire page height
2. so I have div inside of the wrapper div that extends past the wrapper, body, and html tag?
My best guess is that if i can get the html to the page height I could style the footer to page bottom.
I was considering using javascript to grab the true height in pixels and passing that to height and ditching the percent. Only problem is I still want to know whats going on!
Thanks,
JT
add this css to your wrapper divs
wrapper_div{ overflow:hidden; }
this is a hack to recalculate floated elements inside an element. Otherwise the browser will forget about the floated elements, overflow-hidden does the trick or you can append a clear floated element to the bottom of the wrapper div like so
CSS
clear_float{
clear:both; display:block;
overflow:hidden; visibility:hidden;
width:0px; height:0px;
}
HTML
<div class="wrapperdiv">
/* other HTML elements*/
<div class="clear_float"></div>
</div>
this is assuming that the troublesome div is classed wrapperdiv
on second look this is completely invalid
html, body {
height: auto !important;
height: 100%;
}
.wrapper {
height: auto !important;
height: 100%;
}
you are setting the height twice in one declaration. height: auto !Important will take precedent over height: 100% so you need to decide whether you want your height automatically rendered over explicitly at 100%.
and your missing the opening block in this css declaration
.footer
height: 36px;
}
Just before the closing tag of the wrapper add a div with the class 'clear'
CSS:
.clear { clear: both; }
.footer { margin-top: -36px; }
The problem is that floated elements behave like absolute positioned elements.. They are not taken in account when calculating the height of the wrapper div.
In the end I just made the html body tags set via pixels and not percent. Nothing I tried above satisfied me.
If you want a facebook like fixed footer status bar. Try using the following css:
.footer {
width: 100%;
height: 25px;
position: fixed;
bottom: 0px;
I have a div with a fixed height. When I resize my browser window and the div's width becomes smaller, the elements inside the div jump below expanding the height. How can I make the elements visible by adding a horizontal scrollbar?
I have tried all CSS scroll properties, but could't make it work:
.dhButtonToolbar{
position:absolute;
top:6px;
left:0;
bottom: 5px;
width: 60px;
background-color:yellow;
border:0px solid white;
margin-left: 5px;
margin-right:5px;
margin-top: 5px;
}
#media screen and (max-aspect-ratio: 1/1) {
.dhButtonToolbar {
height: 55px;
left:5px;
overflow-y:auto; //here my elements jump below I want to add a horizontall scrollbar
right: 5px;
}
JSFidlee: http://jsfiddle.net/x7xm3/2/
Try resizing and elements will fall below!
Just add a body and give it a min-width. Is this what you wanted?.
Hope it helps.
I change in your jsfiddle. please check this.
jsFiddle: http://jsfiddle.net/x7xm3/16/
It completely working.please check.