No horizontal scroll for widget in Firefox

[octavd]

Hello,

In the following env:

• pywidgets 7.7.1
• jupyterhub 2.3.1
• jupyterlab 3.4.3

If i try to execute the following code:

import ipywidgets as ipy

widgets = {}

def ds(x):
    return {'description_width': f'{x}%'}

def change2(widget):
    if len(widgets['new_evalset'].options) == 0:
        widgets['new_evalset'].options = [widgets['new_evalset_name'].value]
    elif len(widgets['new_evalset'].options) == 1:
        widgets['new_evalset'].options = [widgets['new_evalset_name'].value]
    else:
        widgets['new_evalset'].options = tuple()

_ontology_name = ipy.Dropdown(description='Name', style=ds(20), layout=ipy.Layout(width='99%'))
widgets['ontology_name'] = _ontology_name
_ontology_lang = ipy.Dropdown(description='Lang', style=ds(20), layout=ipy.Layout(width='99%'))
widgets['ontology_lang'] = _ontology_lang
_ontology_version = ipy.Dropdown(description='Version', style=ds(20), layout=ipy.Layout(width='99%'))
widgets['ontology_version'] = _ontology_version
_ontology_box = \
    ipy.VBox(children=[_ontology_name, _ontology_lang, _ontology_version], layout=ipy.Layout(width='99%'))
_master_ontology_name = ipy.Dropdown(description='Name', style=ds(20), layout=ipy.Layout(width='99%'))
widgets['master_ontology_name'] = _master_ontology_name
_master_ontology_lang = ipy.Dropdown(description='Lang', style=ds(20), layout=ipy.Layout(width='99%'))
widgets['master_ontology_lang'] = _master_ontology_lang
_master_ontology_version = ipy.Dropdown(description='Version', style=ds(20), layout=ipy.Layout(width='99%'))
widgets['master_ontology_version'] = _master_ontology_version
_master_ontology_box = ipy.VBox(children=[_master_ontology_name, _master_ontology_lang,
                                              _master_ontology_version], layout=ipy.Layout(width='99%'))
_ontology_tab = ipy.Tab(children=[_ontology_box, _master_ontology_box])
_ontology_tab.set_title(0, 'Ontology')
_ontology_tab.set_title(1, 'Master Ontology')
widgets['ontology_tab'] = _ontology_tab

_new_evalset_label = ipy.Label(value="Select:", layout=ipy.Layout(width='99%'))
_new_evalset = ipy.SelectMultiple(rows=7, layout=ipy.Layout(width='99%'))
widgets['new_evalset'] = _new_evalset

_entities_label = ipy.Label(value="Entities:", layout=ipy.Layout(width='99%'))
_entities = ipy.Select(rows=4, layout=ipy.Layout(width='99%'))
widgets['entities'] = _entities
_entity_name = ipy.Text(disabled=True, description='Name', style=ds(20), layout=ipy.Layout(width='99%'))
_entity_name.add_class("non_opaque")
widgets['entity_name'] = _entity_name
_entity_version = ipy.Dropdown(description='Version', style=ds(20), layout=ipy.Layout(width='99%'))
widgets['entity_version'] = _entity_version

_new_evalset_name = ipy.Text(description="Type texte here to change Select content", style=ds(20),
                                 layout=ipy.Layout(width='99%', display='flex', align_items='flex-end'))
_new_evalset_name.observe(change2, names='value')
widgets['new_evalset_name'] = _new_evalset_name
_evalset_top = ipy.GridspecLayout(6, 60, layout=ipy.Layout(width='99%'))
_evalset_top[0:5, 0:19] = _ontology_tab
_evalset_top[0, 21:39] = _new_evalset_label
_evalset_top[1:5, 21:39] = _new_evalset
_evalset_top[0, 41:60] = _entities_label
_evalset_top[1:3, 41:60] = _entities
_evalset_top[3, 41:60] = _entity_name
_evalset_top[4, 41:60] = _entity_version
_evalset_top[5, 0:60] = _new_evalset_name
_evalset_top

In firefox browser if i run this code in jupyterlab, it gives the below output

As you can see if i type a long text in the "type texte here to change the select content" the select section is updated and there is no horizontal scroll for it.

In chrome, if i do the same steps as above, the horizontal scroll is present.

Could you please advice on why in chrome everything is displayed normally and in firefox not? Tested also with the new versions of ipywidgets and still the same result as above.

Thank you, Octavian

[octavd]

Follow up:

By executing the below:

from IPython.display import display, HTML
display(HTML('''
    <!--<script type="text/javascript">
        function css_browser_selector(u){var ua=u.toLowerCase(),is=function(t){return ua.indexOf(t)>-1},g='gecko',w='webkit',s='safari',o='opera',m='mobile',h=document.documentElement,b=[(!(/opera|webtv/i.test(ua))&&/msie\s(\d)/.test(ua))?('ie ie'+RegExp.$1):is('firefox/2')?g+' ff2':is('firefox/3.5')?g+' ff3 ff3_5':is('firefox/3.6')?g+' ff3 ff3_6':is('firefox/3')?g+' ff3':is('gecko/')?g:is('opera')?o+(/version\/(\d+)/.test(ua)?' '+o+RegExp.$1:(/opera(\s|\/)(\d+)/.test(ua)?' '+o+RegExp.$2:'')):is('konqueror')?'konqueror':is('blackberry')?m+' blackberry':is('android')?m+' android':is('chrome')?w+' chrome':is('iron')?w+' iron':is('applewebkit/')?w+' '+s+(/version\/(\d+)/.test(ua)?' '+s+RegExp.$1:''):is('mozilla/')?g:'',is('j2me')?m+' j2me':is('iphone')?m+' iphone':is('ipod')?m+' ipod':is('ipad')?m+' ipad':is('mac')?'mac':is('darwin')?'mac':is('webtv')?'webtv':is('win')?'win'+(is('windows nt 6.0')?' vista':''):is('freebsd')?'freebsd':(is('x11')||is('linux'))?'linux':'','js']; c = b.join(' '); h.className += ' '+c; return c;}; css_browser_selector(navigator.userAgent);
    </script>-->
    <style>
    option {
        overflow: auto;
    }
    </style>
    '''))

was able to set overflow to auto on the option elements. these are the elements inside the select widget. With ipywidgets library there is no way to set the style on the items, only on the container.

[jasongrout]

Looking into it a bit, I can't get firefox to put a horizontal scrollbar on an HTML select element with various overflow settings, like chrome has. Searching for horizontal scrollbar select firefox indicates this has been a problem with firefox for a long time. I do see that putting an overflow on a single option does introduce a scrollbar for that specific option.

One workaround people suggest is putting the select into a container and making the container scrollable.