CODEWITHSUNDEEP
htmlcsszurb-foundation
Seif El Deen Khaled
Seif El Deen Khaled

Reputation: 263

How to position Foundation Dropdown?

I am using Foundation 5.4.5 dropdown for my login form but the problem is that the dropdown appears like this:

enter image description here

I want it to be like the one opened where the nub on the right and the body positioned well

What i want

Here is my HTML:

<a data-dropdown="drop1" aria-controls="drop1" aria-expanded="false">Has Dropdown</a>
    <ul id="drop1" class="f-dropdown" data-dropdown-content aria-hidden="true" tabindex="-1">
      <li><a href="#">This is a link</a></li>
      <li><a href="#">This is another</a></li>
      <li><a href="#">Yet another</a></li>
    </ul>

Upvotes: 7

Views: 4597

Answers (2)

Pedro Affonso
Pedro Affonso

Reputation: 1676

You have two options

<a data-dropdown="drop1" aria-controls="drop1" aria-expanded="false" data-options="align:left">Has Dropdown</a>

Or

<ul id="drop1" class="f-dropdown drop-left" data-dropdown-content aria-hidden="true" tabindex="-1">
      <li><a href="#">This is a link</a></li>
      <li><a href="#">This is another</a></li>
      <li><a href="#">Yet another</a></li>
    </ul>

Both work AS WORKAROUNDS. However, I get your point: you want your dropdown to be displayed in the bottom of your link, but aligned with the right border. I would be grateful if someone came up with an answer for that because the foundation site show it is possible in some undocumented way.

Upvotes: 2

nolawi
nolawi

Reputation: 4649

To specify how the drop down shows use the align property in data-options on the target element.

Add data-options="align:right" to the a tag.

Upvotes: 0

Related Questions