I've got a div that holds a contenteditable iframe. The CSS has height set on auto, I've set it up so on keyup the div resizes to the iframe's scroll height.
I'm able to correctly expand the div based on the content's height, but I am not able to contract the height when removing content from the iframe.
I've tested grabbing the body scrollHeight, Height height, offsetHeight; but they only return the last largest value.
Any ideas?
I was able to solve this by utilizing a constant interval to resize. I'm not too happy with this option, I'd rather keep it as a onkeyup function, but it seems the dom area doesn't resize instantly, it takes X.X seconds for it to realize via contenteditable sections.
Related
The content of my wrapper div is moving anytime I resize my browser window's height (or when I open the console log) to keep up with the frame. This cause some elements to overlap with others.
I've tried to add width height min-width and min-height properties to the wrapper without success.
Any suggestion ?
I am trying to get a div to expand to fill its container without causing that container to expand beyond the browser window's width, as in this page. Click "Expand" next to "Stack Trace in the last entry.
What it's supposed to do is show a horizontal scrollbar.
What it's actually doing is expanding beyond the width of the window.
I can get it to sort of work if I give the <div class="stack"> element a max-width in pixels, but I want it to expand to fill no matter how wide the window is, without expanding beyond it.
How can I fix this layout? What's a general way with css to get an element to expand horizontally to fill its container while not going beyond the window's edge?
The Page is back on now!
I cann't get your table stuff sorted. There are some invalid width Parameters.
You should use div-Containers rather then tables to layout your page!
The workaround solution I came up with was adding a max-width to the expand/collapse div. It doesn't really prevent the table being wider than the window, but it solves 95% of the cases.
Don't use tables, use DIV's and for full width use
width: 100%;
This will always use up 100% of the browser window width.
You can provide you outer Div width:100% so it will take browser width. Or else you can calculate browser width with Jquery $(document).width(); and store this in variable and provide to your outer div.
When the browser is resized, I have a DIV that may change in height, depending on its width. (the content will wrap). I would like to be notified and execute a js function when the height changes.
The reason I would like to be notified is that this navigation div is "always on top". That means I have to allow for some padding in my content div. If the user makes the window narrow enough, the nav div will wrap and cover up the top of my content. All I need to do at that point is get the new height of the nav div and adjust the top padding on the content div.
If I could handle this with CSS that would be even better, but not sure how.
thanks
I think this is what you're looking for http://marcj.github.io/css-element-queries/
Coupled with updating an observable in the sensor callback, should work fine.
I'm trying to stretch an image vertically in a parent container of my site (not the full body), it is the div with the id "imagen-fondo"
I have tried either backstretch plugin and also just css background-image with background-size to do it.
But the problem in both cases is that the calculated height of the parent container is smaller that the immediate child height, so, the background image looks smaller than the content itself.
How can I make it to be the same height as his immediate child or at least bigger?
You can see the live demo here:
http://50.21.181.12:3001/plantillas/mba
UPDATE:
I think the problem is that div#imagen-fondo is getting the height of the window and not of his content, that is the reason that when the screen is big, the problem doesn't happen, but when the height of the window is smaller than the content it happens, you can check it with this two screenshots, just as you start scrolling vertical the background image ends:
Something with overflows?
UPDATE 2:
For now I introduced some javascript to make it work,
Getting the footer offset position and stretching the height of the ".backstretch" div to that height.
But, if you resize the window to make the vertical scroll bar appear and inspect the page, you can still see that the parent container "#imagen-fondo" (from where backstretch should automatically get his height) is still getting the height of the visible viewport and not from the content itself.
If anyone finds a better way to do it CSS only will use that approach instead of this dirty one.
Clear floats in parent div using clear: both;
Or use clearfix on parent div.
For now I introduced some javascript to make it work,
Reading the footer position and stretching the height of the ".backstretch" div to that height.
But, if you resize the window to make the vertical scroll bar appear and inspect the page, you can still see that the parent container "#imagen-fondo" (from where backstretch should automatically get his height) is still getting the height of the visible viewport and not from the content itself.
If anyone finds a better way to do it CSS only will use that approach instead of this dirty one.
provided a DIV with
fixed heigh
disabled scrolling feature
whose content is editable
I need to understand if its content height as reached or even exceeded the height of the same div according to the element (text or other) inserted by the user (control triggered on event basis). Does anybody have any simple idea how to detect if the content of a DIV has reached or even exceeded the height of the same DIV?
As stian said in their answer, you can use jQueries height() method to obtian the height of a given element.
However, you'll want to utilise this method on a second container internal the the main div. Such that:
<div id="myMainDivWithAHeight">
<div id="myInnerDivExpandingWithTheContent"></div>
</div>
This way you'll be calculating the height of the inner div which is expanding in relation to the content, instead of the height of the fixed-height outter div.
You can then compare the values of the inner and outter div heights.
try jQuery .height()
http://api.jquery.com/height/