Assuming I have a div with some text content inside. Now I want this text element to have a fixed height of, let's say, 200px. How do I make the width of this element, so that its contents always automatically fit the height perfectly without overflow.
Quick sketch of what I'm aiming for:
I already tried a lot of methods like using min-content, display: grid, or display: flexbox, but didn't find any working solution. It would be super helpful if any of you who have a clue, could give me a hint. Thanks.
Related
I'm trying to scroll some single-line labels in a single-line fixed-width container.
What I've tried so far is:
Create a container with fixed dimensions.
Place a scrollable container inside and attach the animation.
Place the labels.
The animation partially works, but the scrolling doesn't go all the way to what is configured (translateX(-100%)).
The overflowing part (green color in codepen) that exceeds the fixed container width is ignored.
I've tried various display and flex field combinations, but noting.
Here is a codepen sample.
https://codepen.io/efthymiosks/pen/QWQGVGg
The issue is that 100% is the size of the element, not the content. What I mean by this is because the content overflows the element, 100% only refers to the visible width of the container.
You need to change 100% to something else such as 150%. Unfortunately, this means that you need to know the width of the contents before. The only other way that I know of is using JavaScript to calculate the width of the contents.
Codepen
I'm having an issue with the CSS columns property. Namely, I cannot seem to get the container surrounding them to stretch to the width of the columns as seen here: http://jsfiddle.net/niaconis/43k5s/5/
Seems a lot like the similar issue with floats, only horizontal instead of vertical, but the pseudo-element clearfix doesn't help with this one.
How can I get the container to completely wrap the columns?
P.S. I know about the XY Problem, but this is merely a curiosity. I don't care about achieving the layout from the example. I do care about finding out why the container doesn't stretch to wrap its contents.
The absolute positioning of your element is causing the browser to incorrectly calculate how wide it should be when using the columns property. Remove it and the element stretches as it should.
I'm trying to create a table of rows, each of which has some content in some block element (I'm using a DIV in this example for simplicity) whose element I want to stretch to the full height of the TD cell. In this example, the "test" text on the right should have its containing grey DIV filling up the full height of the containing TD cell:
http://www.game-point.net/misc/browserTests/scratchpads/fullTableCellHeight/
I don't want to explicitly set the height of anything (except maybe to a percentage) - setting height:100% on the child DIV doesn't change its height. Is there any way to do this? It seems absurd that the browser, which obviously knows the table cell's rendered height, provides absolutely no way to size a child element to fill it without using Javscript!
NOTE: I'm aware that there are other questions similar to this but they don't seem to take into account CSS3's new flexbox functionality - perhaps that could solve this problem?
You can set the parent element to relative positioning and the child to display block and it should fill the height. I use the technique a lot when trying to get link text to fill the entire button container. Hopefully, it translates to what you are trying to do but since you have no code to show I will give you a brief example of a real life scenario when I use it:
<div style="position:relative; width: 50px; height: 50px;">
some link
</div>
I'm told by Boris Zbarsky himself that it is completely impossible to do this - make a child element of a table cell fill the cell's full height - unless the height of the cell is specified explicitly. Browser makers could probably make this work if they wanted to, but they can't be bothered.
So, I'm working on coding my first site. It's a lot of googling for hours, then putting down the code, but I'm struggling through it, and enjoying it. However, I have a problem I've been unable to solve.
I am trying to get a div that fills the whole page by default, but that also expands when text goes past the "100%" height. I've tried using the two seperate divs to accomplish it, and it's worked. However, I am trying to use a semi-transparent div, meaning I can't stack two on top of each other, or else part of it (the "height:100%") becomes solid, while the other part (the div that expands to fit the text) is still semitransparent. Is there any way to make a div fill the remainder of the page from the point it starts? So that that way it could fill from the bottom of the 100% height to the rest of where the text fits? I would just space it using a margin-top characteristic, but the pages need to be elastic and be able to grow with the content. Sorry if this doesn't make sense.. It's hard for me to explain it without examples and being able to point. Haha.
I believe the CSS property you would want to use in this instance is min-height. If you give an element a min-height, even if the content is smaller than the min-height, it will render at that value. If the content is larger than the min-height, then it will expand to fit the size of the content.
Take a look at http://www.barelyfitz.com/screencast/html-training/css/positioning/ item 6. It says:
It is not a viable solution for most designs, because we usually do not know how much text will be in the elements, or the exact font sizes that will be used.
What workaround do I need to use in order to insert dynamic text into a div with absolute position?
Any approach is welcome
regards,
If your primary goal is to keep the div in it's place, without changing it's height or width based on the amount of text, I'd go with:
div {
overflow: scroll;
}
The other option is to have the text size shrink to fit into the div, but that involves a certain amount of fuzzy math and you run the risk of the text being so tiny it's pointless.
If you want the div to change it's height based on the text, this also involves some fuzzy math, but basically, you would get the length of the text with:
var sometext = "Hey, I'm some text!";
var textlength = sometext.length();
And make the height change in relation to that length. You'd want to play with the numbers, but it would look something like:
var div_height = 10 * textlength;
$("div").css("height,"+ div_height +"em");
See Visual Effect section from W3C site here
Maybe using "overflow: auto" for the dynamic-text-container div.So the height isn't a problem.
The problem isn't putting the dynamic text in the absolutely positioned div - the div will expand to fit whatever text is in there. There are no heights defined on the red and green divs in your example.
Absolutely positioned divs are taken out of the flow of the document so anything that appears after them in the html will act like they aren't even there.
Designs that use absolutely positioned divs need to have a height defined on the containing div so the absolutely positioned divs don't overlap other content. In your example <div id="div-1"> has a height of 250px defined. Change that to 100px and you will see <div id="div-after"> move under the red and green divs.
So if you have a absolutely positioned div in a sidebar with nothing after it you can add all the dynamic text you want. If you have one in your header, it is going to make your design very complicated to implement.