The font-size does not scale for checkbox, selectMenu, NavBar

Mon Sep 08, 2014 2:34 am

Hello,

On my login page, I used the following js on page load event:
code
var height100 = jQuery("body").height();
if(height100 < 350)
{
Apperyio("mobilelabel_4").css("font-size", "8px");
Apperyio("mobiletextinput_5").css("font-size", "8px");
Apperyio("mobiletextinput_7").css("font-size", "8px");
Apperyio("mobilelabel_6").css("font-size", "8px");
Apperyio("mobilelabel_8").css("font-size", "8px");
Apperyio("sm1_1_Language").css("font-size", "8px");
Apperyio("mobilecheckbox_12").css("font-size", "8px");
Apperyio("mobilebutton_15").css("font-size", "8px");
Apperyio("mobilebutton_16").css("font-size", "8px");
}
else if (height100 > 350 && height100 < 750)
{
Apperyio("mobilelabel_4").css("font-size", "14px");
Apperyio("mobiletextinput_5").css("font-size", "14px");
Apperyio("mobiletextinput_7").css("font-size", "14px");
Apperyio("mobilelabel_6").css("font-size", "14px");
Apperyio("mobilelabel_8").css("font-size", "14px");
Apperyio("sm1_1_Language").css("font-size", "14px");
Apperyio("mobilecheckbox_12").css("font-size", "14px");
Apperyio("mobilebutton_15").css("font-size", "14px");
Apperyio("mobilebutton_16").css("font-size", "14px");
}
else
{
Apperyio("mobilelabel_4").css("font-size", "18px");
Apperyio("mobiletextinput_5").css("font-size", "18px");
Apperyio("mobiletextinput_7").css("font-size", "18px");
Apperyio("mobilelabel_6").css("font-size", "18px");
Apperyio("mobilelabel_8").css("font-size", "18px");
Apperyio("sm1_1_Language").css("font-size", "18px");
Apperyio("mobilecheckbox_12").css("font-size", "18px");
Apperyio("mobilebutton_15").css("font-size", "18px");
Apperyio("mobilebutton_16").css("font-size", "18px");
}
/code

Which bascially changes the size of font based on the screen height. All items font size has scalled very well except three as follow:

1) Checkbox: mobilecheckbox_12 (login page)
2) selectMenu: sm1_1_Language (login page)
3) NavBar: Apperyio("MasterNavBar_80").css("font-size", "10x"); (home page)

Do these items need different method to handle the font size? how?

In order to reproduce the problem:
Public link:
http://appery.io/app/mobile-frame?src...

The first two items in the first page/login page (pg100_loginPage)
The NavBar in pg200_homePage
login cerdentials: haytham/star1234

Snapshots:
login page:

home page:

Mon Sep 08, 2014 4:16 am

Hi Hawk,

Here is right code for these elements:

pre

//For cheeckbox component with "mobilecheckbox_7" name.
Apperyio("mobilecheckbox_7").closest('[data-role="fieldcontain"]').find("label").css("font-size", "34px");

//For select component with "mobileselectmenu_10" name.
Apperyio("mobileselectmenu_10").closest('[data-role="fieldcontain"]').find("span").css("font-size", "34px");

//For navbar component with "mobilenavbar_12" name.
Apperyio("mobilenavbar_12").find(".ui-btn").css("font-size", "34px");

/pre

Regards.

Mon Sep 08, 2014 5:42 am

Thank you. It works. But there is few issues
1) The checkBox, how to change the tick box size along with the font size. It seems the text goes behind this tick box when it is small. I tried this but it does not work:

code
Apperyio("ui-checkbox").css("width", "20px");
Apperyio("ui-checkbox").css("height", "20px");
/code

2) The other thing is how to change the font of the pop-up list that appears from selectMenu

3) NavBar, the text goes hind the icons when it's small

Mon Sep 08, 2014 9:56 pm

Hi Hawk,

Cant understand your question.

That's what i have after change font-size.. http://prntscr.com/4l09yk/direct

So you need to provide us more information about how to reproduce the problem(may be you can give us public link where we can see it).

Regards.

Tue Sep 09, 2014 1:20 am

