Skip to content
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

Merged
merged 4 commits into from
Mar 9, 2019
Merged

Add option to right align the dropdown menu #143

merged 4 commits into from
Mar 9, 2019

Conversation

jmsblah
Copy link
Contributor

@jmsblah jmsblah commented Mar 6, 2019

Change to add option to align the dropdown menu along the right side of its parent. Default: False.

image

image

@tcbegley
Copy link
Collaborator

tcbegley commented Mar 6, 2019

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:

image

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 (pip install dash==1.0.0a1 dash-renderer==1.0.0a2 dash-html-components==1.0.0a2 dash-core-components==1.0.0a4, I recommend you do this in a virtual environment or something) you see this

image

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 dash-v1 branch and it will get released when Dash v1 does.

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 __init__.py and each example is contained in a separate file in the same directory.

@tcbegley tcbegley mentioned this pull request Mar 6, 2019
@jmsblah
Copy link
Contributor Author

jmsblah commented Mar 7, 2019

@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 dash-v1 branch?

@tcbegley
Copy link
Collaborator

tcbegley commented Mar 7, 2019

What do I need to do to move this pull request into dash-v1 branch?

Click on the edit button at the top right of this page, then select the dash-v1 branch from the dropdown menu. Turns out I have the permissions to do it, but I'll let you do it so you can see where it is :)

image

@jmsblah jmsblah changed the base branch from master to dash-v1 March 8, 2019 00:34
@jmsblah
Copy link
Contributor Author

jmsblah commented Mar 9, 2019

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 py file and reference it in __init__.py. It seems to me that the Keywords Arguments section will be auto generated but the js file.

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.

image
.

image

@tcbegley
Copy link
Collaborator

tcbegley commented Mar 9, 2019

This is great! Thank you for taking care of that.

I don't understand how the files are rendered into a webpage

Sorry, I should have said. The docs are basically just a big Flask / Dash app. You can run it with python docs/run.py. Just make sure you've installed the version of dash-bootstrap-components with the relevant changes. Then you just navigate to the page you changed and you can see all the examples running. Your addition looks perfect.

image

I am going to merge this, thanks for contributing @jmsblah!

@tcbegley tcbegley self-requested a review March 9, 2019 07:13
@tcbegley tcbegley merged commit 5f33123 into facultyai:dash-v1 Mar 9, 2019
@tcbegley tcbegley mentioned this pull request Mar 9, 2019
7 tasks
@jmsblah
Copy link
Contributor Author

jmsblah commented Mar 9, 2019

Cool! I can try to contribute more. Let me know if there is something else I can go slowly working on.

@tcbegley
Copy link
Collaborator

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 Toast component. That would be another addition that has to wait for Dash v1 though.

tcbegley pushed a commit that referenced this pull request Apr 11, 2019
* Add option to right align the dropdown menu

* Add right-aligment to docs
tcbegley pushed a commit that referenced this pull request Apr 11, 2019
* Add option to right align the dropdown menu

* Add right-aligment to docs
tcbegley pushed a commit that referenced this pull request Apr 11, 2019
* Add option to right align the dropdown menu

* Add right-aligment to docs
tcbegley pushed a commit that referenced this pull request Apr 13, 2019
* Add option to right align the dropdown menu

* Add right-aligment to docs
tcbegley pushed a commit that referenced this pull request Apr 19, 2019
* Add option to right align the dropdown menu

* Add right-aligment to docs
@tcbegley
Copy link
Collaborator

This has been merged and is available in version 0.5.0 🎉

tcbegley pushed a commit that referenced this pull request Nov 28, 2020
* Add option to right align the dropdown menu

* Add right-aligment to docs
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Development

Successfully merging this pull request may close these issues.

2 participants