Wrapping Range navigator component with a div the range does not stretch anymore

[Mihai Calugar]

Hello. I was using the range navigator and trying to get a design in which on the left i have some dropdown filters and on the right de range navigator. For that I was trying to have a left and right container and whenever I wrap the range navigator with a div I can't get get it to stretch anymore. The code I have : 

<code>

<div class="right-container"> 

    <EjsRangeNavigator Value="@Value"

                       ValueType="Syncfusion.EJ2.Blazor.Charts.RangeValueType.DateTime"

                       EnableDeferredUpdate="true"

                       Height="75"

                       LabelPosition="AxisPosition.Inside">

        <RangeNavigatorRangeTooltipSettings Enable="true"></RangeNavigatorRangeTooltipSettings>

            

        <RangeNavigatorEvents Changed="SliderChanged" />

        <RangeNavigatorStyleSettings UnselectedRegionColor="rgba(0, 159, 143, 0.5)"

                                     SelectedRegionColor="rgba(0, 159, 143, 0.6)">

            <RangeNavigatorThumbSettings Type="ThumbType.Circle">

                <RangeNavigatorThumbBorder Width="2" Color="orangered"></RangeNavigatorThumbBorder>

            </RangeNavigatorThumbSettings>

            <RangeNavigatorCommonBorder Color="orangered" Width="2"></RangeNavigatorCommonBorder>

        </RangeNavigatorStyleSettings>

        <RangeNavigatorSeriesCollection>

            <RangeNavigatorSeries DataSource="@StockDetails"

                                  XName="Date"

                                  YName="Close"

                                  Type="RangeNavigatorType.StepLine" />

        </RangeNavigatorSeriesCollection>

    </EjsRangeNavigator>

</div>

</code>

And the styling for right container looks like this: 

<code>

    .right-container {

        display:flex;

        flex:1;

        margin-left:280px;

        align-items:flex-end;

    }

</code>

 

If i remove this the range navigator stretches. Even if it is a simple div with no class attached it still modifies the width and the range navigator does not stretch. Attached you can also find a zip with an image with the design intended ( i want to stretch the range navigator for the whole right part ) 

Any help is much appreciated. 

Thanks, Mihai

Attachment: Syncfusion_52e91844.rar

[Srihari Muthukaruppan]

Hi Mihai, 

Greetings from Syncfusion 

We have analyzed your query. From that we would like to let you know that we can achieve your requirement by setting display as block property in the axis of the chart. We have also attached our demo link for your reference. Please find the below sample, code snippet and screenshot. 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/RangeNavigatorStretchIssue-1672265662.zip  

Code Snippet: 

<div class="right-container" style="display:block;"> 

    <EjsRangeNavigator Value="@Value" ValueType="Syncfusion.EJ2.Blazor.Charts.RangeValueType.DateTime" EnableDeferredUpdate="true"> 

           // add your additional code here  

        <RangeNavigatorSeriesCollection> 

            // add your additional code here         

        </RangeNavigatorSeriesCollection> 

    </EjsRangeNavigator> 

</div>  

 

 

Screenshot: 

 

 

 

Let us know if you have any concerns. 

Regards, 

Srihari M