Menu icon Foundation
Dropdown Button problem (containers)

Hi guys

 

I would like to add a container in the footer, dropdown style.

 

<footer id="footer">	
   <div class="row">					
				
	<button class="button" type="button" data-toggle="example-dropdown-1">Informations Générales</button>
           <div class="dropdown-pane" data-position="top" id="example-dropdown-1" data-dropdown data-hover="true" data-hover-pane="true">
 
                       <p>BLA BLA BLA BLA</p>

  </div>		
</footer>

 

So I expect to see the text when the mouse goes to that button, but it shows nothing.
I have tried the same somewhere else, and it worked.
So i guess it's coz the parent container puts limit?
any solutions to overide that limit?

thanks

dropdownbuttoncontainer

Hi guys

 

I would like to add a container in the footer, dropdown style.

 

<footer id="footer">	
   <div class="row">					
				
	<button class="button" type="button" data-toggle="example-dropdown-1">Informations Générales</button>
           <div class="dropdown-pane" data-position="top" id="example-dropdown-1" data-dropdown data-hover="true" data-hover-pane="true">
 
                       <p>BLA BLA BLA BLA</p>

  </div>		
</footer>

 

So I expect to see the text when the mouse goes to that button, but it shows nothing.
I have tried the same somewhere else, and it worked.
So i guess it's coz the parent container puts limit?
any solutions to overide that limit?

thanks

Rafi Benkual over 2 years ago

 Not sure what kind of interaction you are trying to accomplish. Can you explain the goal here and set up a demo of your code so we can help more?

toshfox over 2 years ago

Of course :)

I want to add a hoverable dropdown button as explained in the page :
http://foundation.zurb.com/sites/docs/dropdown.html

In the footer, I want to see that :

When I put the mouse on it ( without clicking, but by hovering),  I want to see a dropdown (direction: UP) with a text.
(it will be the address of a company, contact information

the code (in the first post) works well inside a large container, but in the footer, it doesn't.
I think it's coz the bounds of the parent..

 

I had tried to do it on codepen.io

https://codepen.io/toshfox/pen/WOYOyj

but for some reasons, the data-position="top" is not working there...

the code seems correct tho,

my question is , how can the dropdown data appear "above" the body content., overriding the footer (parent)

 

I am very sorry if it's still not clear, english is not my native langage ...

 

guillermo haas-thompson over 2 years ago

<button class="button" type="button" data-toggle="info">Informations Générales</button>

<div class="dropdown-pane top"  id="info" data-dropdown data-hover="true" data-hover-pane="true">

  <p>BLA BLA BLA BLA</p>   

</div> 

How about above where you tweak the div class to include top. This seems to work and matches the docs.