Column width configuration options - Join w/Bulma

tinncup

Description of problem:

Cannot seem to find how to fix the dropdown column width on a join (join data is present) - can't seem to get the join column to not overflow? (or remove the right adjacent column encroachment)

Tried both manual and auto width configurations (manual join column and remaining auto)

columns: [
                {
                    data: null,
                    defaultContent: '',
                    className: 'select-checkbox',
                    orderable: false
                   // width: '2%'
                    },
                {data: "line",
                 className: 'dt-center'
                 // width: '2%'
                    },
                {data: "command",
                 editField: "commands",
                 className: 'dt-center',
                 width: '20%'
                    },
                {data: "a1",
                 className: 'dt-center'
                 // width: '20%'

Your excellent guidance is always appreciated

kthorngren

Try setting the width of the input to 100%, something like this:

table.dataTable thead th select { 
  width: 100%;
}

You might need to inspect the th and the input to find the correct selector.

Kevin

tinncup

Kevin,

Thanks. Not much luck so far. Is there an example available using inline edit with Bulma? All of join examples on the site seem to use dataTables.css

kthorngren

Sorry, I misunderstood the problem. I thought you were asking about column search elements in the header. I built this example with Bulma and inline editing:
http://live.datatables.net/guwafemu/269/edit

When clicking on a select input the column width changes to accommodate the largest option width. Inspecting the select I find this:

<div data-dte-e="input-control" class="DTE_Field_InputControl" style="display: block;">
    <select id="DTE_Field_users-site">
        <option value="" hidden="" disabled="">Select a location</option>
        <option value="1">Edinburgh</option>
        <option value="2">London</option>
        <option value="6">Los Angeles</option>
        <option value="4">New York</option>
        <option value="3">Paris</option>
        <option value="5">Singapore</option>
    </select>
</div>

I add this CSS to the example which keeps the select input within the width of the column:

.DTE_Field_InputControl select {
  width: 100%;
}

You can uncomment it to see the affect. If this doesn't help please update the test case to show the issue.

Kevin

tinncup

Kevin,

Thanks. I wind up in the same place but with different visualization

Still off somewhere .. Test case uploaded
test.gunnarstone.com (dragoncat/cat2022)

As always we appreciate the help.

kthorngren

I'm not sure how this works in other browser's but in Chrome when you inspect the select element you can make changes to see how they affect the styling. For example:

Unchecking that CSS seems to move and align the right side of the input with the right side of the cell. Scroll down a bit more to find this CSS:

Turn off padding-top and padding-bottom. With those three changes it looks like this:

In your style section you should be able to override these settings.

Kevin