I have a tailwindcss component as defined below. The parent container is set position: relative, which houses a dropdown component. which is supposed to show on button hover.
Everthing works fine but the moment I put the dropdown inside a container with overflow set to auto. It seem as though the dropdown menu is constraint to the height of the contianer. In other the words the the dropdown adds scrolling instead of popping out.
How do I make is pop out of the container instead being constraint to the parent's height.
Link to code: tailwind playbook
<div class="h-20 overflow-y-auto">
<div class="group relative inline-block">
<button>show</button>
<ul class="absolute hidden border p-5 group-hover:block">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
</ul>
</div>
</div>
Related
I'm trying to have the heading to the left of the list item.
I don't want to nest an ordered list inside of an unordered because I need the list items to be continuous between headings.
This is what I have been using, but I don't like that the heading is indented right, despite not being included in the list item.
Tried using "text-indent:-2em" on the heading but that didn't work.
I even tried creating a separate div and putting the negative text indent there, but that didn't work either.
<ol reversed>
<h3>year</h3>
<li>item</li>
<li>item</li>
<h3>year</h3>
<li>item</li>
</ol>
Tried a few websites:
https://www.htmlgoodies.com/tutorials/getting_started/article.php/3479461
So, I think you are on the right path with the -2em to reverse the indent, but it needs to be placed on "margin-left" instead of "text-indent", and either create a class to call it each time you want to use it:
in CSS:
.unindent{
margin-left: -2em;
}
HTML:
<ol reversed>
<h3 class="unindent">year</h3>
<li >item 1</li>
<li>item 2</li>
<h3 class="unindent">year</h3>
<li>item 3</li>
</ol>
or individually add it to the lines you want "un-indented":
<ol reversed>
<h3 style="margin-left: -2em" >year</h3>
<li >item 1</li>
<li>item 2</li>
<h3 style="margin-left: -2em" >year</h3>
<li>item 3</li>
</ol>
There may be other ways, but that's the simplest way I could think of. Good luck!
I have long page with fixed left sidebar :
<div id="sidebar">
<ul>
<li>menu 1</li>
<li>menu 2</li>
<li>menu 3</li>
<li>menu 4</li>
<li>menu 5</li>
<li>menu 6</li>
<li>menu 7</li>
</ul>
</div>
and js for affix:
$("#sidebar").affix({offset: {top: 0, bottom:420} });
I have and footer which is with height:390px.
When I first time scroll to the bottom of the page and try to scroll up the sidebar returns to its first position (to the top of the page) and it is not with position:fixed, anymore. It is with inline style position:relative, added with Bootstrap JS. When I scroll to the top I see class changed to affix-top. Every other scroll page position, the class is affix, even if it is of the bottom of the page and sidebar stay with position:relative.
If I use only :
$("#sidebar").affix({offset: {top: 0} });
, without bottom, it works fine, but I need bottom, because of the footer.
Where can be the problem ?
As the docs suggest adding position: absolute to the .affix-bottom appears to solve this problem.
So you need the css:
#sidebar.affix-bottom {
position: absolute;
}
Bootply
I have a page I'm working on where currently I have 2 items. Item 1 is a flexnav jQuery navigation menu with a dropdown. Item 2 is a slick jQuery div scroller. I am trying to position the slick scroller just below the flexnav menu. The problem I'm running into though is when you hover over one of the menu items the dropdown for the sub menu is covered up by the slick scroller divs. This only seems to be happening with a screen larger than 800px as the flexnav plugin changes to a mobile friendly navigation menu on small screens.
I have tried changing the css position setting of both items but I just can't seem to figure out how to make the dropdown menus appear above the slick divs. Does anyone know what I'm doing wrong here or have any suggestions on how I could change things around to achieve what I am looking for?
Here is a example JSFiddle
The code I am using:
<header>
<nav style="background-color: #FAD10E; height:50px">
<div class="menu-button">Mobile Menu</div>
<ul class="flexnav" data-breakpoint="800">
<li>Home</li>
<li>Stuff
<!-- THIS DROPDOWN IS COVERED BY THE AUTOPLAY DIV -->
<ul>
<li>Stuff 1</li>
<li>Stuff 2</li>
<li>Stuff 3</li>
<li>Stuff 4</li>
<li>Stuff 5</li>
<li>Stuff 6</li>
</ul>
</li>
<li>Stuff 2</li>
<li>Stuff 3</li>
<li>Stuff 4</li>
<li>Stuff 5</li>
</ul>
</nav>
</header>
<div>
<!-- THIS AUTOPLAY DIV SHOWS ON TOP OF THE MENU DROPDOWN ITEMS -->
<div class="autoplay">
<div><img src="http://www.affordablehomecare.org/assets/images/fade/happy-home-care-client.jpg"></div>
<div><img src="http://www.affordablehomecare.org/assets/images/fade/helping-hands-home-care.jpg"></div>
<div><img src="http://www.affordablehomecare.org/assets/images/fade/loving-home-care-client.jpg"></div>
</div>
</div>
You only need to add two lines of CSS
Example fiddle
CSS
.flexnav{
-webkit-padding-start: 0px;
-webkit-margin-before: 0px;
-webkit-margin-after: 0px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
width:90%;
position: relative; /* <-- Added */
z-index: 1; /* <-- Added */
}
The position: relative allows for the element to have a z-index applied (an element must not be statically positioned, relative positioning will allow the element to display in normal document flow without having a static positioning).
The z-index: 1 provides a separate stacking context for the nav. Otherwise, because it precedes your carousel in document flow, will necessarily display beneath it when overlapped without a z-index given.
Stacking contexts apply generally only to elements which sit at the same hierarchical depth. So putting the flyout in your nav with a higher z-indexwon't work.
Having problems with my CSS menu drop-down as instead of overlapping the containers its expanding them. Probably very simple oversight but can't find the answer (closest match was Div within li not expanding but the suggestion of putting an absolute position to the submenu class didn't work). Also there is no JS.
Here is the JSFiddle Link : http://jsfiddle.net/KNBLC/
HTML
<body>
<div class="secondary-content-6col">
<h1><span class="white">Headline</span></h1>
<ul class="yellow-call-to-action">
<li>1. Select a Product <img src="../img/arrow-small.png" alt="arrow"/>
<ul>
<li>Item 1
</li>
<li>Item 2
</li>
<li>Item 3
</li>
</ul>
<!--- 1st column Footer -->
</li>
</ul>
</div>
<p> </p>
Change this in your css
.secondary-content-6col {height:150px;}
You need to set a height to that div, else it wil see the height as
height:auto;
Thank you for reading my question.
I still have a lot to learn regarding HTML and CSS, yet I'm trying. However, this brought me to a problem (I searched around a bit, but couldn't find a good answer):
I want to make a menu on the top of my page, as header. However, in the middle of this menu there is an image, as logo.
Failing to get them next to each other correctly, I used them in a list
<div class="wrap_header">
<ul>
<li>MENU ITEM 1</li>
<li>MENU ITEM 2</li>
<li id="header logo"><img src="the image"></li>
<li>MENU ITEM 3</li>
<li>MENU ITEM 4</li>
</ul>
</div><!--END wrap_header-->
Here I'm stuck:
- I want the 'MENU ITEM 1-4' to be almost at the middle(height) of the image. However the image has to stay were it is(so be at the very center, just at the bottom). If possible being able to change its position too if needed.
- I want the 'MENU ITEM 1-4' to be underlined by a 2px high,colored line, not sure how to do that.
It'll have to look something like this:
empty space THE IMAGE
MENU ITEM 1 MENU ITEM 2 THE IMAGE MENU ITEM 3 MENU ITEM 4
empty space THE IMAGE
I'm not sure whether I understood the question. But to my answer would be:
<div class="wrap_header">
<ul>
<li>MENU ITEM 1</li>
<li>MENU ITEM 2</li>
<li id="header_logo"><img src="http://www.prskelet.com/images/logotip.jpg"/></li>
<li>MENU ITEM 3</li>
<li>MENU ITEM 4</li>
</ul>
</div><!--END wrap_header-->
And style it like so:
ul li{
margin-right:20px;
line-height:200px;
float:left;
}
ul li img{
height:200px;
width:auto;
}
ul li a {
text-decoration:none;
border-bottom:2px solid red;
}
You need to put line height equal to the image height and then vertically align it. To underline text with a color you chose you will need to add border-bottom.
Here you can see jsFiddle