sidebar dosent work correctly - horizontal instead of vertical

Hi,

iv been working with the sidebar component and suddenly it wont work correctly and become

horizontal ,and stops right after the content inside of it  and ignoring from postion="Right"

this is my code and what it shows

Capture.PNG

import {SidebarComponent} from '@syncfusion/ej2-react-navigations';
import {CheckBoxComponent} from '@syncfusion/ej2-react-buttons'

function SlideBar({ props = [] })
{

.... some functions


return(
<div>
<SidebarComponent style={{background: "#E5E5E5"}} position="Right" type="Over" >
{chackbox.visbal ? props.map((info) => (
<div key={info.Field}>
<CheckBoxComponent
id ={info.key}
key = {"key"}
label={info.Field}
checked={false}
onChange = {Handlechakcbox}
/>
div>
)):null}

{data.visbal && data.key ? <FromProp prop={props} id={data.key}/>
: null
}

{data.visbal ?
<div>
<button onClick = {Handleback}> Backbutton>
div>
: null}
SidebarComponent>
div>
)
}



3 Replies 1 reply marked as answer

IL Indhumathy Loganathan Syncfusion Team November 23, 2021 12:36 PM UTC

Hi Eyal, 
 
Greetings from Syncfusion support. 
 
We have validated your reported query in Sidebar component. We suspect that the reported issue occur due to the missing stylesheet at your application. You can use the below CDN link to include stylesheet for Sidebar component in your html file. 
 
<link rel='nofollow' href=https://cdn.syncfusion.com/ej2/bootstrap5.css rel="stylesheet" /> 
 
Else, you can refer the below documentation link to import Sidebar and its dependent components styles. 
 
 
For your reference, we have shared a Sidebar sample in below link. 
 
 
Please check whether the shared details help you and let us know if you need any further assistance. 
 
Regards, 
Indhumathy L 


Marked as answer

UN Unknown replied to Indhumathy Loganathan November 24, 2021 07:37 AM UTC

It works Thanks!



KR Keerthana Rajendran Syncfusion Team November 25, 2021 06:53 AM UTC

Hi Eyal, 
 
Most welcome. We are glad to hear that the provided suggestions helped you. Please get back to us if you need any further assistance. 
 
Regards, 
Keerthana R. 


Loader.
Up arrow icon