Как я могу сделать скрытый дисплей выбора с правильной шириной, когда скрыт? - PullRequest
Новая
       56

Как я могу сделать скрытый дисплей выбора с правильной шириной, когда скрыт?

0 голосов
/ 01 мая 2020

В моей форме пользователь выбирает между данными, представляющими текстовое или числовое значение. Когда они выбирают числовое значение, я хочу, чтобы рядом с ним отображался выбор единиц измерения. Все эти функции работают нормально, однако, я получаю другое отображение в зависимости от того, начинается ли диапазон выбора юнитов скрытым или нет. Если выбор единицы измерения становится видимым (нежелательным), поле выбора единицы измерения будет иметь положительную длину. Однако, если он начинается со скрытого (путем включения закомментированной строки ниже), выбор единицы измерения будет отображаться как сжатый выбор без ширины. Содержимое в окружающих полях сетки отображается соответствующим образом, независимо от того.

Обратите внимание, что на момент его разработки я еще не заполнял какие-либо параметры для поля выбора, хотя я разрешаю пользователю добавлять свои собственные записи. Я бы хотел, чтобы поле оставалось одинаковым по размеру независимо от того, чтобы содержимое визуально совпадало с другими строками. 

var unitSpan = $('<span>')
                    .attr('id', "unit_selection_" + transactionNum)
                    .attr('style', "grid-column-start:8; grid-column-end:10")
            //      .attr('hidden','hidden')
                    .appendTo(linkSet);
$('<span>')
    .text("units: ")
    .appendTo(unitSpan);

var unitSelect = $('<Select>')
    .attr('class', "chosen-select-single-select chosen-units")
    .attr('id', "newRelationshipRecipientUnits" + transactionNum)
    .attr('name', "newRelationship_" + transactionNum + "_unit")
    .attr('style', "width: 150px;grid-column-start:8;grid-column-end:10")
    .appendTo(unitSpan);

1 Ответ

1 голос
/ 02 мая 2020

Используя стиль видимости вместо скрытого, диапазон единиц будет по-прежнему занимать пространство в макете, поэтому вам не нужно играть с шириной. 

var unitSpan = $('<span>')
                .attr('id', "unit_selection_" + transactionNum)
                .attr('style', "grid-column-start:8; grid-column-end:10")
                .css({'visibility':'hidden'})
                .appendTo(linkSet);

, затем используйте 

unitSpan.css('visibility','')

, чтобы сделать элемент видимым.

Кроме того, если вы используете метод jQuery css (), вы не будете сжимать значение стиля. Похоже, что вы повторяете «grid-column-start: 8; grid-column-end: 10» из-за этого. 

var unitSpan = $('<span>')
            .attr('id', "unit_selection_" + transactionNum)
            .css({"grid-column-start" :"8", "grid-column-end":"10", "visibility":"hidden"})
            .appendTo(linkSet);

, затем используйте любой из них, чтобы отобразить его вместо сброса всего стиль, который может вызвать другие проблемы. 

unitSpan.css('visibility','');

unitSpan.show();
...