1. Home
  2. Forum
  3. Xamarin.Forms
  4. Get rid of the extra space around the linear gauge

Get rid of the extra space around the linear gauge

I'm trying to use the Blazor linear gauge component and it does everything I want except it seems to always have extra whitespace on the sides.  It look like it has about 15% padding on the left and right.  I can mostly control the top and bottom white space by setting the height but I've tried a bunch of different things can can't rid of the space on the sides of the control. As an example, just look at this SF demo:

https://blazor.syncfusion.com/demos/linear-gauge/styles

It has a lot of whitespace on the left and right sides.  Is there any way to get rid of that?  On small devices it is a big problem to waste all that space.  Thanks!

7 Replies 1 reply marked as answer
SB Swetha Babu Syncfusion Team September 24, 2020 03:34 AM UTC

Hi Brent,

Thank you for contacting Syncfusion support.

We are able to reproduce the reported scenario. We will check this scenario and update you with further details on September 25, 2020.

Regards,
Swetha Babu

SA Sabari Anand Senthamarai Kannan Syncfusion Team September 27, 2020 04:56 PM UTC

Hi Brent,

Thank you for your patience.

We have analyzed the reported issue. We have considered this as a bug and logged a defect report for the same. We will include this implementation in our weekly NuGet release which is expected to be available by the mid of October, 2020.

Regards,
Sabari Anand

SB Swetha Babu Syncfusion Team October 19, 2020 12:09 PM UTC

Hi Brent,

Thank you for your patience. 
We have exposed the property named "AllowMargin" in the Linear gauge component which decides whether the space to be rendered in the gauge or not. If "AllowMargin" property is enabled, space will be rendered. If it is disabled, the gauge gets rendered to the complete width. You need to set the "AllowMargin" property as false to achieve your requirement. We have included the fix for this implementation in our weekly NuGet release(v18.3.0.40) which is rolled out and is available for download under the following link.

https://www.nuget.org/packages/Syncfusion.Blazor/  

Please find the below code snippet for your reference. 
<SfLinearGauge AllowMargin="false"  Orientation="Orientation.Horizontal"> 
    <LinearGaugeAxes> 
        <LinearGaugeAxis Maximum="100" Minimum="0"></LinearGaugeAxis> 
    </LinearGaugeAxes> 
</SfLinearGauge> 

Please let us know if you need any further assistance.

Regards,
Swetha Babu 


Marked as answer
AC Ahmed Chouihi October 22, 2021 09:32 AM UTC

Hello

Thanks for your answer , Is it possible to add allowmargin depending on device type, I want the property to work only for desktop devices (I  am using ANgular 9)

Thanks in advance 


IR Indumathi Ravi Syncfusion Team October 25, 2021 07:41 PM UTC

Hi Ahmed, 
  
Thank you for the update. 
  
We can achieve your requirement using “isDevice” property in the “Browser” module of “ej2-base” library. “isDevice” property will be “true” when the application is launched in the mobile devices and it will be “false” when the application is launched in desktop devices. Based on this property, the “allowMargin” property of the Linear Gauge component can be changed. Please find the code snippet for the same. 
  
Code snippet: 
[app.component.html]
<ejs-lineargauge [allowMargin]="allowMargin">
 </ejs-lineargauge>

[app.component.ts]
ngOnInit() { 
    this.allowMargin = Browser.isDevice ? true : false; 
  } 
  
In the above code, the margin is provided to the Linear Gauge in the mobile devices. The margin will not be available in the desktop devices. 
  
We have created a sample to demonstrate the same and it can be found from the below link. 
 
Please let us know if the above sample meets your requirement and let us know if you need any further assistance. 
  
Regards, 
Indumathi R 


EM Emmanuel February 6, 2022 02:49 PM UTC

Hello please is  possible to enable this property for xamarin also?? I cant find it in xamarin leaner gauge control.


VR Vignesh Ramesh Syncfusion Team February 7, 2022 08:10 AM UTC

Hi Emmanuel, 

We can achieve this requirement by setting the ScaleOffset property of LinearScale as zero. Please find the snippet below. 

XAML: 
<gauge:SfLinearGauge> 
    <gauge:SfLinearGauge.Scales> 
        <gauge:LinearScale ScaleOffset="0"/> 
    </gauge:SfLinearGauge.Scales> 
</gauge:SfLinearGauge> 

Also, we have prepared the sample for the same. Please get it from the below link. 

Please refer to the below user guide documentation for more information about scale offset. 

Regards, 
Vignesh Ramesh. 


Loader.
Up arrow icon