Make the horizontal scrollbar as a fixed footer

[Unknown]

Hey, im trying to make the horizontal scrollbar a fixed footer at the button on the page.

can i do it from css?

i tried to do something like that but it seems it doesn't affect

*::-webkit-scrollbar:horizontal{

    position: fixed ;

    bottom: 10px;

    top: 0px

}



[Rajapandiyan Settu]

Hi Eyal, 

 

Thanks for contacting Syncfusion support. 

 

By analyzing your query, we suspect that you want to show the horizontal scrollbar in the viewport of the screen. If so, you can achieve your requirement by providing height to the Grid component. 

Height: https://ej2.syncfusion.com/react/documentation/api/grid/#height 

         <GridComponent dataSource={orderDetails} height='350'> 

          </GridComponent> 

Sample: https://stackblitz.com/edit/react-zz272n 

If this does not meet your requirement, Kindly share the video demo of your requirement in detail. 

 

Regards, 

Rajapandiyan S 

[Unknown]

Is there a way that i can make it fixed on the bottom of the screen? if i change the size of my browser window i need to scroll down to see the scrollbar. as you can see in the first screenshot I don't need to scroll down to see the scrollbar , but if I change my browsers size i do need to scroll down(second screen shot)  

[Rajapandiyan Settu]

Hi Eyal,  

  

Thanks for your update. 

Based on your requirement, you want to adapt the Grid when resizing the browser screen. 

 

By default, EJ2 Grid is responsive with the parent container of the Grid. To do that we need to the set the Grid height as “100%” and width in “n%”. You can change the height and width of parent-container element which will be adapted by Grid. 

Kindly set the height as 100% for html, body, Grid element and  set n% height to Grid’s parent element to achieve your requirement. 

[index.html] 

    <style> 

        html, 

        body, 

        #sample { 

            height: 100%; 

        } 

        .container { 

            height: 100%; 

        } 

        .header { 

            height: 30%; 

        } 

        .content { 

            height: 60%; // customize the height of Grid’s parent element. You can also set 90%, 80% based on your requirement. 

        } 

    </style> 

export class AggregateDefault extends SampleBase { 

 render() { 

    return ( 

      <div className="container"> 

        <div className="header"> 

          <div> 

            <button>button</button> 

            <button>button</button> 

          </div> 

          <br /> 

          <h>Text</h> 

          <div> 

            <input /> 

          </div> 

        </div> 

        <div className="content"> 

          <GridComponent 

            dataSource={hierarchyOrderdata} 

            editSettings={this.editOptions} 

            toolbar={this.toolbarOptions} 

            height={'100%'} 

            width={'100%'} 

            actionFailure={this.actionFailure.bind(this)} 

            aggregates={this.aggregates} 

          > 

            --- 

          </GridComponent> 

        </div> 

      </div> 

    ); 

  } 

} 

 

Help documentation : https://ej2.syncfusion.com/react/documentation/grid/scrolling/#responsive-with-parent-container 

Find the below sample for your reference. 

sample: https://stackblitz.com/edit/react-vfnnu3-y65ig5?file=index.js 

Please let us know if you have any concerns. 

Regards,  

Rajapandiyan S