I have an issue with my web page.
Basically, I have the <html> on overflow:hidden, two horizontal navbars, one fixed vertical sidebar on the left and in the remaining center, one div that has the height: 90% property.
Edit: The container div has the overflow: auto property.
The content is loaded in the container area via AJAX. The content consists mainly of tabular data, and the point is to have the container area scroll whenever there is too much content. Everything works nice and fine on a regular monitor with normal height, but when it's taken to a laptop, the last 1-2 rows become 'hidden' due to html overflow.
If i decrease the original height: 90% to a smaller value, problem fixed, but after I switch to large screen with the decreased height, the content area is not fully covered.
Is there a way to fix this issue via CSS? If not, is it possible via screen resize javascript event?
The easiest and probably the fastest way to do it would be using Javascript.
If you specifically set the height of your tabular data container, you will gain much more control over the layout and general item spacings.
When setting your height, you have to take into account the heights of your navbars, so in jQuery the code would look something like this:
function resizeMain()
{
$('#tabularBox').height($(window).height() - $('#topBar').height() - $('#bottomBar').height());
}
// size it on load:
$(function(){
resizeMain();
}
// and size it on resize
$(window).resize(resizeMain);
Of course, many ways to optimize this, but that's the idea. And you have to watchout for tiny screens, but this would be a problem with % anyway.
Finally, you need Overflow: auto; on our tabular box
in the div that is height:90% put overflow: auto or overflow: scroll. That'll add a scroll bar to that div only.
Related
I am working on a web app. I use a NavBar and on some pages I have to center the content (vertically and horizontally).
To make the navbar + the rest of the content occupy 100% of the page (more if the content is big) and to make the centering work, I do:
html,
body {
height: 100%;
margin: 0;
display: flex;
flex-direction: column;
}
Without the flexbox, a scroll appears on my page and I can scroll just past the navbar + the content is not centered - it will be after I scroll down. And this happens even when the centered content is just a single little <span>. So I thought the flexbox is the answer here, easy. But I stumbled upon another problem:
I sometimes display card-like divs - rounded borders with a header which is filled with a color. Background color fill + border-radius don't play well together (basically the rounded edges disappear as the color overflows the borders), so I use overflow: hidden.
The problem that I encountered is that if I do three things:
I set the flexbox for html and body tags like I've shown above
I set overflow: hidden for my div
I add more content to the div - so much, that it doesn't fit on the page and a user would have to scroll it vertically
then the scroll doesn't appear and the content inside my card is cut/truncated just before the page ends - so no scroll. And no content.
This is the codesandbox example: https://codesandbox.io/s/angry-pare-1qokr.
To see what I mean try either:
removing the flexbox props from html and body (you can leave the height and the margin)
removing the overflow: hidden from .card
If you do, then boom, scroll appears and the content is no longer truncated.
And I cannot proceed without any of them because I either:
lose the ability to not have the scroll when having just the navbar and some <span>
or
lose the rounded edges, because the card's color will overflow (I didn't show it in the example, but I use it)
The .navbar and .center classes are there just to show that:
this is how I basically define the navbar in my project (although here I defined the height as fixed pixels, normally I don't do that so I cannot easily, I guess, calculate the height for the rest of the content)
the .center class is used by me to center the whole content below the navbar, when I want it to be centered
So finally my question is: can I somehow preserve the ability to have flexbox defined for my html and body tags, have overflow defined for some long divs and make it so the div's content isn't truncated when it becomes too long - basically the page would render a scroll then?
P.S If the solution would be not to use flexbox to make the centering without the scroll work - perfect for me, if you guys know how to do it without flexbox (as without the flexbox, my issue with truncated div content gets solved)
I'm building a responsive CSS grid with items whose sizes match a desired aspect ratio. I've tried the padding hack among a few other techniques, but nothing has worked nearly as well for me as using JS to determine the pixel value of 1fr for the desired number of columns and the gap size, and then applying that to the row sizing using repeat(auto-fill, minmax(${width}px, 0)).
Unfortunately, this approach comes with a rather nasty side effect: the parent div (display: grid) doesn't know the height of its own content, so it never sizes correctly. As a result, it's never able to show more than one row of the grid. The rest of the grid items display as a line just below that first row.
To fix this, I've tried setting the height of the parent to 100%, but that covers all of the other content on the page. I've tried using containers to fix the sizing, but haven't had any luck there, either. I've also tried overflow: auto, to no effect. If I could calculate and manually set the height of the parent div in my script, that might work, but I've not been able to find a way to do so (and also seems like a messy approach).
Is there any (good) way to do this? Here's a demo of the issue: https://codepen.io/jmindel/pen/GRoMjEw
when you set the overflow: auto it will make a scroll bar in your element to show all of the content in the specified area. then in this case it won't help you. when you set the height of an element to 100% it's height will be the same as it's parent element. I had this problem before. if you want to set the height of an element you should set the height attribute of all the parents of the parents of your element. you can use % as the unit of height and width if you want your code be responsive and don't want to calculate the exact height of elements and if not you can use other units. try to set height with % unit for all of your parents. it helped me and I am sure it will help you too.
Here's what I wound up doing:
I tried wrapping .grid in another div and styling that wrapper such that it has overflow: scroll, which fixes the height not displaying (100% is fine in this environment--it doesn't cover anything, since it's limited to the height of its block-level parent).
I wrote a script that temporarily sets the grid's height to a very large number, finds the lowest element in the grid, and uses its position to determine the grid's height, which gives it a forced pixel height until the next resize.
A few shortcomings of this approach:
The grid must be contained to a scrollable subcontainer, which works well for my use, but might not for others.
The grid's height should size properly, but didn't without a forced pixel height. min-content and max-content did not work.
Is there any solution for making such boxes fluid responsive ?
The problem that I face is while the width of the window changes the first column (which includes the first block with text) gets a higher height and then it becomes something like this: (at a different size but in this sketch I kept the same aspect in order to see it
Are there any tricks for this?
UPDATE:
The height of the blocks is not fixed
I don't fully understand what you mean, but perhaps:
overflow: hidden;
This will make that you can't see the text that not fits in the window, so doesn't affect the height.
EDIT: Auto-size dynamic text to fill fixed size container
this is driving me up the wall. I cannot figure out how to make the listview's height automatic.
i.e. have the listview's height extend in order to occupy all the space it needs and have the outer container offer a overflow-y scroll feature.
I cannot seem to find any documentation on this unforuntately.
Help would be great. Thanks!
ListView controls are 400px tall by default. That's on line 1421 of the ui-light.css file. You can override it by adding a rule on your page like:
.win-listview {
height: 100%; /* (or you can specify absolutely with something like '600px') */
}
On this page in the dev center it says...
Setting the ListView control's height
The ListView does not dynamically adjust its height to fit your content. For a ListView to render, you must specify an absolute value for its height. The Windows Library for JavaScript style sheets set the ListView control's height to 400 pixels.
From a design standpoint, you probably shouldn't be doing vertical scrolling on a ListView. They're designed to be laid out horizontally (as are apps in general). Combining horizontal and vertical scrolling can make for an awkward user experience. I wrote some articles about this.
I tried googling, but didn't come up with much. I'm building a horizontal carousel which displays images in a LI, floated. The issue I want to solve is, everytime I add thumbnails to the carousel (I'm lazy loading), I need to recalculate the width of the carousel (so that all the floated thumbnails line up nicely side by side).
For one, I rather not have to do these kinds of calculations in JS, and for two, I found that it's hard to find a cross browser way to ensure that the width will be properly calculated (I end up having to add or remove pixels from the total width depending on the browser).
So my question is, is there any way without JS, to be able to add content to a div, and have the width adjust as needed, the same way a div's height would?
And if not, have you found a more efficient way to handle this scenario than recalculating the width every time?
I'm not new to web dev, and for as long as I've been in this field, to my knowledge this has never been possible. But with the advent of new technologies cropping up, I thought maybe there was an obscure way of achieving this now.
Thanks in advance!
[EDIT] (for clarification, but simplified): If my carousel is 500px wide with overflow hidden. There's a slideable section containing thumbnails, each is 100px wide, floated, they fit 5 across in the carousel. When a user clicks Next, it lazy loads the next set of 5 thumbnails, and appends it to the slider area after the first set of 5. But since this div was 500px wide to accommodate 5 thumbnails, adding another 5, I need to recalculate the width to get the new thumbnails to show up side by side. Ideally I'd like to find a way to have the div autoresize its width to fit horizontal content, the same way it naturally does for vertical content.
I've found that using a containing carousel div with white-space: nowrap and overflow: hidden has worked. I then have display: inline-block for each item in the div.
Using this class for each individual item:
.eachItem {
display: inline-block;
}
Will work (I've done something similar to that).
The problem is that in IE7 it won't work! and you'll have to use JavaScript anyway :(
EDIT: I meant inline-block... and as you may know, IE7 doesn't "like" it.