shiny layout in a mess for Chrome browser but works well in Microsoft Edge

[Linhkust]

Hello,

I am developing an App using Python Shiny. It works fine for me until I update the shiny package (using the official command in the Doc). The layout is changed in Chrome, but when I open the web link in Edge, it looks as usual. Could it be due to the error:

[wch]

Can you provide a minimal reproducible example app which displays this problem?

[jpzlee]

For some reason I experience the same problem, just flipped. The layout does not display properly in Microsoft Edge, but works fine in Google Chrome for me.

[Linhkust]

Can you provide a minimal reproducible example app which displays this problem?

from shiny import App, ui, reactive, Inputs, Outputs, Session, render
from shinywidgets import output_widget

# Data collection
app_ui = ui.page_navbar(
    ui.nav_panel("Data Collection",
                 ui.page_sidebar(
                     ui.sidebar(
                         ui.input_file('boundary', 'Upload Cartographic Data', accept=['.geojson'],
                                       placeholder='No file selected'),

                         # osm data link
                         ui.output_ui("osm_link"),
                         ui.input_action_button('osm_download', 'Download OSM Feature Data', class_="btn-success"),
                         width=400, open='always',
                     ),

                     ui.layout_columns(

                         # map
                         ui.card(
                             ui.input_switch("type_switch", "OSM Feature Layer", False),
                             output_widget('osm_display'),
                             ui.card_footer(ui.input_action_link('boundary_link', 'OSM Boundary Website')),
                             height='1000px',
                         ), ),

                     ui.layout_columns(
                         # data preview
                         ui.card(
                             ui.output_data_frame("spatial_preview")
                         ),
                     ),
                 ),
    )
    )

def server(input, output, session):


app = App(app_ui, server)
app.run()

I pick the codes of one function module and I test again: works well in Edge but not okay for Chrome.

[Linhkust]

For some reason I experience the same problem, just flipped. The layout does not display properly in Microsoft Edge, but works fine in Google Chrome for me.

I updated the Shiny package using the command yesterday:

pip install --upgrade shiny htmltools

and it turns out to be like this :(
Be careful when you update some Python package

[jpzlee]

For some reason I experience the same problem, just flipped. The layout does not display properly in Microsoft Edge, but works fine in Google Chrome for me.

I updated the Shiny package using the command yesterday:

pip install --upgrade shiny htmltools

and it turns out to be like this :( Be careful when you update some Python package

yup that's how i updated it too. something is wrong with the sidebar display

[gadenbuie]

The layout does not display properly in Microsoft Edge, but works fine in Google Chrome for me.

@jpzlee Do you also have similar messages in the developer console?

@Linhkust @jpzlee Can you please report which versions of Chrome and Edge you are using? I believe this will be critical information.

[gadenbuie]

I updated the Shiny package using the command yesterday:

@Linhkust Does the issue go away if you go back to the version you were using before? (The last release was 0.10.1.)

[Linhkust]

The layout does not display properly in Microsoft Edge, but works fine in Google Chrome for me.

@jpzlee Do you also have similar messages in the developer console?

@Linhkust @jpzlee Can you please report which versions of Chrome and Edge you are using? I believe this will be critical information.

The version of my Chrome is 126.0.6478.183
The version of my Edge is 126.0.2592.113
All the versions are the latest ones.

[Linhkust]

I updated the Shiny package using the command yesterday:

@Linhkust Does the issue go away if you go back to the version you were using before? (The last release was 0.10.1.)

When I install the last version of shiny, it works fine in Chrome. However, another issue occur:

TypeError: update_action_button() got an unexpected keyword argument 'disabled'
Unhandled error: update_action_button() got an unexpected keyword argument 'disabled'

The error is the reason why I want to update the package. The Documentation for ui.update_action_button() has the parameter disabled , which I am pretty sure. After updating package, there is no more the error, but the layout showing in Chrome was changed.

[jpzlee]

The layout does not display properly in Microsoft Edge, but works fine in Google Chrome for me.

@jpzlee Do you also have similar messages in the developer console?
@Linhkust @jpzlee Can you please report which versions of Chrome and Edge you are using? I believe this will be critical information.

The version of my Chrome is 126.0.6478.183 The version of my Edge is 126.0.2592.113 All the versions are the latest ones.

It works fine for me in both Chrome and Edge now but my versions are
Edge: 126.0.2592.113
Chrome: 126.0.6478.182

[wch]

@Linhkust your app doesn't work for me because the server function is empty. But I just added pass to the function body and it at least will start (although the maps don't show up).

I don't see any of those error messages in my Chrome console. Is it possible you have a Chrome installation that is managed by some third party software that could be imposing other security settings? Or that you have an extension installed that does that?

I suggest trying to load it in incognito mode in Chrome, and also try loading it it on a different computer with Chrome installed to see if it has the same behavior.

[Linhkust]

incognito mode

It works fine in incognito mode! So do i need to reinstall Chrome? I installed Chrome from official website.

[Linhkust]

It shows these errors when openning in normal mode of Chrome.

[jcheng5]

@Linhkust I noticed that your app UI includes nested calls to ui.page_xxx functions. Page functions are only ever intended to be at the top-level. Try replacing the inner call (ui.page_sidebar) with ui.layout_sidebar.

[Linhkust]

@Linhkust I noticed that your app UI includes nested calls to ui.page_xxx functions. Page functions are only ever intended to be at the top-level. Try replacing the inner call (ui.page_sidebar) with ui.layout_sidebar.

I replace ui.page_sidebar with ui.layout_sidebar as you suggested, but the layout in Chrome does not change.

[wch]

If you see the problem in normal mode but not incognito mode, then I think it is might be due to a Chrome extension. I suggest disabling all your extensions and see if that works. If it does work, then then add the extensions back one by one until you find the one that causes the problem.

[Linhkust]

If you see the problem in normal mode but not incognito mode, then I think it is might be due to a Chrome extension. I suggest disabling all your extensions and see if that works. If it does work, then then add the extensions back one by one until you find the one that causes the problem.

It finally works after I delete all the historical data, cookies, and cache data in Chrome. And thanks for your time and help!

[wch]

Glad to hear that it's working now!