Hi Yurri,

In order to reproduce the problem:
Public link:
http://appery.io/app/mobile-frame?src...

In testing, you'll have to change the screen dimensions to the samllest size and press refresh, you'll find items size is smaller but there is problems with the following items:

The first two items (checkBox) in the first page/login page (pg100_loginPage)
The NavBar in pg200_homePage
login cerdentials: haytham/star1234

Basically, after I followed your advice I faced three issues as follows:

1) The checkBox in first page/login page, does not scale along with the text size. First snapshot shows that with smaller font size the tickBox has the same size. The text should be "Remember me", but part of it is hidden behind the tick box and only shows "emember Me" with "R". So how to scale the tick box size based on the body height? I treid the following but it did not work.change the tick box size along with the font size. It seems the text goes behind this tic

Apperyio("ui-checkbox").css("width", "20px");
Apperyio("ui-checkbox").css("height", "20px");

-----------------------------------------------------------

2) The other thing is how to change the font of the pop-up list that appears from selectMenu, the following snapshots show that the select menu button has small size but when I click on it to show the select list, the items still have the original big size

-----------------------------------------------------------------------------

3) NavBar, (which is in the next page). The text goes behind the icons when it's small. Here I do not want to make the icon smaller. I just want to maintain the text position to be below the icons and not behind them:

When it's big font size:

When it's small font size;

These three issues I'm facing all about the same question, how to resize these componenets properly (checkBox, selectMenu, NavBar).

Many thanks in advance for your help

Tue Sep 09, 2014 3:56 am

Hi Hawk,

Please use following style to set some left margin for text in checkbox.

pre

padding-left: 28px;

/pre

Regards.

Tue Sep 09, 2014 5:12 am

Hi Yurri, that worked in terms of showing the text for both checkBox and NavBar, but still cannot find a way to resize the tickBox using JS script. I tried this on load page event:

Apperyio("ui-checkbox").css("width", "20px");
Apperyio("ui-checkbox").css("height", "20px");

I am using JS as I need to resize the tickbox based on the body height (screen dimension).

2) SelectMenu items font-size does not scale with rest of items. I used this to resize the font of the selectMenu Button:

code
if(height100 < 350)
{
Apperyio("sm1_1_Language").css("font-size", "8px");
}
else if (height100 > 350 && height100 < 750)
{
Apperyio("sm1_1_Language").css("font-size", "14px");
}
else
{
Apperyio("sm1_1_Language").css("font-size", "20px");
};
/code

But that did not change the font-size of the list pops up when I open selectMenu

Wed Sep 10, 2014 12:04 am

Hi Hawk,

At first i need to say(at this time) you have increase your requirements to fit styles in accordance to page dimensions. In this time i can suggest you to see other(more preferable) way to do it. Please take a look here how it works: https://developer.mozilla.org/en-US/d...

To set checkbox background image you need:
1.1 Create JS asset and populate it with following code: http://prntscr.com/4lck88/direct

pre

//This function will be used to add some css rule to the page.
function addCSSRule(sheet, selector, rules, index) {
if("insertRule" in sheet) {
sheet.insertRule(selector + "{" + rules + "}", index);
}
else if("addRule" in sheet) {
sheet.addRule(selector, rules, index);
}
}

/pre

1.2 Use following code to set background image for checkbox:

pre

//Here you can set width and heigh styles you need.
addCSSRule(document.styleSheets[0], 'html body .ui-checkbox .ui-btn:after', "height: 10px; width: 10px; background-size: cover;");

/pre
To set font-size for select menu list you can use following code:

pre

addCSSRule(document.styleSheets[0], 'html body .ui-selectmenu-list .ui-btn', "font-size: 40px;");

/pre

Note: when you use "addCSSRule" function - you add CSS rule - it means you add it one time and all items(specified in rule) will have this style after. So you don't need to use this code for all component on the page.

Regards.

Tue Jul 14, 2015 5:34 pm

Thank you Yurii for this code. It helped me in regard to my items in my select menu list being too big to show on one line. Note to anyone wanting to use this: make sure you add the function he also posts in order to get the code to work. And check your console for errors (F12 in test mode). It would have save me lots of time....