I have a jQuery slider near the top of my page. But when the page first loads, it takes a few seconds for the slider to load and during that time, the divs underneath it are near the top.
Is there a way to make room immediately for the slider div so the elements below are placed properly from the start? This isn't preloading as the slider is one of the first elements on the page and I don't believe that preloading would do any good.
Here is the page in action: http://americanart.si.edu/index_newsplash3r.cfm
Thx.
You can use min-height and min-width as well as height and width on your CSS. This should force the div to be a certain height.
Apply these attributes to the CSS for the element:
height: 100px; min-height: 100px; for example.
Related
I have a top banner which is styled position: fixed. But then this block the contents coming after the banner in the HTML. I've tried to added a margin to the content following the fixed banner, but this is not working well across devices. So how can I place the contents aside from the banner underneath the banner?
Edit: What is especially troublesome is I have an input field underneath the fixed banner, so that on a mobile device, the keyboard that pops up pushes the input field into the banner area, and completely hides the input element.
Any element in your HTML that you put position: fixed on gets removed from the context of the page, that is it moves to a different stacking context with respect to the rest of the page elements and every element that is made position: fixed get itself positioned with respect to the view-port of your browser window. So, did you try adding a padding-top to the body & the value should be equals to the height of your fixed element? And then once the padding-top is added make your fixed element top: 0 & left: 0, width: 100% so that it is placed at a 100% width of the view-port positioned from the top and then rest of the elements on the page will display at a space equals to the height of the fixed element, from the top.
I am creating an Angular application with Bootstrap and i stumbled on a problem. I am trying to size one of my divs in the page where the height is fullscreen, however i have a navigation bar and one other element above this div (i am also using padding from the above element). I want my div to be exactly right height to fit from the last element to the bottom of the page.
Now the problem is, when I set style of my div to 100vh the site doesn't fit and i get a slider to scroll through the whole page. Is this because vh doesn't take the navigation and the other element into account and just set my div to default screen size? And how to correctly repair this problem that it will work the same across any screen?
There are several approaches to get your div the height you're looking for.
Use the calc css function. It should be something like this:
div {
height: calc(100vh - 60px);
}
Replace the 60px with the pixel size of your navigation element.
[Alternate solution] Use flexbox css styles. You'll need to use a column flexbox setup and flex: 1 on the element you'd like to take up the remaining height.
You can have a container div of 100vh. And inside it your nav bar will be sticky-top in a child div. And your other child div is the parent of your content.
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
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 have a div sidebar which scrolls with the page on my website. Everytime the window resizes, the sidebar would overlap the page content.
Here is a demo page to show the problem:
http://wrasa.org/memberpage_demo.html
Here is the CSS code for the menubar I'm using for my page
.menubar {width: 200px;position: fixed;left: 20px;down: 200px;}
Any suggestions for fixing the problem or using a different code would be welcomed,
Thanks in advance!
As, you are using fixed positioning; div will remain fixed relative to the browser and will overlap if other content shift in the area. This happens because browser don't allocate any space to such divs.
In your problem you be solved by specifying the min-margin to left of main content, which can actually be achieved by min-width css property. just place one more to left of main content with some min width.
You can know more on this from this link
Using a percentage margin in CSS but want a minimum margin in pixels?