Окно выбора HTML - Как отключить отключенный, чтобы сохранить ширину самого широкого дочернего элемента?

У меня возникли проблемы с выравниванием формы, содержащей строки «ролей», которые могут быть назначены через раскрывающийся список. Проблема заключается в том, что есть определенные роли, которые «только для чтения», и поэтому они отключены в виде (первые две строки в изображении ниже отключены):Окно выбора HTML - Как отключить отключенный, чтобы сохранить ширину самого широкого дочернего элемента?

problem

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

Заранее благодарим за любой совет, который вы можете предложить!

источник

2017-01-23 Lance Fono

Где ваш код? Пожалуйста, обновите свой вопрос, включив в него [mcve]. – Shaggy

Для чего это происходит? –

Я бы просто назначить выберите ширину починки:

<select name="my_select_1" style="width:150px;"> 
    <option value="aaa">aaa</option> 
    <option value="bbb">bbb</option> 
    <option value="ccc">ccc</option> 
</select>

источник

2017-01-23 13:43:45 Federico

Благодарим вас за ответ. Однако ваше решение действительно сохраняет выделенные поля, но я хочу попытаться избежать использования фиксированного размера, поскольку пользователь должен иметь возможность сделать эту панель более широкой, поэтому ширина должна быть регулируемой. –

Если вы разместите код своего html & css, возможно, я смогу показать вам, как настроить его. – Federico

Во-первых спасибо за предложения.

Я решил эту проблему, добавив имена классов в каждой из «колонок» (кнопка минус «Роль», «Имя» и что можно увидеть в изображении на вопрос в):

<!-- Container to hold single row of "roles", "names" and "remove" button --> 
<div className="role-field-row" key={_.uniqueId("row")} > 

    <!-- Added className (React) 'left-col' --> 
    <FormGroup className="on-left left-col"> 
     <ControlLabel>Role</ControlLabel> 
     <FormControl className="form-control dropdown"> 
      { this.getRoleGroupOptions(roleGroup, personRole) } 
     </FormControl> 
    </FormGroup> 

    <!-- Added className 'middle-col' --> 
    <AutoSuggestField className="middle-col" /> 

    <!-- Added className 'right-col' -->   
    <FormGroup className="on-right right-col"> 
     <ControlLabel>&nbsp;</ControlLabel> 
     <ButtonGroup bsClass="role-remove-container"> 
     <Button bsSize="xsmall" disabled={ this.props.readOnly }> 
      <Glyphicon glyph="minus" /> 
     </Button> 
     </ButtonGroup> 
    </FormGroup> 
    </div>

Я тогда добавлены следующие правила стиля

.role-field-row{ 
    display: flex; 
    justify-content: space-between; 
} 

.role-field-row div.left-col{ 
    width:45%; 
} 

.role-field-row div.middle-col{ 
    width:50%; 
} 

.role-field-row div select{ 
    width:100%; 
}

Пожалуйста, обратите внимание, что я использую реагировать так определенные атрибуты, такие как «Classname =„ххх“» делают как «класс =„ххх“» в браузере. Конечный результат изменений производится следующим образом:

fixed form

источник

2017-01-24 12:13:34

Окно выбора HTML - Как отключить отключенный, чтобы сохранить ширину самого широкого дочернего элемента?

ответ

Смежные вопросы