30
Views
4
Comments
Solved
[Simple Reports With PDF] Can I change size of icons in a web block when using it?
Question
Forge component by Huarlem Lima
15
Published on 05 Jan 2017

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?

Rank: #136
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


DemoIconSize.oml

Rank: #329

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





Rank: #136
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


DemoIconSize.oml