Skip to content

Dropdown positioning #177

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
silviogutierrez opened this issue Jan 9, 2015 · 7 comments
Open

Dropdown positioning #177

silviogutierrez opened this issue Jan 9, 2015 · 7 comments

Comments

@silviogutierrez
Copy link

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
Copy link
Contributor

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
Copy link
Author

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
Copy link
Contributor

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
Copy link
Author

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
Copy link
Contributor

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
Copy link

weyert commented Apr 2, 2015

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
Copy link

The 'align' option support is discussed in #51

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants