Button CSS settings Javascript

[Andy Parker]

Hi,

I want to make changes to the button text size and position using javascript.

I asked the question yesterday but confused people in the way I asked.

Here's how my button currently looks:

As you can see, the text is at the top of the button, I would like to move the text down so its central, the image below shows how I need to have the button text aligned.

Also, can you tell me how to change the text size of the button using javascript please?

I have the following code that does not work:
Appery('btn_shop1').css('font-style','normal');
Appery('btn_shop1').css('font-size','12px');

[Kateryna Grynko]

Hi Andy,

Please show us a button source (HTML layout or its screenshot). Is your button a solid gray field or is your image inside the button also? How did you do this?

[Andy Parker]

Ah, ok, it's a simple button, dragged onto the UI. The image next to it is simply a separate image.

Both button and image are in a grid.

As you can see, there are 10 of them, but I only show whats needed.

[Kateryna Grynko]

Andy,

Add this CSS code for a button:predisplay: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center;
display:box;
box-pack:center;
box-align:center;
height: 100%;
}/pre

[Andy Parker]

Thanks Katya, if I was to add this using javascript, can you confirm I have it correct below if the button name is shop1 please?

Code: Select all

 Appery('btn_shop1').css('display','-webkit-box'); 
 Appery('btn_shop1').css('-webkit-box-pack','center'); 
 Appery('btn_shop1').css('-webkit-box-align','center'); 
 Appery('btn_shop1').css('display','box'); 
 Appery('btn_shop1').css('box-pack','center'); 
 Appery('btn_shop1').css('box-align','center'); 
 Appery('btn_shop1').css('font-style','normal');  
 Appery('btn_shop1').css('height','100%'); 

As the center is like below rather than half way down the button

Also, what do I use (in javascript) to change the font size for the button text?

[Kateryna Grynko]

Andy,

Yes, this is correct. It's better to add all styles in CSS class. Then to change them dynamically you can use JS to add or remove an only class instead of several lines.

Here is an example of changing font size:preAppery('btn_shop1').css('font-size', '14px');/pre

[Andy Parker]

Thanks Katya,

it doesn't seem to work for buttons though?

This is my code.....
Appery('btn_shop1').css('font-size','12px');
Appery('btn_shop2').css('font-size','12px');
Appery('btn_shop3').css('font-size','12px');

[Igor]

Hello,

This code should work:
pre
$("a[dsid='btn_shop1'] .ui-btn-text").css('font-size','12px');
/pre
Also you can use CSS, see link below.
pre
.buttonstyle .ui-btn-text {
font-size: 12px;
}
/pre
"buttonstyle" - button class name.
http://docs.appery.io/documentation/w...

[bahar.wadia]

This is very helpful for Adding css. How would one Remove css using javascript.

Thanks

[Igor]

Hello,

This should help http://www.w3schools.com/jquery/html_...