28172 sujets

CSS et mise en forme, CSS3

Largeur d'éléments dans un formulaire

Bonjour
Je butte sur un problème important de mise en forme. Dans le formulaire
https://joom41test.88h.ovh/index.php/crea-art
j'ai des champs de saisies qui sont grands (url) et d'autres qui sont écrasés (date url & note) !
Comment faire pour fixer une largeur (responsive) à chacun de ces champs, en tenant compte qu'il peut y avoir plusieurs lignes?
Modifié par HDcms (09 Mar 2022 - 15:42)
Salut,

On parle bien de l'onglet "Autres infos" ?

Tu as un bout de code relativement bizarre à cette endroit la avec des tables / tr / th / td , et pour le th tu as 4 fois des width de 45% et une dernière de 8% ce qui semble faire nettement p lus que 100% en cumulé Smiley ohwell

Et en info complémentaire, je ne pige pas vraiment pourquoi tu utilises des tables (c'est censé être réservé à l'affichage d'un vrai tableau de données Smiley sweatdrop )

Bon courage
Salut
Effectivement j'oublie a chaque fois de dire que c'est le cms (joomla dans ce cas) qui génère et traite le formulaire)
J'ai changé l'url car je dois mettre l'autre site en production rapidement et pas sûr de la résolution rapide.
Les champs sont maintenant dans l'onglet "champs"
Bon finalement, j'ai bien avancé sur le site en cours
https://v2.clibre.eu/fr/proposer-logiciel-libre
en mettant
input[type="url"] {
  width: auto;
}
#jform_com_fields__urls_liees_ressource__row0__field40 , #jform_com_fields__urls_liees_ressource__row0__field41  {
  width: auto;
}

j'imagine que c'est améliorable et notamment pour
a) diminuer l'espace entre les champs de saisie
b) d'autre part pour diminuer la taille d uchamp date et si possible augmentez la taille du champ url et note
Mais là je sèche sur les grandeurs d'autant qu'il faut rester responsive partout ?
Pour moi il faut juste enlever les width:45% et 8% qu'il y a dans les th (à la limite garder un 15% pour rétrécir le champ date par rapport aux autres)

En gros c'est cohérent pour le 2e tableau qui fait 45 45 8 (donc on est juste sous les 100%) mais ce n'est pas le cas pour le premier qui a plus de champs car tu te retrouves à avoir 4 fois 45% et une fois 8% Smiley ohwell

Une fois que c'est fait tes modifications et le select avec forcement une width de 250px m'ont l'air contre-productif Smiley ohwell
Bonjour
Bon j'ai essayé avec les indications mais je ne suis pas arrivé à quelque chose de satisfaisant. je voudrai le moins d'espace possible entre les champs principalement.
Je n'arrive pas vraiment à jouer sur les th.
Voici ce que j'ai mis sur le site que j'ai passé en production https://www.clibre.eu/fr/proposer-un-art-autour-du-numerique 

input[type="url"] {
 width: auto;
    max-width: 100%;
 /* width: auto;*/
}
#jform_com_fields__urls_liees_ressource__row0__field40 , #jform_com_fields__urls_liees_ressource__row0__field41  {
 width: auto;
}
#subfieldList_jform_com_fields_urls_liees_ressource th {
width: auto;
}
#subfieldList_jform_com_fields_urls_liees_ressource td {
width: auto;
}

 .layout-edit select {
    width: auto;
    max-width: 100%;
}

Modifié par HDcms (17 Mar 2022 - 12:14)
Sujet clos
Aller à