Как сделать так, чтобы надписи ASP CheckBoxList оставались на одной строке с флажком - PullRequest
Новая
       5

Как сделать так, чтобы надписи ASP CheckBoxList оставались на одной строке с флажком

6 голосов
/ 01 ноября 2011

Это может быть распространенной проблемой, но я изо всех сил пытаюсь найти решение, которое исправит это

У меня есть модальное всплывающее окно, которое я отображаю с помощью jQuery, это всплывающее окно содержит список флажков и кнопку, код выглядит следующим образом: 

<div id="dialog" title="Notify Users" >
    <div style="width:100%; height:500px; overflow:auto;">
        <asp:CheckBoxList ID="chkNotify" 
            runat="server" 
            CssClass="checkboxlist_nowrap"
            RepeatLayout="Table" 
            /> 
    </div>
    <asp:Button ID="btnSaveNotifications"
        runat="server" 
        Text="Ok"
        />
</div>

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

Я также пытался применить этот CSS 

.checkboxlist_nowrap tr td label
{
    white-space:nowrap;
    overflow:hidden;
    width:100%;
}

Это не помогло, но я не уверен, действительно ли использовалась таблица стилей, хотя у меня есть: 

  <link href="../css/HelpDesk.css" rel="stylesheet" type="text/css" />

в моей голове теги.

Может кто-нибудь предложить что-нибудь еще, что я могу попробовать?

Спасибо

ОБНОВЛЕНИЕ: Вот мой Jquery: 

 $(function () {
    $("#dialog").dialog({
       autoOpen: false,
       show: "blind",
       width: 400, 

       hide: "explode"
    });

А вот как я заполняю CheckBoxList: 

 Private Sub populateCheckBoxList()

      Dim notificationList As DataTable
      notificationList = dbGetNotificationsList(1)

      For Each dr As DataRow In notificationList.Rows

         Dim li As New ListItem
         li.Text = dr("FullName")
         li.Value = dr("ID")

         If (dr("Checked") = 1) Then
            li.Selected = True
         Else
            li.Selected = False
         End If
         chkNotify.Items.Add(li)

      Next

   End Sub

Я попытался переместить CheckBoxList прямо внутрь тега формы, чтобы никакие другие стили не могли быть применены, и ничто не должно повлиять на него, однако у меня все еще остается та же проблема.

Ответы [ 11 ]

11 голосов
/ 11 января 2013

Для меня ни одно из вышеперечисленных решений не сработало, поэтому я посмотрел точный отрисованный HTML-код и обнаружил, что для метки установлено свойство display, равное block. Изменение его на встроенное сработало: 

.checkboxlist_nowrap label
{
     display:inline;
}
2 голосов
/ 15 апреля 2015

У меня была похожая проблема. Нашел ответ о другом переполнении стека статья , которую я вставил ниже.

Вы хотите, чтобы display: inline применялся к элементу, который ASP генерирует для хранения текста метки, а не к самому элементу управления. Так, например: 

<style type="text/css">
label { display: inline-block; }
</style>
<asp:CheckBox Text="This text appears on same line as checkbox" runat="server" />
2 голосов
/ 01 ноября 2011

Я думаю, что это проблема CSS ... Я не смог воспроизвести пробел, упакованный в то, что вы опубликовали. Возможно, вы захотите убедиться, что ширина вашего диалога установлена ​​правильно в jQuery.

Что-то вроде: 

$("#dialog").dialog({
    modal: true,
    autoOpen: false,
    draggable: false,
    resizable: false,
    width: 400,
    buttons: {
        Update: function () {
            $(this).dialog('close');
        },
        Cancel: function () {
            $(this).dialog('close');
        }
    }
});

Кроме того, действительно отличный способ проверить CSS (и javascript) - использовать инструменты разработчика Google Chrome. Они упакованы с Chrome. Все, что вам нужно сделать, это щелкнуть правой кнопкой мыши по элементу, с которым у вас возникли проблемы, и навести курсор мыши на HTML-код в окне. Он расскажет вам все применяемые к нему классы и покажет вам поля / ширину / все. Это было бесконечно полезно для меня.

1 голос
/ 06 марта 2014

В статье в проекте кода написано:

"Доступная длина текста для каждого CheckBox / RadioButton была ограничена (я не знаю, что является причиной ограничения), поэтому текст начнет переноситься после 8символов, если вы используете несколько слов. Вот почему для устранения этого в CSS используется «white-space: nowrap». "

Решение проблемы выравнивания заключается в том, что вам нужно установить свойство styleтег списка флажка как, 

style="white-space:nowrap";

Я думаю, это должно работать и для простых тегов HTML также .try, используя тот же оператор стиля и в файле css.

Вот ссылка, которой я делюсь сейчас. Пожалуйста, обратитесь к ней.

0 голосов
/ 29 сентября 2017 
<asp:CheckBoxList ID="CheckBoxList1" runat="server" CssClass="checkboxlist_nowrap" RepeatDirection="Horizontal">

.checkboxlist_nowrap label
    {
        font-weight:400;
        padding-left:3px;
    }

Использовать свойство RepeatDirection. Это сработало для меня !!

0 голосов
/ 04 августа 2016 
.checkboxlist_nowrap
{
white-space:nowrap;
display:inline-block;
}
0 голосов
/ 24 декабря 2014

Пока это была первая ссылка в Google на этот вопрос - размещение ответа на другой ответ на вопрос Asp: флажок CheckBox и текст не в одной строке

Простой стиль отображения: встроенный блок; устраняет проблему Конечно, вы захотите сохранить его в файле CSS, а не в свойствах элемента управления asp. :) 

<asp:CheckBox style="display:inline-block;" ID="CheckBoxShowParameters" runat="server" Text="Show Parameters" />
0 голосов
/ 19 сентября 2014

Установить свойство RepeatLayout = 'Поток' CheckBoxList

По умолчанию повторный макет установлен на «Таблица», поскольку он переходит на новую строку.

Если для макета установлено значение «Поток», флажки будут отображаться в той же строке.

0 голосов
/ 17 апреля 2013

Используя элемент управления флажка ASP.NET, у меня возникла та же проблема с нежелательным переводом строки между флажком и его меткой. Я полагаю, что проблема подняла свою уродливую голову, потому что этот раздел кода был обёрнут в класс, который применял стиль {display: block}. Я решил проблему, сначала добавив атрибут CssClass к флажку: 

<asp:Repeater
    ID="UserRoleList"
    runat="server">
    <Itemtemplate>
        <asp:CheckBox
            ID="RoleCheckBox"
            CssClass="sameLine"
            AutoPostBack="true"
            Text='<%# Container.DataItem %>'
            runat="server" />
        <br />
    </ItemTemplate>
</asp:Repeater>

Глядя на визуализированный html в браузере, просматривая исходный код, я увидел, что стиль добавил диапазон и что элемент управления флажка asp.net отображается внутри диапазона как тег ввода и метка. Я пытался применить свой стиль только к одному диапазону, но он не работал и не применял стиль к тегу ввода. Что мне помогло, так это применить стиль к лейблу: 

.sameLine label {
    display: inline;
}
0 голосов
/ 11 апреля 2012

У меня была точно такая же проблема. Для меня, это было установка ширины ввода в 100% в файле CSS, что вызвало проблему. элемент управления checkbox состоит из тега input и тега label. Я установил, что входной тег занимает 100% ширины, и это привело к тому, что тег метки начинался с новой строки. Мой совет - проверь свой css файл!

Страница:
...