Disable horizontal scrollbar?

[NicolasParticipant]

Hi,
I need to disable the horizontal scrollbar of my listbox. When the content of one my cells is too big, I would like to do something like text-overflow:ellipsis does in CSS.

But it doesn’t look there an API for this. And doing it only with CSS seems cumbersome do to.

So, is there a way to do this?

Regards

[DimitarParticipant]

Hello Nicolas,

Unfortunately, this feature is not available in jqxListBox.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[NicolasParticipant]

Ok thank you! I guess I will will calculate the width of the content I put in the source, and make sure it’s not too big. But may be this could be a nice API to add 🙂

Regards

[Peter StoevKeymaster]

Hi Nicolas,

I would like to add something here, too. The jqxListBox has a property called “autoItemsHeight”. When it is turned on, the long items would be wrapped in several lines which will result in no horizontal scrollbar.

Hope this helps.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[NicolasParticipant]

Thanks Peter! Didn’t thought about this possibility. It works fine! Even if I use a custom renderer!

[npayotParticipant]

Hi,

Topic is a bit old but this issue happened to me so just in case someone’s looking for a solution:
– Wrap each row into a css class with `{ width: 100px; text-overflow: ellipsis; overflow: hidden; }’
– Remove the horizontal scrollbar once the source’s loaded and reduce listbox height by 20

var horizontalScrollBarId = '#horizontalScrollBar + 'listboxId';
var horizontalScrollBar = $('#listboxId').find(horizontalScrollBarId);
// Horizontal scrollbar exists
if (horizontalScrollBar.length > 0) {
    horizontalScrollBar.remove();
    $('#listboxId').css('height', $('#listboxId').height() - 20);
}

Regards,

[npayotParticipant]

Actually the horizontal scrollbar is always present on the DOM. It’s better to check for the visibility and hide it it’s visible:

var horizontalScrollBarId = '#horizontalScrollBar' + 'listboxId';
var horizontalScrollBar = $('#listboxId').find(horizontalScrollBarId);
// Horizontal scrollbar is visible
if (horizontalScrollBar.css('visibility') === 'visible') {
    horizontalScrollBar.css('visibility', 'hidden');
    $('#listboxId').css('height', $('#listboxId').height() - 20);
}

My mistake.

[kazoookaParticipant]

What you posted npayot does work for a millisecond. As soon as (i’m debugging the code) i’m after the
$(‘#listboxId’).css(‘height’, $(‘#listboxId’).height() – 20);
the listbox resets somehow and displays the scrollbar again magically. How can i achieve removing the scrollbar completely? I don’t want the text to wrap with setting autoItemsHeight: true… Please anybody? I can’t find an answer to this anywhere…

[kazoookaParticipant]

Anybody in this forum can help me please?

[HristoParticipant]

Hello kazoooka,

Please, take a look at this forum post:
https://www.jqwidgets.com/community/topic/disable-horizontal-scrollbar/#post-45475
You could use the autoItemsHeight: true property and in this way, you will avoid horizontal scrollbar.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[Author]

Posts