I have a form I'm floating. When there is an error, via jquery, I'm adding some content to a p within the form. However, the form doesn't vertically resize to fit the new content. Is there something I have to do to get a floated element to resize when the content within it changes?
Do you have height or other css styling applied that would prevent it from vertically resizing?
Also, what browser(s) is it happening in? It may be a browser bug.
If the is floated, too, then depending on the styling (position: absolute), its dimensions may not be considered to be "in" the form.
Is there a height set on the content? When float is on, the default is to fix height to line height. It is possible that your width on the form is set too low, and the text is trailing off through the block element containing your form Try messing with the line-height property and see what you get. Also, position absolute will mess with you (as Richard mentions below)
Also, consider min-height. This won't work in IE6, but you can substitute with a height in IE6 which acts like min-height in certain circumstances.
Post you code so I can be more specific.
Related
I have been searching for an answer to this for some time.
i want to add space to the bottom of my web page, as content sits too close to edge.
I have tied 'padding-bottom' in wrapper tag, in body tag and in style tag.. not working.
any help on this appreciated..
thanks,
Keith.
http://www.reddogonline.eu/av.html
you have a serious design problem.
all your elements are relatively position with top offset, that cause the wrapper and body to be actually smaller then you think. because this offset is not taken in consideration when determining the wrapper height. (so the height of the wrapper is only the sum of his children height, without the offset between them)
when you add padding-bottom to the wrapper or the body, it works (of course), but you don't see it. because your elements overlaps the wrapper..
you will be able to see that I'm right by setting overflow:hidden; to the wrapper (or inspecting your site with a tool). suddenly, half of your content disappears..
you need to remove the position:relative; from your elements, and use margin-top instead of top to make the desired space between the elements.
That way: the wrapper and body height will be set right, and the padding will work as you expect it.
You're positioning relatively all your elements. That's causing the padding/margin problems too. Why would you position your elements like this?
Try removing relative positioning and add top/bottom margins to your elements. The results will be the same in terms of visual effect.
It will also be much simpler adding new sound boxes, as you don't have to calculate a top positioning for each one.
I have a div element with to resize:vertical style on it. The contents of the div are generated, so it could be empty or filled. The div needs a max height, so that the height increases as new items are added, but it caps the size at 150px and makes the div scrollable.
I could easily accomplish that with the max-height style, but if I want to resize it, it doesn't work.
The second idea I had, was to just use the height style, but by doing this, the div's not adjusting its height if the contents are smaller than 150px.
Is there any way of doing this without javascript?
I don't think this is possible without JavaScript and even if it would be: What do you want this for? Please take a look at browser support of resize!
(What do you mean by "filled" - is this done via PHP or JS? Actually no matter which one you use, you could check if there is any content and if so add an .empty class to the div)
I'll admit that CSS is not my cup of tea, so it's possible that I'm missing something obvious here. My problem is that when I have an element that has both CSS properties of "clear: both;" and "height: 100%;" the element actually ends up going past the page height. Here is an example: http://jsfiddle.net/d9mv7/
Notice that the blue frame causes a scrollbar to appear and exceeds the page height despite being "100%". When "clear: both" property is removed, it renders as expected (JsFiddle still adds an unneeded scrollbar, but when rendering normally, I don't have that issue).
My intent is to have the bottom div (the blue one in JsFiddle) go until the bottom of page height, but stop at the bottom of the page, drawing the border correctly, same way as on the sides. The problem is that I do have content above the div that has a float property, requiring div to have the "clear: both" property to render correctly (unless there is another way without having to hardcode the pixel size).
I've tried wrapping both the top (float element) and bottom div inside an additional div, such that their height is relative to that div instead of the page. This seemed to make the overlap smaller (and scrollbar shorter), but did not make it go away. Using "overflow: hidden;" will not work for me either, since it still makes the div and the content go beyond the bottom, only hiding the scrollbar. How do you guys suggest I handle this (preferably without JavaScript)?
As the two other posters suggested, I ended up going with a JavaScript solution. If someone can find a CSS-only solution that makes no assumptions about size/contents of the divs, please post it and I will change the accepted answer. Here is how I'm handling it for now (this uses jQuery, but similar logic can be done with native JS):
$('#second-panel').height(document.height-$('#first-panel').height());
Alternatively, if your divs have margins/padding/borders that are thick enough to matter and you want them included in the measurements as well (because element.height() doesn't), you can use outerHeight:
var secondPanel = $('#second-panel');
var borders = secondPanel.outerHeight()-secondPanel.height();
secondPanel.height(document.height-$('#first-panel').outerHeight()-borders);
I am trying to float divs horizontally, however its falling into a new line.
http://jsfiddle.net/nyCrY/4/
It works only if I set width of the #holder higher than its content.
Is there a way to do this without setting the fixed width on #holder?
Thank you!
Not really with pure CSS.
You can use a static width (which you don't want to do), you can use floats + whitespace (which is unreliable), or you can dynamically calculate the necessary width with javascript and set the style's width to that number.
According to this tutorial: http://css-tricks.com/how-to-create-a-horizontally-scrolling-site/
I spent some time playing with the float property and the white-space
property to see if I could find a way to fight browser auto-wrapping,
but I didn't have much luck. Page elements which are floated but do
not have a width exhibit a property where they expand to the width of
the content inside them. I thought perhaps if I put a bunch of float
elements inside of that, it might just keep expanding beyond the width
of the browser window. No dice. There is also a white-space: nowrap;
property in CSS which I thought might be able to be exploited to fight
the auto-wrapping, but it only works for text elements, not blocks or
just any old thing you set to inline. Oh well.
So, he basically is saying, no its not possible with just css.
But he goes on to say that you can do some javascript magic to achieve it:
JavaScript clearly has the ability to manipulate page elements and do
calculations on-the-fly.
I have a topbar with position:fixed which also contains anchor links (jdjd).
The problem is that the target is placed in the top of the viewport (behind the fixed topbar).
how can I fix so the the browser scrolls so that the target is shown just below the topbar?
As far as i know there is no clean soloution. If you use inline scrollbar it can be achieved, but it needs a fixed height then.
2 soloutions found using CSS: http://css-tricks.com/hash-tag-links-padding/
Else you could pretty easy use JQUERY to measure the users height, put it into a container div, and have scrolling on that.
See: http://jsfiddle.net/jpGdu/
Another soloution could be giving the element ur linking to a padding top (if it's h1 or whatever) :)
Not sure why you're being downvoted, it seems like an honest a good question.
I'd put a margin-top on the viewport, equal to the height of the fixed topbar.
http://jsfiddle.net/justiceerolin/KfMLJ/ as an example