[Simple Reports With PDF] Can I change size of icons in a web block when using it?

Forge Component
(14)
Published on 2017-01-05 by Huarlem Lima
14 votes
Published on 2017-01-05 by Huarlem Lima

I have created a web block for 5 star rating display. It has an input parameter for rating value. I want to use it in multiple places in my app with different sizes of stars, as shown below. Right now, I have created a different web block for each size. 

How can I create another input parameter that lets me control the size of the stars when I use the web block? I have tried an input parameter to pass a value to Icon Size property, but that didn't work?

Rajan Kumar wrote:

I have created a web block for 5 star rating display. It has an input parameter for rating value. I want to use it in multiple places in my app with different sizes of stars, as shown below. Right now, I have created a different web block for each size. 

How can I create another input parameter that lets me control the size of the stars when I use the web block? I have tried an input parameter to pass a value to Icon Size property, but that didn't work?

 Hi Rajan Kumar,

You can wrap the start webblock in container  on the different screens with different css class name for displaying the font size and define that in css with different font sizes .or use the outsytem default classes.


Example:

font-size-xl= for large size,

font-size-m=font size medium,

 font-size-s=font-size small

font-size-xl=font size extra small.

or

You can write a css on custom class like

.custom-fontsize-small .fa{font-size:10px}

.custom-fontsize-medium .fa{font-size:12px}

.custom-fontsize-large .fa{font-size:14px}

this you need to define in your css.


Please try this and let me know if works.

Thanks

AD





Solution

Hi Rajan,

if you set a style on the icon itself, with the input parameter as font size, that works.

See attached oml

Dorine


Solution

Dorine Boudry wrote:

Hi Rajan,

if you set a style on the icon itself, with the input parameter as font size, that works.

See attached oml

Dorine


 Thanks, Dorine. That's exactly the solution I was looking for. Works beautifully. Thanks. 

AD wrote:

Rajan Kumar wrote:

I have created a web block for 5 star rating display. It has an input parameter for rating value. I want to use it in multiple places in my app with different sizes of stars, as shown below. Right now, I have created a different web block for each size. 

How can I create another input parameter that lets me control the size of the stars when I use the web block? I have tried an input parameter to pass a value to Icon Size property, but that didn't work?

 Hi Rajan Kumar,

You can wrap the start webblock in container  on the different screens with different css class name for displaying the font size and define that in css with different font sizes .or use the outsytem default classes.


Example:

font-size-xl= for large size,

font-size-m=font size medium,

 font-size-s=font-size small

font-size-xl=font size extra small.

or

You can write a css on custom class like

.custom-fontsize-small .fa{font-size:10px}

.custom-fontsize-medium .fa{font-size:12px}

.custom-fontsize-large .fa{font-size:14px}

this you need to define in your css.


Please try this and let me know if works.

Thanks

AD





AD: I didn't try your approach. It is interesting and I hope to use it to solve other problems in the future. 

Thanks.