web-dev-qa-db-fra.com

Comment mettre en retrait plusieurs niveaux de select optgroup avec CSS?

J'essaie juste d'indenter des blocs optgroup en imbriquant des profondeurs. J'ai essayé une règle générale margin-left, des éléments imbriqués puis une application de la même règle. J'ai essayé padding-left... L'indentation est-elle possible? Il semble élémentaire: P

Dans l'exemple ci-dessous, l'optgroup nommé 'client2_a' devrait être mis en retrait plus que les autres, car il est imbriqué dans 'client2'.

http://jsfiddle.net/Tb5Rc/5/

htmlcssselectindentationoptgroup
14
danjah

8/29/2016 Modifier

La réponse originale ci-dessous n'est plus fonctionnelle dans les navigateurs modernes. Pour ceux qui ont encore besoin d'utiliser une balise au lieu de faire de la magie avec les listes HTML, une meilleure solution a été trouvée sur ce thread de stackoverflow: Rendu d'une hiérarchie de "OPTION" dans une balise "SELECT"

Je recommanderais la solution proposée par igor-krupitsky qui suggère de laisser tomber & nbsp; et en utilisant le binaire à la place. Du moins sur Chrome, l'utilisation du clavier pour rechercher le premier caractère d'un élément de la liste ne se rompt pas.

Fin éditer

La spécification HTML actuelle ne fournit pas de balises imbriquées ajoutant une fonctionnalité (telle que l'indentation). Voir ce lien .

En attendant, vous pouvez styliser manuellement vos niveaux avec CSS. J'ai essayé d'utiliser des styles dans votre échantillon, mais pour une raison quelconque, ils ne sont pas restitués correctement. Par conséquent, les éléments suivants fonctionnent au minimum:

<select name="select_projects" id="select_projects">
        <option value="">project.xml</option>
        <optgroup label="client1">
            <option value="">project2.xml</option>
        </optgroup>
        <optgroup label="client2">
            <option value="">project5.xml</option>
            <option value="">project6.xml</option>
            <optgroup label="client2_a">
                <option value="" style="margin-left:23px;">project7.xml</option>
                <option value="" style="margin-left:23px;">project8.xml</option>
            </optgroup>
            <option value="">project3.xml</option>
            <option value="">project4.xml</option>
       </optgroup>
       <option value="">project0.xml</option>
       <option value="">project1.xml</option>
    </select>

J'espère que cela pourra aider.

21
eliel

C'est incroyablement simple que le style. La réponse m'est venue après de longues heures de galère :)). Les balises optgroup et option définissent actuellement des chaînes en lecture seule. Donc, pour que vous puissiez mettre en retrait le contenu d’optgroup ou d’options, il vous suffit d’utiliser un simple espace dans les noms ou &nbsp.

C'est si simple :) !

16
lucian

En guise d'addition à la réponse de lucian, les nouvelles versions de Chrome ne semblent pas prendre en charge l'intégration de &nbsp; dans le texte. Il montrera réellement l'esperluette, etc. au lieu de vous laisser l'espace insécable. Cependant, j’ai constaté que l’utilisation de la version unicode de l’espace insécable continuerait à fonctionner correctement.

J'utilise Scala, donc j'ai simplement pu avoir "\u00A0" dans mon code côté serveur. Vous pourriez probablement coller le caractère unicode directement dans votre code mais je ne le recommanderais pas (simplement parce qu'il serait si difficile de dire que ce n'est pas un espace normal).

Une bonne chose est que Chrome au moins ignorera les espaces en termes de navigation au clavier. Si j'ai une option nommée Test, taper t déplacera le surlignage directement vers elle, quel que soit le nombre d'espaces insécables qui le précèdent.

5
ShawnFumo

Ajoutez au css ceci:

option {
text-indent: 10px; 
}

Terminé.

0
FollaPijas