ASP.Net CheckBoxList Couleur de fond

Question

J'ai un CheckBoxList sur ASPX

<asp:CheckBoxList ID="cblCalendarFilter" runat="server" /> 

ajouter les listItems de code derrière.

newCkItm = new ListItem(); 
newCkItm.Text = childrenFoldersData[i].Description.Trim(); 
newCkItm.Value = childrenFoldersData[i].Id.ToString().Trim(); 
newCkItm.Selected = true; 

je peux ajouter par

newCkItm.Attributes.Add("style", "background-color:Red;"); 

l'arrière-plan de la ListItem Les couleurs seront différentes d'un élément à l'autre et le nom de l'élément sera également différent. Donc, le problème est que la couleur de fond ne couvre que la longueur du texte. La couleur d'arrière-plan n'est pas alignée pour tous les éléments. J'ai vérifié avec l'inspecteur et a trouvé que ..

• Le style de couleur de fond applique à <span> entourant le texte
• Toutes les portées sont à l'intérieur du <td>.

Je me demande s'il existe un moyen d'appliquer ce style à <td> sans trop d'efforts. Je préfère ne pas utiliser jquery et javascript en cherchant le nom.

Y a-t-il un moyen de le faire?

Answer 1

Au lieu d'ajouter un attribut de style à chaque élément, et parce que vous avez mentionné chaque élément a besoin d'une couleur de fond différente, je rajouterais un id attribut:

newCkItm.Attributes.Add("id", "alpha"); 

de cette façon, vous pouvez garder tous vos styles séparer de votre code et ne pas avoir à recompiler, etc. chaque fois que vous devez modifier le CSS.

Avec le <asp:CheckBoxList /> le CSS se ressemblerait à quelque chose comme ceci:

#cblCalendarFilter { 
    border:none; 
    border-collapse:collapse; 
} 

#cblCalendarFilter td { 
    padding:0; 
} 

#cblCalendarFilter span { 
    display:block; 
    padding:2px; 
} 

#cblCalendarFilter #alpha { 
    background:red; 
} 

#cblCalendarFilter #beta { 
    background:yellow; 
} 

Il faut espérer faire le niveau bloc SPAN résoudre le problème que vous aviez avec la couleur d'arrière-plan ne couvre que la longueur du texte.

Answer 2

Que diriez-vous si vous utilisez un répéteur qui a tr/td avec CheckBox à l'intérieur et faire la logique de l'événement ItemDataBound où vous pouvez récupérer le td:

<table> 
    <asp:Repeater ID="rpt" runat="server" OnItemDataBound="rpt_ItemDataBound"> 
     <ItemTemplate> 
      <tr> 
       <td id="myTd" runat="server"> 
        <asp:CheckBox runat="server" ID="myCheckBox" /> 
       </td> 
      </tr> 
     </ItemTemplate> 
    </asp:Repeater> 
</table> 

Answer 3

Je pense qu'il n'y a pas d'autre moyen, vous devez accéder individuellement à l'élément et affecter le CSS aux éléments. J'ai tendance à utiliser la boucle foreach, accéder à l'élément et ajouter des attributs. TBH, je resterais avec checkboxlist par rapport à répéteur, sauf si j'ai besoin de fonctionnalités supplémentaires

Answer 4

J'ai essayé et trouvé cette solution & cela a fonctionné pour moi.

juste essayer de donner padding-right par exemple:

newCkItm.Attributes.Add("style", "background-color:Red;padding-right:30px");