Im in the process of making a multi-level multi-column dropdown using bootstraps popover
The problem I am running into is that I am using multiple popover-title's as the heading of each category but the height will be wrong if there are too many links in the popover-content content above it.
Whenever i inspect i can see the height of popover-content isnt set to anything is there anyway to have this set to reflect the actual height of the div?
Here is a Codepen of what i have so far Ive only started on the "A little bit of everything" sub menu
I've tried doing
.nav.departments .popover-content{
height: 55px;
}
And this works but it is not dynamic i have to set a fixed height for every section
Instead of giving a fixed height to the div for proper displaying of the content use display table instead.
.nav.departments .popover-content
{
display: table;
}
-Thanks
Related
I'm trying to learn css and right now i'm trying to recreate this template. The header was pretty simple however I couldn't create the vertical line between the search icon and the shopping bag icon see this image (cart), my idea was to use a border-right on the search icon and but the border's height won't reach the height that I want.
Here is my code JSFiddle
Please see this fiddle for the code you're looking for. It appears that you didn't have your child classes search-icon and cart-icon in your parent. This is why using a height selector wouldn't work. Also, you were trying to make the line part of one of the existing bootstrap logo divs which is not ideal for trying to optimize that line. I created a new div called harambe-div - Everything should be noted where changes were made.
It happen because the unordered list(ul) is having a margin of it's own by default. You can see it in chrome devtool. Set the margin to 0 in "nav ul", give a height to the class ".search-icon" ,align things a little and you are ready to go :)
nav ul {
margin: 0;
}
.search-icon {
height: 40px;
}
I'm using Bootstrap 4 and trying to set 3 columns on the page to have 100% height - to only have scrollbars on the columns and NOT on the page. I have tried h-100 on the row div as well as various custom css changes like setting the height and max-height to 100% on each of the columns and other solutions I found on Stack Overflow and other sites. No matter what I do, I just cannot get it working right. Would be grateful if somebody could help me out. Here is the site:
https://gordon-matt.github.io/Extenso/
To see what I am trying to do, go here:
https://gordon-matt.github.io/Extenso/#assembly/bde7b8d9-116a-4e39-939f-2acce6aba664
then click the first button on the left (the one that says "18 Classes"). You will see the middle column is a list group and will fill with items. The scrollbars will appear, but they extend longer than the page itself and now there's a scrollbar on the browser.. Instead, I don't want any scrollbars on the browser and ONLY a scrollbar on the columns. What can I do to fix this?
Use CSS Property
style="height:100vh"
You should use height: 100vh; style for your section that you want to be 100% height for every device.
I would suggest to not to use !important too often, it makes specificity unpredictable,
Here is my solution, just check following CSS IDs and classes:
#types {
overflow-y: auto !important;
height: 58vh;
}
.h-100 {
height: 73vh !important;
}
Please let me know if it works!!!
I have 3 images within a table, which is the only way I could figure out how to get them adjacent to each other. The problem I am having is that while on the screen I am using, they look like how I want them to be without a scroll bar at the bottom, but on other size screens they force the whole page to extend and therefor requiring scrolling to see the whole width of the page. How can I make the appearance responsive so that the images remain the same size relative to everything else?
Screenshot attached
There are a couple of good ways to make webpages like this responsive to screen size. I'll describe two of them, but again, there are many more:
Making the table width match the page width
An external style library, like Bootstrap
Making the Table Width Match the Page Width
First, you need to make sure that the page itself has the style position: relative on it - so that any of its children (including your table) can be positioned or sized relative to it. There are a couple ways to do this with css, but if you're using classes, you can just assign all of the standard high-level elements in html to be positioned relatively, and to be the full-width provided by the browser.
html, body {
position: relative;
width: 100%;
min-width: 100%; //we do both width and min-width for compatability with old browsers
}
Now that that's out of the way, you have a starting point for your dynamic width. If the table is a direct child of the <body> element, then you should define a class for it that will also give it a width of 100%. Remember, this width maps to the width of it's parent, so since the <body> is the full page width, then the table will attempt to be too! If you want to add some space around it (so that it doesn't literally hit the page edges, you can add some padding too!
.fullWidthTable {
position: relative;
width: 100%;
min-width: 100%;
padding-left: 20px;
padding-right: 20px;
}
Now you can put that class on your table element, and it should map to the page size! Keep in mind that if your images don't re-size according to the size of their <td> parents, then they might overlap or have some other undesired behavior.
Using Bootstrap
So if you're interested in using existing frameworks for organizing your html elements on the webpage, I would strongly recommend Bootstrap. Bootstrap provides you a number of pre-defined classes that have a consistent and predictable structure which you can use to make dynamic websites. In general, bootstrap structure involves three main classes:
containers
rows
columns
It's actually quite similar to working with an html table - but it takes dynamic sizing into account by design.
You can find full documentation and examples for using Bootstrap here: Bootstrap Docs
I ran into this issue while implementing a sticky footer solution. I have the footer working well, but my body element which encompasses everything within the tag just will not auto-extend beyond a random point further down that can only be reached by scrolling down (it's a lengthy page). My intention is for the body container (does that sound morbid or what?) to auto extend past all the div elements it contains. Isn't that what it's supposed to be doing? Right now there are still div elements sitting further down from where it ends, and the footer is sitting in the middle of my page right below it. If I can't achieve this behavior, I'll have to set the body to a fixed position in css, which I don't want to do.
Using the following CSS styling doesn't work, probably because my content extends beyond a page.
html, body {min-height: 100%; height: 100%;}
Can someone articulate what the most likely issues could be? Also, feel free to make any constructive comments on my code. This is my first web project.
Here's a link to my HTML code on CodePaste: HTML Code
And here's a link to my CSS code: CSS Code
Lastly, a link to a screenshot of my webpage showing the issue. Screenshot
The green bar is the footer, and the red border is the body element styled in css so it can be viewed. You'll see it ends right after the picture.
I'm pretty sure your main problem is setting the height of the body tag. Try not giving it a height (no max-height or height tags) or giving it height: auto to make it expand as its contents.
It could also be that you are setting child elements to positon: absolute which means that the parent will collapse to the size of whatever non-absolute elements are inside it.
Also, why the <p1> tags? They should be just <p>.
Code criticism:
It was extremely difficult to figure out what the problem was and I'm not sure that I gave the correct solution because of the way you showed your code. In future, try to give your code as a JSFiddle or a Codepen.
Also, consider using a CSS framework which will reduce the amount of CSS code you write a lot. I would suggest Bootstrap or Materialize but Bootstrap is more widely used.
Don't forget to follow CSS guidelines which will make your code more readable.
You could stretch the element to the full height of the window using vh.
.container{
height: 100vh;
}
You could then position your footer to the bottom using absolute position.
footer{
position: absolute;
bottom: 0;
}
I've used this in the past for full page landing pages that aren't meant to scroll.
I don't exactly know what the question is asking, but I experimented a bit and figured that if you remove the 1 from the <p1> so you would have a normal <p> tag, it moves the text up completely. I have a very rough JS Fiddle.
Thanks to all who contributed. Based on suggestions from Sankarsh and Ori, I was able to solve the problem. Once I changed my div to just as they suggested, I noticed it began functioning as I intended and forcing the parent element down beneath it. Unfortunately, that only solved the problem for that element alone. That led to me discovering the element had a default "static" position, while most of my other elements were set to "absolute". After changing the positions of the bulk of my content to "relative" or "static", everything is working as intended!
TLDR: If you want a child element to stay within the boundaries of its parent element, you need to set the child's position to "static" or "relative". You cannot use "absolute". This way, instead of overflowing beyond the border of the parent, the child will automatically extend the parent's border to its intended position.
I'm having a great deal of trouble in getting all items inside a specific Div to resize within that Div, depending on the Div's width (Which is currently width:100%).
I've tried using the display:inline-block but that doesn't seem to work. There has to be something that will work? Basically I have a Div Wrapper that is width:100% and then a Div Container inside that which is a specific width.
The background of a Div inside all of those, has a background image, which I need to automatically resize according to the width. The site resizes down so it is Mobile friendly, which is where I'm getting the issue with the background image being huge still.
The link to the page in question, is here - Link to Page
The below code, is the bunch of Divs mentioned above:
#content-home {
float: left;
min-width: 100%;
padding: 40px 0px;
}
.home_container {
margin: 0 auto;
width: 320px;
}
Hope you guys can help out at all! Just as a warning, it's a WordPress site too but this is specifically a CSS issue. I'm not too sure if there is a Javascript or jQuery function, able to handle this idea?
Thanks!
Mark
It seems like the problem is that you're mixing % and px units for calculating the widths. Try using only % for both widths.
If that isn't the problem, then try using just "width" instead of "min-width". It seems like the "min-width" property might be the issue.