Right-aligned menu

[jmsblah]

Is it possible to get right-aligned menu on the navbar?
Bootstrap | menu-alignment

[tcbegley]

Hi @jmsblah

That's not supported currently. I think it should be possible to add a right prop to dbc.DropdownMenu and pass it to the reactstrap DropdownMenu here. (Note the unfortunate clash of terminology, what Bootstrap and reactstrap call a Dropdown we call DropdownMenu because we wanted to distinguish our component from the Dropdown in dash-core-components).

I tried it just now and the right alignment works, but the sizing for the menu itself was kind of messed up, so it probably isn't quite as simple as I hoped. If you want to have a go at implementing this yourself this would be a very welcome contribution! Otherwise we'll add it to the todo list and get to it eventually.

[jmsblah]

Hi!
It would be great to be able to contribute, I am just not sure on how to do it. But I will give it a try!

[tcbegley]

That's great that you'd like to contribute! Here's a rough guide, we should definitely add some instructions to our README though. Before I get into it, I had another think about this, and I think the sizing issues I was seeing on my experiment were a React 15/16 issue (current version of React is 16 which is what ReactStrap is built for, but dash-renderer uses React 15, and it sometimes causes problems, see #65). If that's true, we'll be blocked from supporting this until Dash v1 is released. However, you're more than welcome to have a go at implementing this and testing against the dash pre-releases: dash==1.0.0a1, dash-renderer==1.0.0a2 etc. Then we'll just save it up ready for when Dash v1 is released.

Anyway, here's how you would contribute if you want to give it a go:

• Fork this repository (I see you already did).
• Edit the component in src/components/DropdownMenu.js. As I mentioned above, I think you just need to add right prop to DropdownMenu and pass it to RSDropdownMenu.
• Build the components with npm run build-dist (first time you might have to npm install to get the dependencies), then install the module locally to test (pip install -e . from the root of the repository).
• Push your changes to your fork, then open a pull request and we'll review.

[jmsblah]

Hi @tcbegley
I gave it a try and it seems to be working for me, take a look at the screenshots below.
I didn't find any issue with the sizing, can you explain better what you got so I can try to replicate?

[tcbegley]

Closing this in favour of #142 that's tracking this and #143 that would resolve this.