Marco Spera
Posts: 0
Joined: Tue Jun 17, 2014 7:14 pm

Change List Button Size

Hi,

I would like to be able to change the size of my list component.

I do not want to change the text size, but the size of each individual "button" in the list. So example, instead of fitting 15 list items on my page without scrolling, I would like to fit 25 (all the same font size) and then scroll if I need anymore than that.

Hopefully this makes sense.

I am assuming I would have to use CSS? But not sure the exact coding to put in to do so.

Thanks

Evgene Karachevtsev
Posts: 12
Joined: Mon Apr 28, 2014 1:12 pm

Change List Button Size

Hello Marco,

For example like this:

code[name=mobilelistName] a{
height:10px;
}/code

where mobilelistName is the name of the list

Marco Spera
Posts: 0
Joined: Tue Jun 17, 2014 7:14 pm

Change List Button Size

Thanks Evgene.

Would I use this code as a CSS asset?

Do I need to enter a class name on the component as well?

Evgene Karachevtsev
Posts: 12
Joined: Mon Apr 28, 2014 1:12 pm

Change List Button Size

Marco,

You may add class too. As you will be more comfortable

Marco Spera
Posts: 0
Joined: Tue Jun 17, 2014 7:14 pm

Change List Button Size

I am a little confused.

I am new to working with CSS class and assets.

Can you explain what my two options are? Is the above code you gave me a CSS code or JS code?

Sorry for my confusion....

Marco Spera
Posts: 0
Joined: Tue Jun 17, 2014 7:14 pm

Change List Button Size

I was looking for a way to do it with Javascript as I am more comfortable with that.

I am assuming this would be ok?

Apperyio("message").attr('style', 'height: 10px !important');

Alena Prykhodko
Posts: 0
Joined: Tue Apr 09, 2013 7:36 am

Change List Button Size

Hi Marco,

Yes, that was CSS code, that you need to add to CSS asset, please read more here http://devcenter.appery.io/documentat....

Try this code:

preApperyio("mobilelistitem").css("height","10px");/pre

Where mobilelistitem - mobilelistitem name

Marco Spera
Posts: 0
Joined: Tue Jun 17, 2014 7:14 pm

Change List Button Size

That works great. Thanks Alena!!

I was able to change the text size and line height, following a similar process.

one more question. I have moved the text height up, but the top of my letters are being cut off, even though they do not reach the top of the list item. (almost as if there is some padding around the list item that cuts off the text.

I have added an image. Image

Alena Prykhodko
Posts: 0
Joined: Tue Apr 09, 2013 7:36 am

Change List Button Size

Marco,

Please post your code.

Marco Spera
Posts: 0
Joined: Tue Jun 17, 2014 7:14 pm

Change List Button Size

I mapped a database service to a list component and then invoked the following js code:

Appery("Spot2").css("height","12px");
Appery("Spot2").css("line-height", "6px");

Return to “Issues”