Menu icon Foundation
Offset for dropdown panes?

I'm using dropdown panes to provide descriptions for items in a catalog. The items are arranged in a row and the panes open to the right. Problem is, when a pane is open, it hides the next catalog item, which makes it clumsy to browse through the descriptions.

I would like the panes to open, say, at 50% below the top of the trigger (but I'll settle for a fixed offset). Is there any way to do this?

(I'm embarrassed to admit that I haven't been able to locate the JS source...)

Thank you for any help!

jointswpjqueryDropdown panes

I'm using dropdown panes to provide descriptions for items in a catalog. The items are arranged in a row and the panes open to the right. Problem is, when a pane is open, it hides the next catalog item, which makes it clumsy to browse through the descriptions.

I would like the panes to open, say, at 50% below the top of the trigger (but I'll settle for a fixed offset). Is there any way to do this?

(I'm embarrassed to admit that I haven't been able to locate the JS source...)

Thank you for any help!

Val Ery over 2 years ago

 Hi Ariel!

It is possible "to move" dropdown pane relative to toggler on the selected pixel values. For this
1) you need to remove the class responsible for the position (top, bottom, right, left)
2) add data-attributes for a block with the class .dropdown-pane. For example:

<div class="row">
  <button class="button" type="button" data-toggle="mypane">CTA</button>
  <div class="dropdown-pane" id="mypane" data-dropdown data-auto-focus="true" data-h-offset="300" data-v-offset="100">
    <h3 class="text-center">You are Welcome!</h3>
  </div>
</div>

Here, the offset relative to the button is 300 pixels to the right and 100 pixels down.

Ariel Frailich over 2 years ago

 Hi Val,

Ohhhh, thank you! That works wonderfully!

(From your reply, I also learned that the 'Plugin Options' at the bottom of the doc pages can be used as attributes. I only gave those sections a glance, thinking they were JS vars. Thank you!)

There's one small problem left. I noticed that the dropdown handler is smart enough to open the pane to the left (when position was 'right') when there isn't enough window space on the right. Now that I've adjusted the panes to open halfway down the trigger and centred, the panes at each end of the row open too high: the left one mostly above the trigger, the right one aligned with the top of the trigger. You can see this by hovering over the small poster images on <http://streamiacs.atthezown.com>.

Might there be a way to fix this? If not, I'll live with it.

Thank you!