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

Ask for Help
1

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

2

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
3

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 ?

4

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
5

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

6

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

7

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
8

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 ?

9

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
10

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!

11

Didn’t we have that already mark?

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

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

1 Like
13

To be wider, try increasing the %.

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

2 Likes
14

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.

15

Hello, I’m trying to make these changes to my App that will only be used on Web pages and not any mobile device. Where does this code need to go in order to work on the entire App?

16

Hope this can help, basically an Experimental Code column to retrieve the user’s device type (please beware that this might not always be reliable), and then use conditional visibility to show/hide elements accordingly.