Responsive Issue on Custom Search Row

Responsive Issue on Custom Search Row

lyndonwillyndonwil Posts: 40Questions: 5Answers: 0

I have a Table that contains a custom search row within <tHead>

Within that search row, I have a series of <inputs> and <selects>, the problem I am having is with Selects. I define them within the INITCOMPLETE event and this then throws out the responsiveness of the table and the tables start to overlap the container.

i have tried using recalc without any success

Any ideas ?

Answers

  • lyndonwillyndonwil Posts: 40Questions: 5Answers: 0
    edited May 2015

    I've generated a link to show the issue

    http://cloud-contractor.co.uk/test.php

    If you play around with the resizing, you will see that the datatable starts to escape it's container. I have hacked around with this and it occurs regardless of whether there is a button in the final column.

    The issue seems to occurs because of the code that is in the Datatable InitComplete event. When you add the drop down boxes and the text boxes within the search row, it seems to throw the responsiveness of the table out. I have tried using recalc etc within initComplete but that hasn't worked.

    The code I am using within initComplete to generate the filters is code that was used in the examples prior to 1.10. I appreciate that it isn't the code used in the current examples. I had a quick play around with the new code and that didn't seem to solve the issue either

    If you remove the searchRow, the issues stop

    Thanks

    ** Notes **

    Responsive is turned ON

    All Option Values are exact to the data within the column, they are not abbreviated..

    I have tried it with Bootstrap removed

  • lyndonwillyndonwil Posts: 40Questions: 5Answers: 0

    Fixed

    Setting the width of the Selects within the header row to 100% stops the issue..

    Alan, i'm not sure if this is a slight bug with the width calculation or something on my end but all working now

  • matthttammatthttam Posts: 40Questions: 2Answers: 0

    I wanted to say thank you for finding this solution. I have had the same problem for a while and decided to search for an answer again today.

    In mine, I put input boxes at the bottom of each column. I set them all to 100% width and the responsive table began to behave as expected. I am on 1.10.10 and have been experiencing this issue since 1.10.7.

    Thanks again!

This discussion has been closed.