How to enlargen View (buttons, etc.) on tablet screens


#1

I designed a view with several “small” buttons. however, would like to see regular sized buttons when viewing the web app on a tablet screen. Is there an automatic resize (responsive-like) feature that I’m not using? Thx.


#2

Hi Leedabord,

You can use the class- “button-large” and “button-small”.

 <a class="button icon-right ion-chevron-left button-large button-light button-clear"></a>

Let me know if you need additional information.

Thanks and Regards,
Aditya


#3

First determine what device are you using in your app.run with the help of jquery than initialize the variable and apply conditional css or sass according to your choice


#4

Thanks. I would like to know if the ionic framework can already automatically detect the size of screen and enlarge or shrink buttons to match the screen. So, I designed a screen with many small buttons for my phone but when using the web app on a tablet, I had a lot of space and regular sized buttons would be more user-friendly. So, looking for something wherein I can specify button-small and button-large in the class and have the framework automatically pick based on screen size.


#5

Thanks. I would like to know if the ionic framework can already automatically detect the size of screen and enlarge or shrink buttons to match the screen. So, I designed a screen with many small buttons for my phone but when using the web app on a tablet, I had a lot of space and regular sized buttons would be more user-friendly. So, looking for something wherein I can specify button-small and button-large in the class and have the framework automatically pick based on screen size.


#6

Since I’m building an app for personal use, I don’t mind waiting for a “framework” solution. In the meanwhile, I’ve assumed that I will use the app on a tablet and am using regular-sized buttons instead of button-small. Thanks.


#7

in app.run
$rootscope.isWebView = ionic.Platform.isWebView();

in your controller
access the variable to your scope
$scope.isWebView = $rootscope.isWebView

in your html tag for ex-
<ion-button class="{{ isWebView ? button-large : button-small }}">
writhe the conditional tag

or you can apply css according to screen size
media-screen


#8

Thanks. That looks pretty slick. I’ll try it out.