Width of column is higher than specified

Width of column is higher than specified

VipulKVipulK Posts: 6Questions: 1Answers: 0

Hi. I've installed datatables with responsive plugin in my website (v1.10.18) and for some reason the columns are being forced to collapse even though there is plenty space for them. The table contains 3 columns with very short content but no matter how wide the table is, only 2 columns are being displayed. I used the inspector to....well, inspect and I see columns have been given a width which seems to be correct but the actual width of the column is higher than specified width (check screenshot)

I created a test case but it came out fine: http://live.datatables.net/kosujaka/1/edit
Can anyone suggest what might be causing this?

Answers

  • colincolin Posts: 15,142Questions: 1Answers: 2,586

    Hi @VipulK ,

    Would you be able to link to that page, or make the fiddle the same? In the fiddle, you've set a column width based on the percentage, and there's no widths set in the CSS. It's tricky to debug CSS issues, so we'd really need it the same as the problem you're reporting.

    Cheers,

    Colin

  • VipulKVipulK Posts: 6Questions: 1Answers: 0

    Hi. I've come across the same issue again on a different project. I came to ask for help but I saw that I've already asked this question before. Unfortunately, I cannot share the link where these pages are uploaded.

    Is there a setting in responsive extension where I could force it to not collapse at all above a certain window width (breakpoint)?

  • colincolin Posts: 15,142Questions: 1Answers: 2,586

    Hi @VipulK ,

    This example here should help, it's showing different breakpoints. If not, we're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

    Cheers,

    Colin

  • VipulKVipulK Posts: 6Questions: 1Answers: 0

    http://live.datatables.net/makizuvi/1

    Here it is. I've loaded the actual page from the website.

  • allanallan Posts: 61,665Questions: 1Answers: 10,096 Site admin

    Is there a setting in responsive extension where I could force it to not collapse at all above a certain window width (breakpoint)?

    I'm not sure it is actually. The whole point of Responsive is that it will collapse columns for which there isn't room. If there isn't room, why display them? In fairness you might have a reason to do so, but I don't think its something we've considered in Responsive.

    Regards,
    Allan

  • VipulKVipulK Posts: 6Questions: 1Answers: 0

    The problem is that its calculations are a bit off. The data can show up without collapsing the columns albeit squeezed in. Take a look at this link: http://live.datatables.net/suyohego/1

    I removed one of the wide columns and now there's plenty of space, but responsive is still collapsing one column. You can see this in the screenshot above as well, the columns are too wide and last one collapses.

  • allanallan Posts: 61,665Questions: 1Answers: 10,096 Site admin

    How wide (in pixels) is your output window please?

    Thanks,
    Allan

  • VipulKVipulK Posts: 6Questions: 1Answers: 0

    My window width is 1400px and 250px is the sidebar. I don't know why JSbin keeps expiring my link saying its created anonyomously. I am logged in on JSbin. You can take the code from HTML window and create your own page and look at it in fullscreen.

  • colincolin Posts: 15,142Questions: 1Answers: 2,586

    It can do that if you're looking at somebody else's original bin - you can clone it if you're logged in and that will make it yours.

  • VipulKVipulK Posts: 6Questions: 1Answers: 0

    Any updates guys?

This discussion has been closed.