Помощь при оформлении динамического c asp: CheckBoxList с использованием Bootstrap - PullRequest
Новая
       48

Помощь при оформлении динамического c asp: CheckBoxList с использованием Bootstrap

0 голосов
/ 30 апреля 2020

У меня есть asp: CheckBoxList, который заполняется значениями из БД. Я использую Bootstrap 4.3.1 в качестве основы. Я пытаюсь оформить свой CheckBoxList, используя пример по умолчанию: 

  <div class="custom-control custom-checkbox my-1 mr-sm-2">
<input type="checkbox" class="custom-control-input" id="customControlInline">
<label class="custom-control-label" for="customControlInline">Remember my preference</label>

Это мой код для моего CheckBoxList: 

<asp:CheckBoxList ID="CBLSymptoms" runat="server" RepeatDirection="Horizontal" CellPadding="9"></asp:CheckBoxList>

Это то, что я Я пытался, однако CheckBoxList исчезает: 

        <div class=" custom-control custom-checkbox my-1 mr-sm-2">
        <asp:CheckBoxList type="checkbox" CssClass="custom-control-input" ID="CBLSymptoms" runat="server" RepeatDirection="Horizontal" CellPadding="9"></asp:CheckBoxList>
    </div>

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

1 Ответ

0 голосов
/ 30 апреля 2020

Классы bootstrap не будут работать напрямую с элементом управления CheckBoxList.

Когда мне нужно было сделать это, я создал свои собственные классы и применил их к элементу div, окружающему CheckBoxList.

Я также упаковываю в fieldset для соответствия доступности.

CSS дополнения: 

.checkbox.checkboxlist input[type="checkbox"]
{
    position: absolute;
    margin-top: 0.3rem;
    margin-left: -1.25rem;
}

.checkbox.checkboxlist label
{
    margin-bottom: 0;
    display: inline-block;
}

fieldset legend
{
    font-size: inherit;
}

fieldset .checkbox
{
    position: relative;
    display: block;
    padding-left: 1.25rem;
}

Разметка: 

<fieldset>
    <legend>Label for CheckBoxList</legend>
    <div class="checkbox checkboxlist">
        <asp:CheckBoxList ID="CheckBoxList1" runat="server" RepeatDirection="Vertical" RepeatLayout="Flow">
            <asp:ListItem Text="Option one"></asp:ListItem>
            <asp:ListItem Text="Option two"></asp:ListItem>
            <asp:ListItem Text="Option three"></asp:ListItem>
        </asp:CheckBoxList>
    </div>
</fieldset>

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

...