Раскрывающийся список в рамках проблемы изменения размера группы кнопок для строки таблицы - PullRequest
Новая
       16

Раскрывающийся список в рамках проблемы изменения размера группы кнопок для строки таблицы

0 голосов
/ 02 июля 2018

Итак, в основном, я использую Datatable через ajax для загрузки записей в таблицу, которая находится внутри модального окна, которое появляется при нажатии кнопки. У меня есть столбец, который отмечает действие для этой конкретной записи. Столбец состояния представляет собой раскрывающийся список групп кнопок. поэтому всякий раз, когда я нажимаю на стрелку раскрывающегося списка любой строки, размер строки изменяется. Есть ли способ остановить это? Я пробовал свойство overscroll, но это не работает. Или это ведет себя так из-за Модала? Есть предложения?

Before Clicking Dropdown

After Clicking Dropdown

Выше вы можете легко заметить изменение ширины первой записи до и после щелчка.

Необходимый код Jquery для блока действий находится ниже 

settingsHtml = `   
    <div class="btn-group chargeability">
        <button type="button" class="btn bg-indigo waves-effect current-schedule-chargeable" data-id="`+d[0][i].id+`" style="width:115px" title="Schedule Chargeable Setting">`+ chargeable +`</button>
        <button type="button" class="btn bg-indigo dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
            <span class="caret"></span>
            <span class="sr-only">Toggle Dropdown</span>
        </button>
        <ul class="dropdown-menu" style="position: relative;z-index: 99999;">
            <li style="background:#f9f5e9;border-bottom:1px solid #ccc"><a href="javascript:void(0);" data-value="1" data-lead="`+d[0][i].lead_id+`" data-id="`+d[0][i].id+`" class="schedule-chargeable waves-effect waves-block">Yes</a></li>
            <li style="background:#f9f5e9"><a href="javascript:void(0);" data-value="0" data-lead="`+d[0][i].lead_id+`" data-id="`+d[0][i].id+`" class="schedule-chargeable waves-effect waves-block">No</a></li>
        </ul>
    </div>`;
...