Width in percentage does not scale properly

[Jaco de Vries]

Hi,

We are using the Linear Gauge element on conjunction with the Bootstrap templating system (using classes like container, row and col-*).

We currently have a row with several columns but it seems that the LinearGauge does not scale properly when we use a percentage as width.

<div class="row">

  <div class="col">

     Column one data

  </div>

  <div class="col">

     Column two data

  </div>

 <div class="col">

     Column three data

  </div>

  <div class="col-5">

     <SfLinearGauge Orientation="Orientation.Horizontal" Width="100%" Height="50px">

            <LinearGaugeAxes>

                <LinearGaugeAxis ShowLastLabel="false" Minimum="ViewModel.MinimumScore" Maximum="ViewModel.MaximumScore" IsInversed="false" OpposedPosition="false">

                    <LinearGaugeTooltipSettings Enable="true" ShowAtMousePosition="true" />

                    <LinearGaugeMajorTicks Interval="1" Height="0" />

                    <LinearGaugeMinorTicks Height="0" />

                    <LinearGaugeAxisLabelStyle>

                        <LinearGaugeAxisLabelFont Size="0" />

                    </LinearGaugeAxisLabelStyle>

                    <LinearGaugePointers>

                        <LinearGaugePointer Value="this.Score" Height="15" Width="15" Placement="Placement.Near" MarkerType="MarkerType.Triangle" Type="Point.Marker" Color="#757575" />

                    </LinearGaugePointers>

                    <LinearGaugeRanges>

                        <LinearGaugeRange Start="0" End="1" Color="#C00000" />

                        <LinearGaugeRange Start="1" End="2" Color="#F83C36" />

                        <LinearGaugeRange Start="2" End="3" Color="#FFC000" />

                        <LinearGaugeRange Start="3" End="4" Color="#92D050" />

                        <LinearGaugeRange Start="4" End="5" Color="#00B050" />

                    </LinearGaugeRanges>

                </LinearGaugeAxis>

            </LinearGaugeAxes>

        </SfLinearGauge>

  </div>

</div>

As shown, we indicate that the gauge should be 100% of its parent, which is sized b the "col-5" property. This is a CSS property that (I assume) sizes the column based on a percentage as well.

In normal situation, everything is well (I use a screen with fairly large resolution). However, one of my co-workers has a smaller screen and the component falls outside of the last (col-5) container which causes a part of it not to be visible. This also happens when we resize the browser to something smaller.

I would expect the gauge to resize accordingly but it seems that it does not resize at all. 

Are we doing something wrong?

I have tried surrounding it with other div's as well but that doesn't solve my problem. Also I cannot give it a specific size (like 300px) because we do not know the size of the end users' screen.

Thanks.

[Swetha Babu]

Hi Jaco, 

  

Thank you for contacting Syncfusion support 

  

We are able to reproduce the reported issue in the Linear gauge component. However, we can achieve your requirement using a workaround. We can call the Refresh() method of the component in the Resizing event of the linear gauge. But we are facing a script error in this approach. We will check this issue and the approach within the component. We will update you with further details on December 16, 2020. 

  

Please let us know if you need any further assistance. 

  

Regards, 

Swetha Babu 

[Sabari Anand Senthamarai Kannan]

Hi Jaco, 

 

Thank you for your patience.

We can achieve your requirement using the workaround. We can refresh the gauge in the "Resizing" event in the linear gauge. We are facing some script error thrown in the linear gauge. We will include the fix for the script error thrown in our next weekly patch release which is expected to be rolled out at the end of December 2020. We have created a simple application to demonstrate the same and it can be downloaded from the below link.

https://www.syncfusion.com/downloads/support/forum/160555/ze/Lineargauge_(2)1425486544

In the above sample, we have refreshed the linear gauge in the resize event to achieve your requirement. Please let us know if the above sample meets your requirement.

Please find the below feedback link to keep track of the reported issue

https://www.syncfusion.com/feedback/20588

 

Please let us know if you need any further assistance.

Regards,
Swetha Babu

[Swetha Babu]

Hi Jaco,

Sorry for the inconvenience caused.

We have not included the fix for the reported issue of "width in percentage does not scale properly" in our weekly patch release due to some technical issues. However, we will include the fix in our upcoming Volume 4 SP1 release which is expected to be rolled out at the end of January 2021.

Regards,
Swetha Babu

[Swetha Babu]

Hi Jaco,

Thank you for your patience.

We have included the fix for the reported issue of "Width in percentage does not scale properly" in our Essential Studio 2020 Volume 4 service pack(v18.4.0.39) and is available for download under the following link.

https://www.syncfusion.com/forums/161973/essential-studio-2020-volume-4-service-pack-release-v18-4-0-39-is-available-for-download

 

Now, the Linear gauge component will resize when the width of the component is set as 100% in Width property and the browser is resized. 

We thank you for your support and appreciate your patience in waiting for this release. Please get back to us if you need further assistance.

Regards,
Swetha Babu