CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Lurk21
Lurk21

Reputation: 2337

Trouble adding horizontal scroll on dynamic table

I'm trying the following in Javascript:

if (parseInt($('#' + tableName + 'Table').width()) > parseInt($('#' + tableName + 'Table').parent().width())) {
                    console.log("Here");
                    $('#' + tableName + 'Table').css('overflow-x', 'scroll');
                }

And it's logging to the console but there is no horizontal scroll bar...

Upvotes: 0

Views: 156

Answers (2)

Alex Funk
Alex Funk

Reputation: 435

Obviously your jquery selector is wrong. You could have easily logged $('#' + tableName + 'Table') or stepped through your code with a debugger to see that this element did not exist or was not the correct element. Your next step would be to figure out the appropriate selector. In this case you need to target the parent of $('#' + tableName + 'Table')

Upvotes: 0

tomaroo
tomaroo

Reputation: 2534

Change

$('#' + tableName + 'Table').css('overflow-x', 'scroll');

To

$('#' + tableName + 'Table').parent().css('overflow-x', 'scroll');

The parent element is the one that needs the overflow-x property.

Also you don't need javascript for this functionality. You can just set overflow-x: auto; to the parent element, and it will add a scrollbar automatically if its contents are too wide.

Upvotes: 2

Related Questions