Dropdown positioning

[silviogutierrez]

On small devices, I see the following code for dropdowns:

          if (controller.small()) {
            css.left = Math.max((parentOffset.width - dropdownWidth) / 2, 8) + 'px';
            css.position = 'absolute';
            css.width = '95%';
            css['max-width'] = 'none';
          }

Why is the left value being calculated based on the dropdown's offset, and not on the offset of the toggle element? This will almost always mean the dropdown won't show properly aligned with the element that toggled it.

If, instead, we do this:

          if (controller.small()) {
            parentOffset = $position.offset(element);
            css.left = Math.max((parentOffset.width - dropdownWidth) / 2, 8) + 'px';
            css.position = 'absolute';
            css.width = '95%';
            css['max-width'] = 'none';
          }

It seems to work.

Thanks,

Silvio

[circlingthesun]

Care to submit a pull request?

On Fri, 9 Jan 2015 8:20 pm silviogutierrez [email protected] wrote:

On small devices, I see the following code for dropdowns:

      if (controller.small()) {
        css.left = Math.max((parentOffset.width - dropdownWidth) / 2, 8) + 'px';
        css.position = 'absolute';
        css.width = '95%';
        css['max-width'] = 'none';
      }

Why is the left value being calculated based on the dropdown's offset, and
not on the offset of the toggle element? This will almost always mean the
dropdown won't show properly aligned with the element that toggled it.

If, instead, we do this:

      if (controller.small()) {
        parentOffset = $position.offset(element);
        css.left = Math.max((parentOffset.width - dropdownWidth) / 2, 8) + 'px';
        css.position = 'absolute';
        css.width = '95%';
        css['max-width'] = 'none';
      }

It seems to work.

Thanks,

Silvio

—
Reply to this email directly or view it on GitHub
#177.

[silviogutierrez]

Sure, I'd be happy to look into it. But what should the behavior of a dropdown be on small devices?

On giving it some thought, I imagine the dropdown itself would have no horizontal offset, taking up most of the device's width. But the small carat/arrow would shift to point to the right location. Does this make sense?

[circlingthesun]

That sounds reasonable to me. Have a look at how vannila foundation behaves
at http://foundation.zurb.com/docs/components/dropdown_buttons.html

On Fri Jan 09 2015 at 23:40:26 silviogutierrez [email protected]
wrote:

Sure, I'd be happy to look into it. But what should the behavior of a
dropdown be on small devices?

On giving it some thought, I imagine the dropdown itself would have no
horizontal offset, taking up most of the device's width. But the small
carat/arrow would shift to point to the right location. Does this make
sense?

—
Reply to this email directly or view it on GitHub
#177 (comment)
.

[silviogutierrez]

Unfortunately it looks like vanilla Foundation will overflow if you go small enough (most of their examples are leftmost on the page, so it's hard to trigger an overflow).

Same goes for Angular Foundation because we use their CSS and markup. And because the "nub" is pseudoselector based (:before, :after), there is no way to reposition it using JS. That is, we can't set the nub's left value using JavaScript.

Our options are to use a different markup (like JoyRide, which has an actual DOM nub), or leave things are they are with the overflow. Can't really think of any other way to move the nub around.

PS. It is technically possible to modify pseuselectors using JS, but it requires some pretty nasty hacks.

[circlingthesun]

If you can change the template markup to get this working properly that would be great. I'm experiencing this issue myself but I've not really had time to dig very deep.

[weyert]

Looks like the dropdown directive is ignoring the native Foundation options. As you can specify align there but it's not being used. Always keeps having a right direction. Problematic when you are using a card layout.

[bgilhome]

The 'align' option support is discussed in #51