listbox wrapper expands beyond specified width of listbox; related to overflow in ".e-listbox-container"

[Tom Medallis]

if I put a listbox control inside of a div of 200px in a flexbox column that is, say 220px, a wrapper of the listbox adds about another 100px to it's width, and thus a horizontal scroll bar. It looks terrible.

(the same thing happens if I put the listbox control inside a CSS grid section).  

Looking at the source code in Chrome dev tools, I see, just below element.style{}, there is:

e-listbox-wrapper:not(.e-listbox-container) {

1. overflow: auto;

}

If I set this overflow to "unset", instead, the problem goes away. However, I don't see any way to set a property on <ejs-listbox> which will fix this. The documentation on the cssClass looks like it might help, but I had no luck trying to fiddle with that. (An example or two in the documentation wouldn't kill anybody....)

I am currently using material design. However, previously trying to fix this when using CSS grid, I observed this behavior with the bootstrap4 and fabric styles, also.

[Gayathri KarunaiAnandam]

Hi Tom, 

We have checked your reported query. We are unable to replicate the reported issue in our end. We have prepared a sample based on this scenario. Please check the below link. 

Sample: https://codesandbox.io/s/vue-template-forked-ir0my?file=/src/App.vue 

If you are still facing the issue, kindly share the below details. 

• If possible, try to reproduce the reported issue in provided sample or share the issue reproducible sample.
• video demonstration of this issue.
•   Syncfusion version you are using. 
• If you are using customization, share the customization code.

 

Please provide the above requested information, based on that we will check and provide you a better solution quickly. 

 

Regards, 

Gayathri K