I'm trying to set a scrollable content with overflow-y: scroll css style in a md-tab but it's not working The scrollbar is displayed but it's not activated
I enabled it with fixing a height but I want it to fit the content height dynamically
how can I solve this issue ?
I am guessing you are trying to keep the tab header out of the scrollable area and make the tab content scrollable only. If that's the case you can set height of tab content with vh. That will keep the tab labels in view and make the height dynamic and content scrollable.
css:
>>> .mat-tab-body-content {
height: 90vh !important;
}
demo
If this is not what you are looking for, please explain the question little bit further or add some code.
Related
So I'm using Angular 2 to build my personal website. I have a header at the top of the page that contains navigation buttons just like Youtube's Home, Trending, and Subscriptions buttons on their navbar.
However, I don't really like how the scrollbar extends to the very top of the page where it's side by side with the header. I want my scrollbar to start from the bottom of the header and extend to the bottom of the page.
This is what the default appearance looks like:
Notice how the scroll bar is side-by-side with the header. I don't like how that looks.
This is what I'm going for:
Notice how the scroll bar is underneath the header. However, the component extends and doesn't stop at the bottom of the page. As a result I can't even scroll. I can fix this by setting the height of the component to some pixel value but it doesn't work if I use %.
TL;DR:
How do I set the height of a component as a percentage or calc(somepercent% - somenumberpx);
The code for this project is here:
https://github.com/piusnyakoojo/personal-website
You can get the window height by javascript window.innerHeight.
You also have to recalculate the window height on window.onresize event, and re-set the contents div height.
To fix this I changed the height of the component's body to 100vh to make the height 100% of the window height.
So for example, let's say the Component that's loaded in the
<router-outlet></router-outlet>
has a template that looks like this:
<div class="body">
//.. some content
</div>
Place this in the style sheet:
.body {
height: 100vh;
}
For my particular situation, I had to adjust this since the header is about 50px of the total height of the window. So I have:
.body {
height: calc(100vh - 50px);
}
Read more about how you can use vh here: Make div 100% height of browser window
I used plugins for tabbed slidebox.
Since my contents inside slidebox is large, it needs scrolling. So for that purpose, I changed tabSlideBox.css.
I made the height auto so that I can see all the content inside the slidebox.
But it made the whole tab and slidebox scrollable. I want the tab fixed and content inside the slidebox scrollable. I didn't find any method for that.
I can provide the code if necessary.
Thank you in advance.
.tabbed-slidebox .slider {
height: auto;
}
For my app, I just always put all the content into the ion-content element. When the content became bigger then the screen, it would become scrollable automatically.
For my forms that are within a modal, I've opted to use the bootstrap modal footers to display any errors related to the form. This is causing some frustrations when the errors inevitably make the footer take up more height than the footer has available. I'm fine with it needing more height, but I want it to add the height to the top and have the modal body's height reduced so the modal as a whole stays the same height. If it adds it to the bottom it ends up pushing content off the screen. The modal body accounts for content that's too "tall" and adds vertical scroll bars which is why I'm willing to give up modal-body height to accomodate the modal footer height.
I've added a link to an image of what I'm referring to. The modal footer expands to the content as expected, but adds that height to the bottom so the rest of the modal footer becomes inaccessible when its pushed off screen. I want to steal height from the body so the footer's added height gets added to the top and the modal's total height stays the same size.
I'm sure there's a simple fix I haven't found yet but I thought I'd ask while I continue to look in case someone else has already found a solution they want to share. Any help would be much appreciated. Thanks in advance.
Normally bootstrap modal uses fixed positionong. In case when content is to large scrollbars appears inside the modal.
If you want to have long modals with no scrollbars you must first change modal positioning to absolute. But if your site content is long you must add some top property value. It's because now modal is vertically positioned to whole site, not to current browser view, so % top will not work anymore.
.modal {
position: absolute;
top: 100px;
}
Now to scroll you just use browser scrollbar.
Next to get rid of modal scrollbars you add max-height: inherit to modal-body class. Now modal will get larger depending on a content without scrollbars.
.modal .modal-body {
max-height: inherit;
}
Yes this has some disadvantages. The biggest one is that if you launch modal on the bottom of the page you might not even see it because it will popup on the top of the page.
For this issue you can add js scroll top script after modal is fired.
$('#myModal').on('show', function () {
$("body").animate({
scrollTop:0
});
});
Hope that helps!
I'd like to have many elements fixed, but then have the main text block scroll.
Before I start coding, I'd just like some advice on the best way to do this. Should I wrap ALL the fixed elements together, and then inside that, have a relative element for the scrolling part?
Here is what I am trying to do:
I think you should create a main wrapper for your page which will have a relative position and that you center horizontally on your page (using margin: 0 auto; for example).
Then add inside that wrapper a <nav> for your top navigation and set its css position property to fixed, and then do the same for the sidebar with a <aside>.
Then add inside the wrapper a <div id="content"></div> for instance for your content and set its css position property to relative. If you want the content of this div to scroll vertically, you can add the following css : overflow: auto;
If I understand you well, you want your content to change without the page being reloaded & that the content scrolls, but not the rest.
You can :
Wrap your content into an iframe, so you can change the content without refreshing the whole page with a fixed height,
Just use a fixed height to your content div, and set this :
#yourDivId{
overflow:scroll;
overflow-y:none;
height: XXX px; //Fixed height;
}
Note : your mouse will have to hover the content to scroll it.
Well an advice?
Create separately three blocks; for fixed Nav, Fixed sidebar(for category) and scrolled main block(article). It'll be easy to order, I guess.
How many Category will display on the fixed sidebar? if the list heigher than window's screen, some category will be hidden unless you make it 'overflow:auto'. also consider about possibility of user resizing the screen.
Happy Coding !
Hello i am building a mobile webpage where my content only will be scrolling and my footer and header is position:fixed - Can i make the content so that it doesn't scroll under the header or footer , so that it just scrolls in it's own div.
The reason why i want to do this is that i am going to have some opacity on my header and footer and if the content gets scrolled under , it's just not looking good.
Heres a jsfiddle i made to just show you the example of the scroll
http://jsfiddle.net/VNVqs/
Here you are:
http://jsfiddle.net/VNVqs/3/
I just removed the position: absolute to the scrolling part (wrapper and scroll-content), and added some padding to the wrapper in order to let the first and last item not being under header and footer.
Basically, the trick is done by using position: fixed only on header and footer, and let the rest of the page to scroll as a normal page, without using overflow: auto on a specific fixed-height element. Doing this way, the only problem is that the first lines of your content will be always under the fixed-positioned header (and last ones under the footer), but you can fix this by applying some padding on the content wrapper, as much as header (and footer) height. You got it?