I've got this accordion menu:
Codepen link
The problem is that the height of the expanding divs is "hardcoded" (see where the css comment is), whereas I need it to expand according to the number of submenu items.
Any ideas how to fix this?
Use height: auto
#accordion div:hover {
height:auto; /* THIS NEEDS TO ADJUST AUTOMATICALLY */
}
Related
I'm making a basic website with a dropdown menu for switching languages. I can't seem to make the dropdown appear outside of the navigation div even after trying with overflow: visible !important; as suggested in other threads. Instead my dropdown menu appears inside the navigation bar as shown below:
The codepen for this example is https://codepen.io/mattiasjohnson/pen/VwbZbVm
Solution (edit):
As per s.kuznetsov's comment adding position: absolute to .lang-switch-hidden solved the problem.
Problem
Hi. That behavior of your navigation div is because you don't set its height propriety with a precise value. By default, height's value is auto. Because of that, when the .lang-switch-menu's height grows, the navigation div' height grows to avoid overflow. If you set the navigation div's height in a precise value like 2rem, you can see that it won't grow anymore.
Solutions
Set the navigation div's height precise :
#navbar {
color: black;
background-color: #f1f1f1;
margin-top: 1.5em;
height: 2rem ;
}
NB : By precise value I mean a value who don't tell the navigator to calculate its height according to his content like : fit-content or auto.
2.This code, add at the end of your css, can give you another way to solve the problem.
.lang-switch-menu{
position:relative;
}
.lang-switch-hidden{
position:absolute;
}
I am not sure why there is a spacing (margin/padding) to the left in the second and third tabs. The test site location is: http://new.vonsazkin.com/index.aspx
Click on Residents in top menu and then click on the Events tab or the Records tab. You'll notice that the grid is pushed down. If I set the width of the grid to auto, then it moves up where I want it, but it shrinks. The max width I can set is 66.67% but it is shifted to the right. I want the grid to be 100% width and not have the spacing on top. You can right click in the browser and click the Inspect Element option to view the page code and CSS for the site.
Any clue?
Thanks in advance!
Interesting :) I found where the problem is: style.css
.residents_block .tab-pane {
display: block;
...
This display: block is messing with showing/hiding tabs. With this CSS other tabs are there but have opacity: 0. I believe this is some custom css (which breaks bootstrap functionality) and you should remove it...
All you need to do is absolute position the table when its parent is relatively positioned.
.resident_workspace_form .table-wrapper {
position: relative;
}
.resident_workspace_form table.alt {
position: absolute;
}
The padding between tabs
I didn't really understand what's your problem, but if you have in mind the space between the tabs - you have padding. Also tabs have height at media (max-width: 1199px) and (min-width: 992px) The height of tabs.
I'm simply trying to display a textarea control inside a Twitter Bootstrap tab pane. I want the textarea to span the entire width of the tab pane, so I've added the row-fluid class to it. This works, but there seems to be some additional padding added to the textarea, causing a nasty horizontal scrollbar to show across the tab pane.
Here's a screenshot to demonstrate what I mean:
Here's a jsFiddle.
How can I get rid of the scrollbar?
Just remove (or if not possible, override) the overflow:auto; on the <div> with the class .tabcontent, e.g.
div.tab-content {
overflow:visible;
}
jsFiddle here.
or give a smaller width that doesn't overflow the scroll
.text_area {
width: 200px;
}
or
.text_area {
width: 90%;
}
Here is what I'm working on: www.buymaengdakratom.com
I'm trying to have the navigation bar items extend the entire width of the box shadow, so that none of the white background of the box-shadow shows.
Here is the CSS & HTML I'm using http://jsfiddle.net/Abijah/DJsKk/
Here's one way to do it. Remove the padding on the <ul> and set the display to table. Then on the list items, set their display to table-cell. Be sure to remove the float:left from the list items as well.
Added CSS:
ul {
padding:0;
display:table;
}
li {
display:table-cell;
}
jsFiddle example.
This works in all modern browsers as well as IE8+.
This worked for me:
Set the width: 970px; and padding: 0; for #appleNav.
See it here: http://jsfiddle.net/DJsKk/2/.
learning html/css here. I can't seem to understand how to tweak this drop down menu. I'm trying have to tweak it to hold an image and a name, then to have the links.
Right now the image is getting cut off due to the <li> height, when I change the <li> height to 100% it get some weird behavior that I don't understand. Any help would be really appreciated to learn whats going on.
image getting cut off
http://jsfiddle.net/FyU89/
odd behavior after I add height: 100%
.menu ul li ul li{
padding:0;
float:none;
margin:0 0 0 0px;
width:100%;
height: 100%
}
http://jsfiddle.net/FyU89/1/
Add to your css
ul.menu-drop li {
display: inline-block;
}
Fiddle link
Update:
Upon adding the new css rule you'll find the name disappears from next to the image on Chrome, at least it does for me. To fix that add a float: left on your image and the name will appear next to the image on Chrome, Firefox, and IE; you can then style it more to your liking. Fiddle link with the float change.
just going through your css and code, it appears that these drop downs would inherit the height from their parent (.menu), which is set to 30px. the images seem like they are set to have a height of 48px; this maybe causing your cutoff.
Add this to your css code:
ul.menu-drop li {
height: 50px;
}
That sets the height of your list within the menu-drop menu thing so its big enough for the picture.