Here is a JS Fiddle of the problem for reference:
https://jsfiddle.net/ncoughlin/1fjxy230/4/
I am having an issue where I am trying to get a vertical bootstrap nav menu to inherit the width of it's parent element, which is a CSS Grid column. For the sake of troubleshooting I have put the background of the grid column to red. So I am essentially trying to get the dark gray vertical nav on the left hand side to match the width of the red Grid column.
The bootstrap nav has id #settings-nav
I have tried the basic stuff like adding the bootstrap class w-100 to the nav ul or in the stylesheet adding width: 100%; however both of these make the menu stretch over the entire viewport instead of the parent element, which is the Grid column. It's behaving like the Grid column is not it's parent element, but using inspector I know that it is...
Please let me know where I am going wrong here. Thank you.
The problem ended up being that the #settings-nav was set to position:absolute, which makes it so that it ignores the dimensions of the parent element. Changed to position:relative and it works perfectly.
Related
I'm new to Tailwind CSS and have been trying to make a simple portfolio page with available code samples in Tailwind's documentation.
While the container class is wrapping all content on page with some margin, if I set the footer to fixed position, the footer is overflowing to the right. The issue seems to be with the fixed or absolute class as without this class, the footer takes the container's width.
What can I do to make the footer wrap within the container with the fixed class applied? A CSS approach would do but ideally I'm looking for the reason why Tailwind CSS wouldn't wrap the footer to parent's width.
Code and Demo: https://codesandbox.io/s/tailwind-portfolio-s1r1g
Trying to achieve this:
I have updated the HTML for your code and everything works fine. Here is the updated code : Sandbox link
Updates made was -
1. Removed class container mx-auto from body and added as a separate container div.
2. This new div will hold your nav and other contents, except footer.
What was happening earlier -
By default footer was aligning to the left from its parent which was body and as the body was aligning to the center it was displayed as if the footer is right aligned.
If you want to do it from your existing code, you can add one line in css -
footer { left: 0}
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.
i'm trying to create a flow layout and i'm having some trouble using float:left property in css.
I have one parent container which has 100% width and 100% height. It contains three containers:
The header, the menu container, and the content container.
The menu is a vertical menu,not a horizontal menu. It comes below the header and then the content container floats left on the menu container.
Now the problem is i want to make it flowlayout. When i reduce the resolution,the floating content container comes below the menu container. I want the content to float with a flowlayout without coming below the menu container.Please provide a solution to this.
Thanks!
Here is the link to the code.
http://jsfiddle.net/VdE7Y/
Remove the width and float from the #content css.
Set the background color of #wrapper to be whatever color you want the background of #content to be.
add display: inline-block; to the #content css.
Updated fiddle ----> HERE
The problem is the min-width you have for #menu-cont
The layout you are trying to have is very hard to maintain.
I am new to CSS. I have created 4 main divs, header, bodybg, nav and main content.
I defined properties for #nav div, and it looked great. Now I wanted to create a jQuery slider in the div above it, i.e. #bodybg, but when I as a first step create a div #wrap inside the #bodybg and try to put 3 images on it, my nav bar is affected: it no longer has its properties and looks like a plain list of items.
Now when I remove 2 images our of 3, it becomes fine. In CSS for #wrap I added overflow:hidden but that rather makes #nav totally vanished or hidden.
The working state of my project: http://estheticdentalcare.co.in.white.mysitehosted.com/HTMLpage.htm
That was before I added the #wrap div inside the #bodybg and three images in that.
Hi i'm not sure that whats you are trying to do but if you want to do. But here is a link.
To make sure that all image div are on the same line, make them align left. And make sure youyr math are ok. If you have more width than the actual container div it will jump on two line and if you have overflow hidden the image will just be outside your container.
http://jsfiddle.net/etienne_carre/W5n4Y/1/
I have my menu working the way I want with the exception that menu elements are displayed from the top down as supposed to bottom up. I tried changing the CSS properties, but still can't get it working. I need my DIV container to be align on the bottom of the parent container. I used 'bottom: 0' CSS property but that doesn't have any affect using both 'position: absolute' and 'position: relative'.
How can I align all the elements within the parent DIV be displayed at bottom: 0 (bottom up)?
Then click on the Projects bottom link (refresh if you need to reset the menu items). I need that same behaviour I already have, just the menu items should start from the bottom up and be aligned all the way to the bottom.
Any suggestions?
Thanks,
Partizan
The best way to accomplish this is to either put the divs inside the sought after parent element. Ergo the <li> you want to associate these links with. Give the parent <li> a style of position:relative. The on hover set the position of the child div or li to abosulte and left:0;top:0;. Then from there you can style it closer or farther with margin.
Try using padding-top to push them down with an id or class on each sub menu.
Then if that fails, try using min-height: auto; on each parent.