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 a bit of padding to Dropdown to make room for the arrow #2052

Closed
jasongrout opened this Issue Apr 16, 2018 · 6 comments

Comments

Projects
None yet
2 participants
@jasongrout
Member

jasongrout commented Apr 16, 2018

Right now, if the content goes to the edge of the dropdown, the arrow and the content are on top of each other:

from ipywidgets import *

Dropdown(options=['very very very very very very very very very very very very very very long option', 'another option'])

This gives:
screen shot 2018-04-16 at 8 01 55 am

However, adding padding-right: 18px in the inner select:

.widget-dropdown > select {

gives:
screen shot 2018-04-16 at 8 03 18 am

@jasongrout

This comment has been minimized.

Member

jasongrout commented Apr 16, 2018

(perhaps 20px of right padding looks better? Probably whatever it takes to center that svg from the content edge and the border edge on the other side...)

@tjann

This comment has been minimized.

Contributor

tjann commented Jun 16, 2018

Hi, I am interested in getting into open source / Jupyter with this issue. I thought it looked pretty simple but my changes aren't showing up. Could this be related to f68bfbc by any chance?

@jasongrout

This comment has been minimized.

Member

jasongrout commented Jun 16, 2018

Thanks!

It's most likely not related to that commit because my comment is way after that commit removed the code. Perhaps it's the browser caching your code so it's not showing up? Can you open the browser developer tools and verify that your CSS is showing up on the page?

@tjann

This comment has been minimized.

Contributor

tjann commented Jun 16, 2018

Ah, so glad I asked! Indeed my source code/CSS wasn't showing up, so I switched from jupyter lab to jupyter notebook and it worked. Makes sense in hindsight since I only have the developer release of the notebook and not the lab. I have some questions that might help others:

I started wondering why we needed the latest jupyter lab to do dev work on widgets:
https://github.com/jupyter-widgets/ipywidgets/blob/master/docs/source/dev_install.md

But before asking, I wanted to check, and found another guide for developing ipywidgets which doesn't mention jupyter lab but seems to be a bit outdated:
https://github.com/jupyter-widgets/ipywidgets/blob/773d877d3173958ca6a6b6f86a88f42fb436d174/docs/source/dev_install.md

Other than that, I'll submit a patch and look forward to any feedback!

@jasongrout

This comment has been minimized.

Member

jasongrout commented Jun 16, 2018

I started wondering why we needed the latest jupyter lab to do dev work on widgets:
https://github.com/jupyter-widgets/ipywidgets/blob/master/docs/source/dev_install.md

It might not be strictly needed, but (a) it's a good idea to develop against the most recent software, and (b) it might be needed, depending on changes that might be only compatible with the latest release of jlab.

Regardless, it's possible your dev setup for lab wasn't giving you what you thought it was giving you.

Thanks for the PR!

@jasongrout

This comment has been minimized.

Member

jasongrout commented Jul 17, 2018

Fixed in #2101.

@jasongrout jasongrout closed this Jul 17, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment