Cómo hacer etiquetas ASP CheckBoxList permanecen en la misma línea como casilla

Question

Esto puede ser un problema común, pero estoy luchando para encontrar una solución que lo arreglará

tengo una ventana emergente modal estoy mostrando con jQuery, este emergente contiene una lista de casillas de verificación y un botón, el código es el siguiente:

<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> 

las pantallas emergentes correctamente sin embargo las etiquetas para cada casilla de verificación están en la línea debajo de la casilla de verificación. No puedo entender por qué sucede esto, al principio supuse que el div que contenía el CheckBoxList era simplemente demasiado pequeño, así que le di a cada div un ancho fijo, pero eso no sirvió de nada.

también han intentado aplicar este CSS

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

Nos dio ayuda, pero estoy seguro acerca de si la hoja de estilo en realidad fue utilizado a pesar de que tengo:

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

en mis etiquetas de la cabeza.

¿Alguien puede sugerir algo más que pueda probar?

Gracias

ACTUALIZACIÓN: Aquí está mi Jquery:

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

     hide: "explode" 
    }); 

Y aquí es cómo rellenar los 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 

He intentado mover el CheckBoxList a justo dentro de la etiqueta del formulario para que no se puedan aplicar otros estilos y nada debería afectarlo, sin embargo, sigo teniendo el mismo problema.

Answer 1

Marcando esto como cerrado ya que nunca pude resolverlo y el problema se ha pasado a otro desarrollador. Publicaré la respuesta aquí cuando la recupere.

Realmente agradecería a las personas que no me voten por marcar esto como cerrado, ya no trabajo en la empresa, no tengo manera de recrear el problema o verificar las soluciones que las personas publican y en ese momento configurar esto para cerrar ninguna de las soluciones proporcionadas corrigió el problema.

Answer 2

Creo que es un problema de CSS ... No pude reproducir el espacio en blanco con lo que publicaste. Es posible que desee asegurarse de que el ancho de su cuadro de diálogo esté configurado correctamente en jQuery.

Algo así como:

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

Además, una muy buena manera de comprobar CSS (y Javascript) está utilizando Herramientas de desarrollo de Google Chrome. Están empacados con Chrome. Todo lo que tiene que hacer es hacer clic derecho en el elemento con el que tiene problemas y colocar el cursor sobre el HTML en la ventana. Te dirá todas las clases que se le aplicarán y te mostrará los márgenes/ancho/todo. Ha sido infinitamente útil para mí.

Answer 3

Tuve el mismo problema exacto. Para mí, fue establecer el ancho de la entrada al 100% en el archivo css que causó el problema. el control de casilla de verificación está formado por la etiqueta de entrada y la etiqueta de etiqueta.Configuré la etiqueta de entrada para que tomara el 100% del ancho y eso provocó que la etiqueta de etiqueta comenzara desde una nueva línea. ¡Mi consejo es verificar tu archivo css!

Answer 4

Para mí ninguna de las soluciones anteriores funcionó, así que busqué el HTML exacto y encontré que la etiqueta tenía la propiedad de visualización establecida para bloquear. Si lo cambia a en línea funcionó:

.checkboxlist_nowrap label 
{ 
    display:inline; 
} 

Answer 5

El uso de un control de casilla de verificación ASP.NET, que tenía el mismo problema con un avance de línea no deseada entre una casilla de verificación y su etiqueta. Creo que el problema salió mal porque esta sección de código estaba envuelta en una clase que aplicaba un estilo {display: block}. He resuelto el problema mediante la adición de un atributo primera CssClass a la casilla:

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

Mirando el HTML representado en el navegador mediante la visualización de la fuente Vi que el estilo añadió un lapso y que el control de casilla de verificación era asp.net renderizado dentro del lapso como una etiqueta de entrada y una etiqueta. Intenté aplicar mi estilo solo al tramo, pero no funcionó ni aplicando el estilo a la etiqueta de entrada. Lo que funcionó para mí fue aplicar el estilo a la etiqueta:

.sameLine label { 
    display: inline; 
} 

Answer 6

Un artículo en el proyecto de código dice:

"La longitud del texto disponible para cada CheckBox/RadioButton se ha limitado (no sé lo que es causando la limitación), por lo que el texto comenzará a envolver después de 8 caracteres si usa varias palabras. Esta es la razón por la que el 'espacio en blanco: nowrap' se usa en el CSS para eliminar eso. "

la solución para el problema de la alineación es que se necesita para establecer la propiedad de estilo de la lista de etiquetas casilla como,

style="white-space:nowrap"; 

creo que debería funcionar para las etiquetas HTML plano also.try usando el mismo estilo declaración en el archivo css también.

Here is the Link that i am sharing now Please refer to it.

Answer 7

propiedad Conjunto RepeatLayout = 'flujo' de CheckBoxList

Por defecto, el diseño de repetición se establece en 'Tabla', debido a que se trata de la nueva línea.

Si el diseño se establece en 'Flujo', las casillas de verificación se mostrarán en la misma línea.

Answer 8

Mientras este fue el primer eslabón de Google para esta pregunta - respuesta de publicar otra respondió a la pregunta Asp:CheckBox checkbox and text are not on the same line

pantalla de estilo simple: inline-block; arregla el problema Por supuesto, querrá mantener el archivo CSS, en lugar de las propiedades de control asp. :)

<asp:CheckBox style="display:inline-block;" ID="CheckBoxShowParameters" runat="server" Text="Show Parameters" /> 

Answer 9

Estaba teniendo un problema similar. Encontré una respuesta en otro desbordamiento de pila article que he pegado a continuación.

Quiere tener la pantalla: en línea aplicada al elemento que genera ASP para contener el texto de la etiqueta, no el control en sí.Así, por ejemplo:

<style type="text/css"> 
label { display: inline-block; } 
</style> 
<asp:CheckBox Text="This text appears on same line as checkbox" runat="server" /> 

Answer 10

.checkboxlist_nowrap 
{ 
white-space:nowrap; 
display:inline-block; 
} 

Answer 11

<asp:CheckBoxList ID="CheckBoxList1" runat="server" CssClass="checkboxlist_nowrap" RepeatDirection="Horizontal"> 

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

establecimiento Uso RepeatDirection. ¡Esto funcionó para mí!