search

rundis / elm-bootstrap

Responsive and reliable web apps with Elm and Twitter Bootstrap
http://elm-bootstrap.info/
BSD 3-Clause "New" or "Revised" License
398 stars 72 forks source link

Align Navbar-Dropdown(s) to the right #48

Open manuscrypt opened 7 years ago

manuscrypt commented 7 years ago

I am cloning an application that uses bootstrap (3) and it features a Navbar where the last item is a dropdown item, which is pushed all the way to the right.

You already mentioned, that as a workaround, I could model the dropdown with Bootstrap.Dropdown and then use that in customItems, which should be pushed right automagically.

I also tried to apply my meagre css skills, by trying to force float: right on li:last-child, but that had no effect. Absolute positioning did move the li finally, but broke, when the Navbar collapsed.

I hope this describes my use-case sufficiently, and I have no trouble to do the workaround, but it might be nice to have a way to position the Navbar-Items more easily, or maybe just introducing a "spacer" item.

Thank you for the wonderful library! Let me know, if I can provide anything else.

manuscrypt commented 7 years ago

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.

aaronwhite commented 6 years ago

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

rundis commented 6 years ago

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.

branjwong commented 6 years ago

Running into this as well!

Munksgaard commented 5 years ago

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?

tad-lispy commented 5 years ago

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:

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.

donotnoot commented 4 years ago

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