Mise en forme d'un RadioButtonList

Version imprimable

30/01/2022, 23h20
Paul Van Walleghem

1 pièce(s) jointe(s)

Mise en forme d'un RadioButtonList

Bonjour,

J'ai créé un RadioButtonList en code behind. Le texte de chacun de ses ListItem s'étend sur deux lignes.
1) Comment puis-je aligner la ligne du dessous sur la ligne de dessus ?
2) Est-il possible de définir la couleur des boutons radio ?

Merci beaucoup
31/01/2022, 13h32
popo

Ceci pourrait t'intéresser.
Et notamment l'appel avec TextFormatFlag.
https://docs.microsoft.com/en-us/dot...tframework-4.8
https://docs.microsoft.com/en-us/dot...tframework-4.8
31/01/2022, 15h22
Paul Van Walleghem

Oui, ça m'aide bien pour orienter mes recherches et améliorer le rendu du côté du navigateur client. Cependant, si vous me le permettez, ce sont des classes et des méthodes de
System.Windows.Forms. Auront-elles un impact dans le contexte Web ?
31/01/2022, 18h38
popo

Mea culpa.
J'ai répondu en pensant que j'étais dans une partie du forum.

Du coup ces liens ne vous serviront à rien.
Par contre comme toute application Web, vous pouvez changer l'apparence avec du CSS.
01/02/2022, 10h25
Paul Van Walleghem

Oui, d'accord pour l'utilisation de CSS. Mais la question est de savoir quelles propriétés CSS influencent la mise en forme des ListItems d'un RadioButtonList ? Comme ceux-ci ne semblent pas être traités comme des paragraphes (ce qui paraît logique), des propriétés comme "margin-left" ou "text-indent" n'ont pas d'effet sur l'apparence des ListItems.

Vu qu'un RadioButtonList est un contrôle ASP.NET, je me demande si des propriétés CSS spécifiques lui sont dédiées et lesquelles.
01/02/2022, 12h09
popo

Cela va dépendre du code HTML généré qui lui même va dépendre de votre code C#.
Sans savoir de quoi on part, il va être difficile de vous aider.

Edit :
Ceci semble répondre à votre besoin :
https://social.msdn.microsoft.com/Fo...um=aspwebforms

En fait, j'écris en vb.net. Ma fonction est la suivante:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
    ''' <summary>
    ''' Obtient une nouvelle RadioButtonList pour valider les réponses
    ''' </summary>
 
    Private Function GetNewRadioButtonListValidRep() As RadioButtonList
        Dim radioList As RadioButtonList = New RadioButtonList
        Dim itemPlusTard As New ListItem
        Dim itemValider As New ListItem
        With itemPlusTard
            .Attributes.CssStyle.Add("margin-left", "1.5em")
            .Attributes.CssStyle.Add("text-indent", "-1.5em")
            .Attributes.CssStyle.Add("line-height", "1.5em")
            .Selected = True
            .Text = "Je n'ai pas répondu à toutes les questions et je reviens les compléter plus tard"
            .Value = "False"
        End With
        With itemValider
            .Attributes.CssStyle.Add("margin-left", "1.5em")
            .Attributes.CssStyle.Add("text-indent", "-1.5em")
            .Attributes.CssStyle.Add("line-height", "1.5em")
            .Selected = False
            .Text = "J'ai terminé de répondre au questionnaire et je supprime mon identifiant"
            .Value = "True"
        End With
        With radioList
            .Items.Add(itemPlusTard)
            .Items.Add(itemValider)
            .TabIndex = 0
            '.CssClass = "Sauvegarde"
            .RepeatLayout = RepeatLayout.Flow
        End With
        Return radioList
    End Function

01/02/2022, 15h52
popo
J'ai l'impression que votre problème provient styles que vous appliquez.
Vous décalez le bouton vers la droite et décalez son texte vers la gauche.
Avez-vous essayez d'enlever tout ça pour laisser le moteur gérer lui-même le placement.
Code:

1 2 3 .Attributes.CssStyle.Add("margin-left", "1.5em") .Attributes.CssStyle.Add("text-indent", "-1.5em") .Attributes.CssStyle.Add("line-height", "1.5em")
De plus, le fait que fassiez du VB ne change rien.
Si vous faites réellement de l'Asp.Net, le fait de rajouter une classe sur le RadioButtonList (et bien entendu de décrire cette classe CSS quelque part) devrait faire le job
02/02/2022, 10h50
Paul Van Walleghem

1 pièce(s) jointe(s)

Bonjour,
D'abord, un grand merci pour vos réponses.

En fait, si je ne mets pas de CSS, voici l'image du RadioButtonList.
Pièce jointe 612920

La deuxième ligne de chaque item s'aligne sur le bouton et pas sur le texte. Or, ce n'est peut-être qu'une question subjective de goût, mais je garde l'impression que le RadioButtonList gagnerait en lisibilité si la deuxième ligne était alignée sur le texte de la première, et pas sur le bouton. C'est pourquoi je fait un "text-indent" négatif. Le "margin-left" m'est apparût utile pour que les boutons ne soient pas collés au bord de la fenêtre du navigateur.

Cependant, aucune de ces propriétés influence la mise en forme du contrôle. Tandis que "line-height" joue bien son rôle. Pourquoi ? Auriez-vous une idée ?
02/02/2022, 12h55
popo

Vous n'avez pas compris le rôle de text-indent.
La propriété text-indent définit la longueur qui doit être laissée avant le début de la première ligne d'un élément contenant du texte.

Plus de détail ici :
https://developer.mozilla.org/fr/doc...SS/text-indent

En lui fournissant une valeur négative, vous décalez le texte vers la gauche (ce qui est l'inverse de ce que vous souhaitez faire).

Je reste persuadé que le lien que je vous ai fourni est la solution à votre problème.
Mais puisque vous ne fournissez toujours pas le HTML généré, il est compliqué de vous fournir un CSS adapté.
02/02/2022, 17h51
Paul Van Walleghem

Excusez-moi, je n'avais pas vu votre lien, je viens de l'ouvrir. Vous avez certainement raison, il va me permettre de résoudre le problème. C'est le même cas de figure en tous cas.
Je vous remercie beaucoup de m'avoir guidé.
Sincères salutations,