Cannot change the width of the widget "Password"

[piyueh]

Not sure if this is intentional or not, but it seems the widget Password's width can't be changed, unlike the width of its parent class Text. Here's an example:

import ipywidgets
a = ipywidgets.Password(layout=ipywidgets.Layout(width="15%"))
b = ipywidgets.Password(layout=ipywidgets.Layout(width="100%"))
display(a, b)

And I got two input columns with exactly the same width.

I'm using ipywidgets v7.4.2, Jupyter Notebook v5.7.8 , Python v3.6.8, and IPython v7.4.0. All from Anaconda. Also, the browser I'm using is Google Chrome v75.0.3770.80.

Is this an issue? Or is it what it's supposed to be? Thanks!

[piyueh]

I have to use my own CSS setting to change the style of Password widget. In ipywidgets' CSS file packages/controls/css/widgets-base.css, there's no style class for input[type=password], so I had to add my own config for this class.

[zerline]

@piyueh but here, with the use of Layout, the style is put directly into the HTML, like this:

<div class=\"p-Widget jupyter-widgets widget-inline-hbox widget-text\" style=\"width: 100%;\"><label class=\"widget-label\" style=\"display: none;\" title=\"\
\" for=\"3308a4e7-5144-49ac-bbc9-fb5b5aa305a9\"></label><input id=\"3308a4e7-5144-49ac-bbc9-fb5b5aa305a9\" placeholder=\" \" type=\"password\"></div></div></\
div>"

So it should work just the same as regular text input. Although it does not work, I confirm ..

[piyueh]

@zerline I'm not familiar with HTML/CSS, so my observation and the terminology used may be wrong. But I think the width setting goes to the div object that wraps actual widgets. It looks like ipywidgets creates a div first and puts the actual object (for example, a <input type="text"> object for ipywidgets.Text) inside the div. So the width we feed into ipywidgets.Text is just the width of div. The width of the actual object is affected through the flex-grow: 1 setting in packages/controls/css/widgets-base.css. For example, for an ipywidget.Text object, the actual <input type="text"> object has flex-grow: 1 here, which forces the <input type="text"> to increase its width to fill the whole remaining space of the parent div object (I think).

For ipywidgets.Password, the actual object <input type="password"> does not have flex-grow: 1 setting. In fact, there's no style setting at all for <input type="password"> in the CSS file. So in my own CSS file, I have something like this:

.widget-text input[type="password"] {
    flex-grow: 1;
    ...
    some other style settings
}

I believe this issue is the same as issue #2492.

[jasongrout]

Fixed by #2619