-
Notifications
You must be signed in to change notification settings - Fork 223
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
Add option to right align the dropdown menu #143
Conversation
Thanks for preparing this @jmsblah, it looks great! Here's a minimal example that demonstrates the sizing issues I mentioned import dash
import dash_bootstrap_components as dbc
app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])
app.layout = dbc.Container(
dbc.DropdownMenu(
[dbc.DropdownMenuItem("Item 1"), dbc.DropdownMenuItem("Item 2")],
right=True,
label="Open",
)
)
if __name__ == "__main__":
app.run_server() The container here is just to add a margin so that there is enough space for right alignment to work, you don't actually need it to see the sizing issues. If you run that and open the dropdown, you see something like this: The dropdown takes the full width of the parent container (in your case, testing inside a Navbar you wouldn't have seen this because the parent container is narrower than the minimum width of the dropdown). If you run the exact same code with the Dash v1 pre-releases ( I am pretty sure the reason for this is related to the discussion here. Consequently I think the best thing is if we merge this into the Before we do that though, it would be great if we added some documentation for this to the DropdownMenu documentation. If you want to have a go at that, take a look here. The page content is specified in |
@tcbegley Nice! I have a virtual environment for this change, will test it out again to reproduce and test against Dash v1 just to see the behavior. It will be great for training. Will take a look at the documentation as well, probably in the next few days. What do I need to do to move this pull request into |
So, I replicated the sizing issue in the current dash version and I was also able to see it fixed when using dash v1 pre-releases. On the documentation, I don't understand how the files are rendered into a webpage but I think I was able to mimic the current examples to generate a new one referring to right-alignment. To be consistent with the Bootstrap documentation, I opted to create a new section for the right alignment feature. It looks like the only thing I needed to do was to create a new Is it possible to run the examples in python to test? Let me know your thoughts, also, if you can give point me to any documentation that explains how these examples are rendered, that will be great. |
This is great! Thank you for taking care of that.
Sorry, I should have said. The docs are basically just a big Flask / Dash app. You can run it with I am going to merge this, thanks for contributing @jmsblah! |
Cool! I can try to contribute more. Let me know if there is something else I can go slowly working on. |
I think the lowest hanging fruit at the moment is documentation and examples. It's maybe a bit less exciting, but any contributions there are very welcome. Ultimately we'd like to have the documentation for each page be like the page for navs, with text explanations instead of just examples, and a bit of an introduction at the top. With those more complete pages in the docs I've been taking my cues from the corresponding pages in the Bootstrap docs and the reactstrap docs. In terms of components, there's breadcrumbs and pagination that I would like to add. The former would probably be a good one, I don't think it would be too hard to make a component for that, the latter will probably take some discussion about the best way to implement it in a user-friendly way. Also a new component in Bootstrap as of a couple months ago is toasts. These haven't made it into reactstrap yet, but there's an open pull request for that on the reactstrap repo. Once it's incorporated there, you could add a |
* Add option to right align the dropdown menu * Add right-aligment to docs
* Add option to right align the dropdown menu * Add right-aligment to docs
* Add option to right align the dropdown menu * Add right-aligment to docs
* Add option to right align the dropdown menu * Add right-aligment to docs
* Add option to right align the dropdown menu * Add right-aligment to docs
This has been merged and is available in version 0.5.0 🎉 |
* Add option to right align the dropdown menu * Add right-aligment to docs
Change to add option to align the dropdown menu along the right side of its parent. Default: False.