dataTables-wrapper width

dataTables-wrapper width

JochenKJochenK Posts: 27Questions: 3Answers: 0

Hey there,
How can I control the width of the dataTables_wrapper?? It sets itself to 100% regardless ( max 1020px) , and I'd really like it to set itself to an width around 120 0px. Any ideas?

Thanks a lot
Jochen

This question has accepted answers - jump to:

Answers

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    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

  • JochenKJochenK Posts: 27Questions: 3Answers: 0

    Colin,
    i make a test case live.datatables.net/lopevege/1/edithttp://

    The table should be responsive with fixedColum.
    Please try the pagination numbers and you will see that x-scrollbar by different numbers disappears.

    Furthermore, I would like to expand the table in width, so that the middle row area ( color:lavender ) is filled.
    Is there a solution?

    Cheers, Jochen

  • JochenKJochenK Posts: 27Questions: 3Answers: 0

    Colin,
    Another addendum to the previous text:
    When I used "table-bordered" in the table tag, pagination works fine,but the first column on the left gets its own scrollbar.

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    The table isn't initialising. There are no errors, but something isn't right - could you take a look, please,

    Colin

  • JochenKJochenK Posts: 27Questions: 3Answers: 0

    Hmmm...take a look ....ok, but i can't find an error. I have no idea what could be wrong!
    I have tried with newest Firefox and IE.

    http://live.datatables.net/lopevege/1/edit

  • JochenKJochenK Posts: 27Questions: 3Answers: 0

    Hi Colin,
    it seems that i found a workaround:
    the js-file "dataTables.responsive.min.js" make the trouble, if this file is not used everything looks fine.
    That is not the solution because the table is now not responsive. How is this to be solved now?
    And the another problem is:
    When I used "table-bordered" in the table tag the first column on the left gets its own second scrollbar.

  • JochenKJochenK Posts: 27Questions: 3Answers: 0
  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    In that link, there is the following CSS:

        div.dataTables_wrapper {
            width: 900px;
            margin: 0 auto;
        }
    

    So the table won't be dynamic in width, it will just be 900px. You could use max-width: 900px if you didn't want it wider than that.

    Allan

  • JochenKJochenK Posts: 27Questions: 3Answers: 0

    I have used know max-width and the responsive-problem is solved .... thanks.
    But what about table-bordered? Is it not possible tu use with fixedColumns?

  • JochenKJochenK Posts: 27Questions: 3Answers: 0

    In the responsive-examples here I see that the columns are responsive. It is possible that fixedColumns with responsive doesn't work ? in the test case i have set all necessary responsive-options. http://live.datatables.net/lopevege/5/edit

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    Yep, FixedColumn extension and Responsive are incompatible I'm afraid - see the compatibility matrix here,

    Colin

  • JochenKJochenK Posts: 27Questions: 3Answers: 0

    Hmm.... i see ... ok, but that is very unfortunate.
    And it is known, that table-bordered doesn't work with fixedColumns?

    Thanks for yourhelp

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    Yep, they should work - see here: http://live.datatables.net/sodukama/1/edit

    Colin

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    p.s. and sorry about not picking up on that incompatibility in your earlier posts in this thread, I totally missed that.

  • colincolin Posts: 15,112Questions: 1Answers: 2,583
    Answer ✓

    And please ignore the example in that top comment, the bin is corrupted, please go here instead: http://live.datatables.net/pegageji/1/edit

  • JochenKJochenK Posts: 27Questions: 3Answers: 0

    ok..thanks for your help ...for my first problem fixedCoumns / responsive i try to find another solution for my work.

  • JochenKJochenK Posts: 27Questions: 3Answers: 0

    if i want to change the color of the fixedColumn can i do this in the fixedcolumns.css or is it only possible with a function?

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    You can modify your project's CSS, something like this: http://live.datatables.net/pegageji/3/edit

    Colin

  • JochenKJochenK Posts: 27Questions: 3Answers: 0

    Thanks, this is a great help for me. Are the possibilities described somewhere in a referenz manual ( i can't find any here ) to use css-tags, for example _DTFC* or when i have <a href.... in the fixedColumn and that href shout be change color when hover it ?

  • JochenKJochenK Posts: 27Questions: 3Answers: 0

    For information : I noticed that I have to use !important in css in my program environment, otherwise the color will not be changed

    .DTFC_Cloned td {
    background-color: #58ACFA !important;
    }

  • colincolin Posts: 15,112Questions: 1Answers: 2,583
    Answer ✓

    Not documented, as that's standard CSS stuff. Glad all working!

    Colin

  • JochenKJochenK Posts: 27Questions: 3Answers: 0

    Smile ... you are right..it's CSS standard, i know. But i think that CSS-Tag .DTFC_cloned is part of any CSS-File and that is what i mean.
    But ok..i will try to find

    Thanks for your help so far, has been very insightful.

  • VanqVanq Posts: 10Questions: 3Answers: 0

    Hey there is there a way to set the column width for each column?
    The following code should work in theory but doesn't. It won't change the width of the first column.

    columnDefs: [
              { targets: [12], searchable: false },
              { targets: [12], visible: false },
              **{ targets: [0], "width": '20px' }**,
            ],
    

    Is there something like this

    div.dataTables_wrapper {
          padding-left: 10px;
          padding-right: 10px;
          width: 100%;
          margin: 0 auto;
        }
    

    that sets the width of columns and not the whole table?
    Thanks.

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    @Vanq Yep, columns.width is the way to go - there's discussion about it on this thread.

    If that doesn't help, 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

  • VanqVanq Posts: 10Questions: 3Answers: 0

    @colin Thanks for your response. I could kind of change the width of the columns with the help of that thread you linked but it doesn't seem to work properly. There is the issue with the overflow.
    I now have created a test case :)

    http://live.datatables.net/nojeceda/1/edit?html,css,js,console,output

    What I want is to be able to resize the column widths of columns that consist of long texts and have columns that only show the ID to be short.
    I also seem to have a problem with the header not matching my table.
    Isn't there a way to resize the column width inside my web app with drag and drop like in Excel, that would be very user friendly since the contents of my table vary quite a bit in length.
    Thanks!

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    Isn't there a way to resize the column width inside my web app with drag and drop like in Excel

    No sorry. That isn't a feature of DataTables at this time. It might be something we add in future, but there are no immediate plans for it.

    The column widths are difficult in real table elements. It is almost certainly why so many other table components use div elements rather than the proper table. When we set your 100px width to the column, the browser can overrule that, and tries to collapse the table to fit onto the screen. The table-layout: fixed resolves that.

    What is messing with your layout now is the input elements. They have a browser pre-defined width. We can override that with:

    tfoot input {
      width: 100%;
    }
    

    Giving: http://live.datatables.net/nojeceda/2/edit

    Allan

Sign In or Register to comment.