Our form has a height problem with a div used for text feedback.
On a webpage I have a empty div with an id that has a style applied to it. Javascript is applied to the div when a user enters information into a form. Before the Javascript runs and put text into the div it has only a few pixels in height, when the Javascript adds text the div gains height and pushes the form elements under it down. The form should remain static without moving on user interaction.
With text the div is 29px high. Now I can apply the following style to the div.
height: 29px;
This solution does not seem to be safe as other browsers might render differently or someone might be using a different font size.
What is the best practice solution to setting the height of an empty div to stop it changing size when text is added?
If you set some fixed height (say... 29px) to the div it won't change size...
To better support different font-size, and/or number of lines, you can calculate that special number (29px) as the product of your font-size * line-height * numberOfLinesYouWantToAllow, and set this number as the div's height accordingly.
CSS
height: 29px;
overflow: auto;
Related
document.body.height = document.getElementById("page-main").clientHeight + 400;
#page-main {
position:absolute;
width:100%;
height:2000px;
z-index:2;
background:#eeeeee;
}
#footer {
position:fixed;
width:100%:
bottom:0px;
height:400px;
z-index:1;
background:#aaaaaa;
}
<body>
<div id='page-main'>main</div>
<div id='footer'>footer</div>
</body>
I have a footer div with position: fixed; bottom: 0px; and a main content div with position: absolute;.
Basically the idea is to have the main content div act like a sheet of paper on top of the static background of the document, so you would scroll through the content of the page and when you get to the bottom you would need to be able to scroll a couple hundred more pixels to reveal the footer div below the main content div.
I allowed this in my landing page by finding out the height of the body necessary to facilitate this extra space at the bottom and setting the height using height: 1720px; on the body itself. However, I'd like to implement this in a way that it does not need to be constant, as I fear browsers and devices may have different rendered heights for the main content div and I'd like to use this on multiple pages without having to individually hard code the body height.
I tried using JavaScript to find the height of the main content div (using clientHeight, which seems to work perfectly) and add a couple hundred pixels to that number for the height of the body as follows:
document.body.height = document.getElementById("page-main").clientHeight + 400;
and also tried changing the following:
document.body.style.height
document.body.style.paddingBottom
This does not change the height of the body at all. I tried using a similar approach to change the body's background to red, which works, but for some reason it just refuses to change the height specifically. I've tried placing this script in the head, above the body, and at the end of the body. Doesn't help. Finding the clientHeight of the main content div works fine, adding 400 to that number seems easy enough, and I know the document definitely has a body, so I'm very confused as to why it could possibly be that JavaScript refuses to change the height of the body.
I've checked the console in Edge and Chrome and it seems there's no issue, so I'm completely lost here. Normally I can find answers online and I've never had to ask for help but at this point I feel like it's such a simple question and I have no idea why it won't work.
Sorry if this question is't written well, but does anybody have an idea of why JavaScript might not be allowing the changing of the height of the body?
TL;DR:
content div is positioned absolute and can change depending on scenario
footer div is positioned static on the bottom and is supposed to be revealed below the content div by allowing user to scroll a couple hundred pixels below the end of the content div
I want to achieve this by altering the height of the body, which works perfectly through hardcoding in html but for some reason JavaScript refuses to change the height of the body
Try it like this:
document.body.style.height = document.getElementById("page-main").clientHeight + 400 + 'px';
You have to specify the units to get a proper result. Like you would do in CSS.
Setting the height of the body element, the way you want in your question, is complicated by it's relationship with html element and their default CSS (like position: static on body), and by the overflow property. Read more here.
From my experiments on the chrome console, you can't set body height via document.body.clientHeight, it seems to be read-only. You'll need to set height (and possibly overflow) properties in CSS (via document.body.style for javascript).
However, I think the best solution for the effect you want doesn't involve setting body (or html) properties at all. Try this:
Let the footer element by default have CSS: display: none
Detect when user has scrolled to the bottom of the page (using jQuery or scrollTop) or bottom minus some offset
Change the footer's CSS to display: block (by toggling classes preferably, or editing the style property). This will automatically increase the body's scrollbar to accommodate the footer.
When user scrolls back up beyond the footer (or point 2 is false), you set it's CSS to display: none again.
With the above approach, there is no need to hard code or know before hand the height of your footer and non-footer content. You don't need to mess with html or body element CSS. You can also apply CSS animations if you want!
Can I detect the width of a dynamicaly filled div box without rendering it on the web page?
<div>{{some.data.from.some.model}}</div>
If I render it, I know it's width is 260px (in every modern browser).
Can I detect it, before it is rendered on the web page? Are there tools, mechanisms, libraries to do that?
My Imagination is:
That is the div box width this class (margin, padding, whatever)
This is the content (text, font, fontsize, whatever..)
Tell me it's width
Don't show it on the homepage yet, I'll decide afterwards
You can't get the size of an element that doesn't exist (hasn't been rendered). Any solution you find to calculating an element's size without it being rendered is probably not going to be cross-browser.
So, the best you can do is render said element out of view, be it via "visibility: hidden", or pushing it out of view with "display: fixed". Once you have an actual element, you can check it's size for the current browser via JS and proceed accordingly.
I have created a simple fiddle here: http://jsfiddle.net/5wq8o02q/.
HTML
<div id="playground" class="block">
some content
</div>
<span id="width"> </span>
CSS
.block {
/* width: 100px; */
height: 100px;
}
JQUERY:
$(function(){
//$('#playground').css('visibility','hidden');
$('#playground').css('display','none');
$('#width').html($('#playground').css('width'));
});
It helps to use display: none and it won't use screen real estate as visibility: hidden. It still gives the width you are looking for (I think). Let me know me it helps ...
I'm trying to build a type of ticketing system, where each ticket is a div and has other, nested divs inside of it to better accommodate content. Aside from images and other types of media, it has a plain text area where a description of the ticket will go.
Everything works as it should, but when I print the description, the text continues horizontally, never vertically. This in turn produces a horizontal overflow and the div which contains that text apparently extends beyond the 100% width (which I understand fills its parents div width) I had assigned to it.
The text is inside a span tag, which is in turn inside the description div. I'm fetching that text from a JSON I receive client side, and I'm just concatenating, i.e. :
var description = receivedJson.description;
var desDiv = '<div class="description"><span>'+description+'</span></div>';
I think part of the problem is I'm concatenating all of it in a single line. Here's a demo, but again, since it's not dynamically substituting text, it kinda works and doesn't correctly reproduce the problem.
This is what's actually happening.:
I'm getting both scrollbars, when I only want the vertical one - if-and-only-if it's needed. Even if no text is present, I get scrollbars (probably cause of the padding I have on that span tag, but then how do I get spacing between the text and the div?).
How can I get the text to display vertically and only get a vertical scrollbar when the text exceeds the div's height?
.c span {
display: inline-block;
height: 100%;
padding: 1em 2em;
background-color: red;
}
remove width:100% . this should work fine :)
I have a div, where i need to keep the width & height constant and should not vary because of border & padding applied to it. I used border-box property. It is working upto some extend
div{
border:1px solid black;
width:100px;
height:100px;
-moz-box-sizing:border-box;
}
but failed in extreme case.
div{
border:60px solid black;
width:100px;
height:100px;
-moz-box-sizing:border-box;
}
This is actually online tool where user will give the border. So he can give any number but I want to prevent the div to grow with border/padding.
Is there anyway to prevent it either with CSS or javascript? Please tell me if I am wrong.
Well, the border will show on the left and right/top and bottom -- each being 60px, so that's 120px of border size total. The only way you'd be able to force the sizing to stay within 100px is to use JS to force the border to be <= width/height divided by 2.
it because your border size is bigger than your width and height
The specified width and height (and respective min/max properties) on this element determine the border box of the element. That is, any padding or border specified on the element is laid out and drawn inside this specified width and height. The content width and height are calculated by subtracting the border and padding widths of the respective sides from the specified ‘width’ and ‘height’ properties. As the content width and height cannot be negative ([CSS21], section 10.2), this computation is floored at 0.
REFERENCE
http://dev.w3.org/csswg/css-ui/#box-sizing
Other than with JavaScript, there is no way to cap border width per se. Possible CSS-based solutions involve faking it.
For example, you could wrap a div around your bordered boxes with max-width and max-height, like this: http://jsfiddle.net/3k9Ac/ (That's not necessarily a great solution!)
Or you could build "borders" from other HTML elements, attaining the appearance of a border without being hampered by CSS mechanics--but if you're going that deep you might as well just use a little JavaScript.
Validating user input is really just the simplest and easiest approach. And you don't necessarily have to display an error message when users exceed reasonable border widths--instead, whenever user input exceeds a chosen maximum (say, 10px) you just default to that max.
Fiddle
I am making a social thumbs up button, and I'm having some issues. Inside my full button I have a second div to hold the right side of it. But it is about 15px tall, even if I use CSS to make it 300px tall. It also won't size with width. It is about 10px away from the right edge of the button container.
If you want the button to expand with whatever content you put in it, then the height property can't be set to an absolute value. Remove this line:
height: 25px;
from the #b CSS class and your button element should expand to contain whatever content you want inside of it. An alternative to the height property is the min-height property so instead of deleting the above line of css you could replace it with:
min-height: 25px;
The same principle applies with the CSS width property.