Using Clarity and Angular 6, I have a card in the main content area that I'd like to have fill the length of the current view (no more, no less). The only way I found that comes close is to set the height to "-webkit-fill-available" (only using Chrome right now).
The problem with this is that there seems to be a tiny bit of space at the bottom that's causing the content area to show a scroll bar.
Ideally I'd like to never see a scrollbar in the content area and make all the content fit within the current screen height.
Here is a stackblitz example that demonstrates the problem.
Your solution is not a standard and would not work on IE/Edge, and might not work well with Safari per https://caniuse.com/#search=fill-available.
You could try giving it a height: calc(100vh - 5.5rem);, which gives the card a height of the view port, but subtracts the heights of the header bar and margins of the card and content areas. Ultimately, to use CSS to calculate heights you need to know what other elements are on the page and calculate against those known heights, or else you'd have to do something with JavaScript to inspect the elements of the page to find the available space.
Related
In CSS there are several "modes" to express the intent that the given block/cell size should fit to its content. For example for grid cell it is "auto" or "min-content" (they don't mean the same, I know).
The problem with all those modes are (at least in Firefox) the content is calculated without scrollbar. So when I scroll the content the scrollbar overlaps a bit of the content.
Is there some switch/mode that would reserve the space needed for scrollbar? If this help I am struggling with vertical scrollbar.
Unless I miss something padding is no-go because it would require knowing the size of the scrollbar.
Update:
I am looking for something like:
... style="padding-right: calc(scrollbar-width)" ...
Im no pro myself, but for me it sounds like you could add a margin-right: to the div element, this will make the content move to the left side, which then gives more space on the right for the scrollbar
My goal is to have an Ionic 3 Popover have a "top section" and a "bottom section." I'd like the top section to take up, lets say the top 70% of the PopOver and the bottom section to take up, lets say the bottom 30% of the PopOver. I'd like to put arbitrary content in the top section and have it be scrollable if that content exceeds the vertical space allotted to the top section. The bottom section content is fixed, and should always be present regardless of the scrolling of the top section, and should never have a scrollbar associated with it.
I've made the following attempt at this behavior using stackblitz:
https://stackblitz.com/edit/ionic-4k2dbz
So, how might I change the content of components/my-popover/my-popover.html or components/my-popover/my-popover.scss to achieve the layout / behavior described above?
If real quick I would think this way:
popovers in Ionic by default take 90% of the viewport based on the
docs (max height -
https://ionicframework.com/docs/api/components/popover/PopoverController/)
we can use max-height to limit the top pane div and set its overflow
to auto
we can use min-height / max-height to fix bottom pane div and set its
overflow to hidden;
now since you need 30/70 split we need to prorate it based on 90% max
height of Popover (I used 65/25 below)
https://stackblitz.com/edit/ionic-x3pkwv
But then when tested in an ionic app across multiple devices the above, I think, it may get messed up a bit depending on screen sizes etc. So you may consider using ion-grid which is flexbox based. Here is the solution below:
https://stackblitz.com/edit/ionic-ikvjiw
I've got a viewport fixed in size (blue rectangle in illustration). Within this viewport I've got my content. Whenever the content is greater in size than the surrounding viewport, I want to be able to scroll. This so far works just fine.
The problem I'm experiencing comes into play as soon as I transform my content. Let's say I want to scale and translate it in order to show a certain area in higher detail.
After this transformation I still want to be able to reach every corner of my content with the scrollbars of the viewport (green in illustration). But I can only croll right and down. Everything above and left of my translation can't be reached with the scrollbars.
Is this just how things are, or am I missing something? Is there a good solution to this?
When the content of my slides in a deck.js presentation gets larger than the vertical window, the browsers are shrinking the displayed content.
The more content, the smaller the display gets. The effect seems 'page' wide, as the top left corner of the slide moves further away from the top left corner of the browser window -- as if I were zooming out from the page. I can navigate to the all of content with the mouse, but no scrollbar appears.
What is going on here, and how do I get control of the display size in these situations?
(Apologies for a possibly poor question -- I don't know quite enough CSS to know what additional information I should or could provide here. I'd be glad to add in answer to questions.)
Thanks.
If you want to keep consistent (constant) font size and layout across slides, I would recommend using the "fit" extension from this page http://home.heeere.com/tech-deckjs-ext.html .
On the negative side, this extension currently prevents you from using the horizontal and vertical transition themes. It could be patched to allow these transitions.
On the positive side, this extension will allow you to have a scrollbar on your slide. You can do that by adding the following style in your page:
div.deck-container > .slide {overflow-y: scroll;}
I always wondered how to fix the gap between floating elements if they don't have the same height:
Here you can see a gap between Featured and Notice which I would like to get rid of. (Get's even larger when the screen resolution is larger since the Featured box becomes more stretched and thus the text spreads over less lines)
Maybe important to note that this is the order of the floating left elments:
Featured
News
Headlines
Notice
Layout for smaller screens (this is looking perfectly fine I just wanted to show you what I mean in the following description with inconsistent layout based on screen resolution)
If the design would be consistent I wouldn't mind implementing some kind of grid system but in my case I'm using styles based on screen resolution so at a certain screen resolution the boxes change from 50% to 100% width (no fixed value used here).
I thought that fluid girds might be the right way to go but after checking them (never used them before) they feel rather static and I'm not sure that they can solve this problem.
EDIT:
Sample of the broblem: http://jsfiddle.net/UfVrH/. Note the fixed height values in A-D are only there to simulate content stretching the div.
To fix such an issue you need to calculate the width and height of each element and re-arrange them by positioning them absolutely, luckily for you there is such a plugin that does this, Isotope