Align Navbar-Dropdown(s) to the right about elm-bootstrap HOT 7 OPEN

Oh, another possible solution would be to have two Navbars and arrange them in a Grid. That's my preferred one, currently. What I am asking for, is probably not even part of the bootstrap standard.

from elm-bootstrap.

Running into this now as well. We're voracious & happy consumers of this great library (thanks @rundis!) Will try dropdown workaround

from elm-bootstrap.

Cheers. Didn't have time to look at this with my push for a 4.0.0 release.
You can do a crazy amount of stuff with nav and navbars in bootstrap. It's a bit hard to come up with an API that is easy to use and still super-flexible to handle use cases like this. I'll give it some though when I have some time, alternatively someone comes up with some design ideas that aids this and potentially other common exceptions to the stuff currently supported.

from elm-bootstrap.

Running into this as well!

from elm-bootstrap.

I would like to be able to specify whether my Navbar.items are aligned left or right, but I guess that is sort of related?

from elm-bootstrap.

Hi! Thanks for this package. We are experimenting with converting Richard Feldman's implementation of the Real World SPA to use Elm Bootstrap. One immediate problem is the Navbar.

In the templates the navbar doesn't use collapse wrapper (it's basically non-responsive) and the stylesheet makes some assumptions about it. Simply replacing their navbar with one created using Bootstrap.Navbar results in all items being always hidden. We tried to use the standard bootstrap stylesheet and then adjusting it. That's how we ran into this issue - it seems impossible to align items right without doing some hacks.

Since you have asked for design ideas, let me drop my two cents. IMO having two types (Navbar.Item and Navbar.CustomItem) where group of Item is always on the left and CustomItem always on the right is mixing concerns. Looking at the docs from Bootstrap website I see that they have different groups inside a navbar (specifically Brand, Nav, Form, Text) with different accepted children and default behavior. Each group can take bootstrap classes (like ml-auto to push it to the right). Note that there are examples of navbar-text without brand and such, so the configuration of groups is pretty arbitrary.

Maybe we should try to encode it in the types? The Navbar would take a list of Group where group could be a union type:

type Group
    = Brand (List (Html.Attribute msg)) (List (Html msg))
    | Nav (List (Html.Attribute msg)) (List NavItem)
    | Form (List (Html.Attribute msg)) (List (Html msg))
    | Text (List (Html.Attribute msg)) (List (Html msg))

While rendering, each group would have some default attributes (e.g. Nav grows to take all the space) but attributes provided as first argument to the constructor would take precedence. Perhaps Form and Text could be merged into single Custom constructor.

Benefits:

• Greater flexibility
• Decoupling of type from layout
• Semantic output (with ARIA attributes etc.)

Please let me know what you think. I can't promise but if we have time we will try to implement it in our app, see how it goes and if you like it prepare a PR.

Once again, thanks for your efforts here.

from elm-bootstrap.

any updates on this? I'd really like to align some items right

from elm-bootstrap.