[CSS Tricks] Enlarge WebView Component on tablet/desktop mode

Hello CSS Gliders!!

I used the tablet / desktop mode for one of my project but i want to use some CSS code to use the whole width of the screen and not only the center panel. I found to it for some components used in my screen (text, button) but i’ve missing the CSS trick for a webview component.

Do you have any idea to enlarge the webview component to the full width of the screen ?

Thanks for help

I think this works - @PabloMFalero worked this out for me:

<pre><span><style>
div[id*='screenScrollView'] > div { 
max-width: 97%;
}

It is not quite perfect, with a little space on the right hand side in tablet mode, but it is fairly decent to use

1 Like

Thanks @Mark_Turrell
I’ve just tried it but it doesn’t work :frowning:
Is there a way to enlarge the central panel (and so all the components used) on the full width of the screen in the tablet mode ?

Hello,

I’ve just found the solution to enlarge the central planel to the full width of the screen :

.cUzhcc {
   max-width: 97%;
}

Thanks @Mark_Turrell for your help

1 Like

check if this CSS will work on iOS and other systems… unless is for personal use.

Thanks @Uzo i will
My client has planned to use the app only from desktop. I will check it out anyway on an iPad

This is an unstable class name and will break pretty frequently. If you go ahead with this make sure you check your app everyday to see if it still works. Otherwise please try finding a more stable class name.

1 Like

Thanks @ThinhDinh for your expertise.
I’ve just tried another way that works too :

div[class*='sc-dkmKpi cUzhcc focused'] {
   max-width: 97%;
}

Do you think that this class name is more stable ?

That sc-dkmKpi cUzhcc part is still unstable I believe. I think class*= focused might target some other components on the screen so try moving up or down the code to find a more stable one.

1 Like

Did anyone figure out a stable class for the webview component? I’d like to use more of the screen with the webview, and maybe explore having a zoom too. Thanks!

Didn’t we have that already mark?

<pre><span><style>
div[id*='screenScrollView'] > div { 
max-width: 97%;
}
1 Like

we do… to make it wider. I was trying to make it take the vertical part of the screen too :slight_smile:

1 Like

To be wider, try increasing the %.

For vertical part, try adding max-height: 100%;

2 Likes

Even if it’s not the full width, can the left and right margins be accessed to center the webview?
Such as adding margin-left: auto & margin-right:auto to that same CSS bit, or something like this? (My CSS skills are very basic.)

I’d like this on the phone view where I’m trying to bring in charts from a Google Sheet, but the charts are always left-aligned.