Pop-Out Hover Menu Clipped by Side Table

[Molly Jepson]

URL: mjskintests.proboards.com (This test site kinda looks like a mess because it's under construction.)

I am attempting to make hover pop-out menus for the admin names in my sidebar, and I succeeded in making the hover work—except that the last list is clipped off by the bottom of the side table box. Is there a way to fix this?



The z-index for the hover-links are 9998 (the sticky menu is 9999), if that is needed.

[Tumbleweed]

Molly Jepson ,

I move your thread out of the template library as that is for completed templates for others to use and not for questions regarding template issues. 


Anyway, I've had this issue myself and what I had to do was set the the sidebar "box" to Style 2 (No title bar, inner border color).  That worked for what I needed however in your case, you'd need to recreate the title bar, etc to replicate your other side bar boxes. I am going to fiddle with this a bit more to see if there is a way to use style 1 as I think when I ran into this, I didn't try hard figuring out another way.

[Molly Jepson]

Sept 9, 2016 15:50:03 GMT -8 Tumbleweed said:

I move your thread out of the template library as that is for completed templates for others to use and not for questions regarding template issues.

Whoops, sorry about that, this is where I thought I had posted it in the first place.

Sept 9, 2016 15:50:03 GMT -8 Tumbleweed said:

Anyway, I've had this issue myself and what I had to do was set the the sidebar "box" to Style 2 (No title bar, inner border color).  That worked for what I needed however in your case, you'd need to recreate the title bar, etc to replicate your other side bar boxes. I am going to fiddle with this a bit more to see if there is a way to use style 1 as I think when I ran into this, I didn't try hard figuring out another way.

I didn't think to try switching the box style. I guess if a solution can't be found for making it work with Style 1, that's an alternative. Thank you very much for your help with this, I hope that you have better luck finding out what it is than me, haha.

[Tumbleweed]

Molly Jepson ,

I can't work out a way to do that using the box style 1. But if you want to try using box style 2 on that one box and then make it look like the others, I can give you something to go on but since I don't have any of your code, I just put my own drop down on my test site. (You can see my flaky drop down, second box from the bottom) But if this is something want to try, do this for that one box:

Set the style to 2 and then the blue is what you need to add and the red is what you need to replace with your code. The green is what I had to add to make the background not have rounded corners but not sure if you'll need that.

<style>
.content-box.pad-all.cap-bottom{
border-radius:0px;}
</style>


<div class="container">
<div class="title-bar" style="position:absolute; top:-3px; left:0px; width:190px; padding;0px; margin:0px;">
<h2>Title here</h2>
</div>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
</div>


Again, the red, you need to replace with your drop down stuff and you'll probably need to tweek the inline styles I have in the title bar div (blue and bolded).

OR, you can wait for a more wise person to come along to help.

[Molly Jepson]

Thank you so so much for fiddling with this for me, Tumbleweed. I believe I might have in fact figured it out, and I would not have if you had not mentioned that the Style 2 box lets it work but the Style 1 box doesn't.

What I think will be a solution: Per the sidebar code, when the table style is set to Style 1 the class used is ".content" but Style 2 uses ".content-box". The default skin CSS for ".content" hides overflow, so I added a piece to my CSS for ".content" under "#sidebarr-left" only, changing the overflow to visible.

I'm hoping this doesn't have any unforeseen side effects, but right now it appears to be functioning the way I need it to. If it turns out to cause additional problems, I'll just change it to Style 2 and use the very helpful changes you wrote out for me. Again, thank you so much for your assistance!

[Tumbleweed]

Sept 10, 2016 6:36:04 GMT -8 Molly Jepson said:

Thank you so so much for fiddling with this for me, Tumbleweed . I believe I might have in fact figured it out, and I would not have if you had not mentioned that the Style 2 box lets it work but the Style 1 box doesn't.

What I think will be a solution: Per the sidebar code, when the table style is set to Style 1 the class used is ".content" but Style 2 uses ".content-box". The default skin CSS for ".content" hides overflow, so I added a piece to my CSS for ".content" under "#sidebarr-left" only, changing the overflow to visible.

I'm hoping this doesn't have any unforeseen side effects, but right now it appears to be functioning the way I need it to. If it turns out to cause additional problems, I'll just change it to Style 2 and use the very helpful changes you wrote out for me. Again, thank you so much for your assistance!

That's great you figured it out. I was trying overflow:visible but was using the wrong class and tried every combo except evidently the correct combo. So thanks for figuring that out. On that test site I linked to you'll see that hover stuff with the 3 images of the blond lady. That was the one I had trouble with so I resorted to the other style to get it to work. When I have time I'll have to go redo that with the original style box. So thanks!