28172 sujets

CSS et mise en forme, CSS3

Différence de masquage enter firefox et chrome !!

Bonsoir,
Comme vous pouvez le voir dans l'image suivante avec chrome j'arrive à un affichage correct qui masque l'accès et permet de changer un champ : statut
upload/1542386104-58614-image34358.png
avec le style suivant :
#editor > div:nth-child(2), #publishing > div:nth-child(2), #publishing > div:nth-child(5), #publishing > div:nth-child(6){
display:none
}


mais il fait apparaitre un autre champ et masque mon champ statut avec le même code !!
upload/1542386087-58614-image34359.png

comme s'il ne prenant pas encompte de la même façon div:nth-child(x)
@+
Modifié par HDcms (16 Nov 2018 - 17:39)
Bonsoir
ok cela fait du monde pour le HTML, avec source de Firefox avec l'onglet accès qui n'est pas masqué:
<div class="control-group form-group">
	      <div class="control-label">
		<label id="jform_com_fields_sports1-lbl" for="jform_com_fields_sports1">
	SPORTS1</label>      </div>
	    <div class="controls">
	  <div id="jform_com_fields_sports1" class="btn-group radio">

						
						<div class="form-check form-check-inline">
				<label for="jform_com_fields_sports10" class="form-check-label">
					<input type="radio" id="jform_com_fields_sports10" name="jform[com_fields][sports1]" value="art" class="form-check-input"> art martial				</label>
			</div>
					
						<div class="form-check form-check-inline">
				<label for="jform_com_fields_sports11" class="form-check-label">
					<input type="radio" id="jform_com_fields_sports11" name="jform[com_fields][sports1]" value="bad" class="form-check-input"> badminton				</label>
			</div>
					
						<div class="form-check form-check-inline">
				<label for="jform_com_fields_sports12" class="form-check-label">
					<input type="radio" id="jform_com_fields_sports12" name="jform[com_fields][sports1]" value="cou" class="form-check-input"> course à pied				</label>
			</div>
					
						<div class="form-check form-check-inline">
				<label for="jform_com_fields_sports13" class="form-check-label">
					<input type="radio" id="jform_com_fields_sports13" name="jform[com_fields][sports1]" value="esc" class="form-check-input"> escalade				</label>
			</div>
					
						<div class="form-check form-check-inline">
				<label for="jform_com_fields_sports14" class="form-check-label">
					<input type="radio" id="jform_com_fields_sports14" name="jform[com_fields][sports1]" value="gol" class="form-check-input"> golf				</label>
			</div>
					
						<div class="form-check form-check-inline">
				<label for="jform_com_fields_sports15" class="form-check-label">
					<input type="radio" id="jform_com_fields_sports15" name="jform[com_fields][sports1]" value="pin" class="form-check-input"> ping pong				</label>
			</div>
					
						<div class="form-check form-check-inline">
				<label for="jform_com_fields_sports16" class="form-check-label">
					<input type="radio" id="jform_com_fields_sports16" name="jform[com_fields][sports1]" value="plo" class="form-check-input"> plongée				</label>
			</div>
					
						<div class="form-check form-check-inline">
				<label for="jform_com_fields_sports17" class="form-check-label">
					<input type="radio" id="jform_com_fields_sports17" name="jform[com_fields][sports1]" value="ski" class="form-check-input"> ski de randonnée				</label>
			</div>
					
						<div class="form-check form-check-inline">
				<label for="jform_com_fields_sports18" class="form-check-label">
					<input type="radio" id="jform_com_fields_sports18" name="jform[com_fields][sports1]" value="sqa" class="form-check-input"> squash				</label>
			</div>
					
						<div class="form-check form-check-inline">
				<label for="jform_com_fields_sports19" class="form-check-label">
					<input type="radio" id="jform_com_fields_sports19" name="jform[com_fields][sports1]" value="ten" class="form-check-input"> tennis				</label>
			</div>
					
						<div class="form-check form-check-inline">
				<label for="jform_com_fields_sports110" class="form-check-label">
					<input type="radio" id="jform_com_fields_sports110" name="jform[com_fields][sports1]" value="alp" class="form-check-input"> alpinisme				</label>
			</div>
			</div>
    </div>
</div>
<div class="control-group form-group">
	      <div class="control-label">
		<label id="jform_com_fields_sports-lbl" for="jform_com_fields_sports" class="required">
	Sports<span class="star">&nbsp;*</span></label>      </div>
	    <div class="controls">
	  <select id="jform_com_fields_sports" name="jform[com_fields][sports]" class="required" required="required" aria-required="true">
	<option value="alp">alpinisme</option>
	<option value="art">art martial</option>
	<option value="bad">badminton</option>
	<option value="cou">course à pied</option>
	<option value="esc">escalade</option>
	<option value="gol">golf</option>
	<option value="pin">ping pong</option>
	<option value="plo">plongée</option>
	<option value="skir">ski de randonnée</option>
	<option value="sqa">squash</option>
	<option value="ten">tennis</option>
</select>
    </div>
</div>

</div>
			<div id="publishing" class="tab-pane active show" data-node="[publishing[">
				<div class="control-group form-group">
	      <div class="control-label">
		<label id="jform_catid-lbl" for="jform_catid" class="hasTooltip required" title="<strong>Catégorie</strong>">
	Catégorie<span class="star">&nbsp;*</span></label>      </div>
	    <div class="controls">
	  <select id="jform_catid" name="" data-custom_group_text="Nouvelles catégories" data-no_results_text="Ajouter une nouvelle catégorie" data-placeholder="Taper ou sélectionner une catégorie" class="inputbox required chzn-custom-value" required="required" aria-required="true" disabled="disabled" onchange="categoryHasChanged(this);" style="display: none;">
	<option value="2">Non catégorisé</option>
	<option value="9">Blog (en-gb) (en-GB)</option>
	<option value="10">Blog (fr-fr) (fr-FR)</option>
	<option value="34">Pages</option>
	<option value="35">zTests</option>
	<option value="37">Aide général (FAQ)</option>
	<option value="38">- Se connecter</option>
	<option value="39">- S'inscrire</option>
	<option value="40">- Evenement privé</option>
	<option value="41">- sortie, activité</option>
	<option value="104">Annonces</option>
	<option value="105" selected="selected">- Partenaire sportif</option>
</select><div class="chzn-container chzn-container-single chzn-disabled chzn-container-active" style="width: 100%;" title="" id="jform_catid_chzn"><a class="chzn-single"><span>- Partenaire sportif</span><div><b></b></div></a><div class="chzn-drop"><div class="chzn-search"><input type="text" autocomplete="off" disabled=""></div><ul class="chzn-results"></ul></div></div>
<input type="hidden" name="jform[catid]" value="105">    </div>
</div>
				<div class="control-group form-group">
	      <div class="control-label">
		<label id="jform_tags-lbl" for="jform_tags" class="hasPopover" title="" data-content="Ajouter ou supprimer des tags à cet élément. Il est possible de créer un nouveau tag en entrant le nom dans le champ puis en pressant la touche Enter." data-original-title="Tags">
	Tags</label>      </div>
	    <div class="controls">
	  <select id="jform_tags" name="jform[tags][]" class="inputbox" size="45" multiple="" style="display: none;">
</select><div class="chzn-container chzn-container-multi" style="width: 100%;" title="" id="jform_tags_chzn"><ul class="chzn-choices"><li class="search-field"><input type="text" value="Saisir ou choisir des options" class="default" autocomplete="off" style="width: 90px;"></li></ul><div class="chzn-drop"><ul class="chzn-results"></ul></div></div>
    </div>
</div>
									<div class="control-group form-group">
	      <div class="control-label">
		<label id="jform_version_note-lbl" for="jform_version_note" class="control-label hasPopover" title="" data-content="Saisir une note optionnelle pour cette version." data-original-title="Note de version" style="display: none;">
	Note de version</label>      </div>
	    <div class="controls">
	  

	
	<input type="text" name="jform[version_note]" id="jform_version_note" value="" class="form-control inputbox" size="45" title="Saisir une note optionnelle pour cette version." maxlength="255">

	

    </div>
</div>
																<div class="control-group form-group">
	      <div class="control-label">
		<label id="jform_access-lbl" for="jform_access" class="hasPopover" title="" data-content="Niveau d'accès pour ce contenu" data-original-title="Accès" style="display: none;" aria-invalid="false">
	Accès</label>      </div>
	    <div class="controls">
	  <select id="jform_access" name="jform[access]" class="inputbox" size="1" aria-invalid="false">
	<option value="7">Accès Gratuit</option>
	<option value="8">Accès payant Niv1</option>
	<option value="9">Accès payant Niv2</option>
	<option value="1" selected="selected">Accès public</option>
	<option value="5">Accès invité</option>
	<option value="2">Accès enregistré</option>
	<option value="3">Accès spécial</option>
	<option value="6">Accès super utilisateur</option>
</select>
    </div>
</div>

Pour le css, c'est celui que j'ai posté car par défaut aucun champ n'est masqué.
C'est donc celui que j'ai fais et qui est probablement incorrect !!?
@+
Modérateur
Bonjour,

La question reste floue Smiley smile .

Ceci dit, il y a au moins une erreur dans le html : la balise fermante </div> située avant <div id="publishing" class="tab-pane active show" data-node="[publishing["> semble ne pas avoir de balise ouvrante correspondante. On peut le voir facilement en utilisant firefox et en faisant afficher le code source de la page (les erreurs html sont montrées en rouge vif).

Il faudrait donc déjà s'assurer que les balises <div> sont bien au bon endroit dans le code html.

Amicalement,
Bonjour
Je n'ai donné qu'un extrait déjà long. Je pense que le code HTML est valide ar généré par un cms solide.
Je souhaitai avoir la réponse sur la différence de prise en compte entre ces 2 navigateurs. Ce qui me parait énorme
bon sinon de manière plus pragmatique, quels sont les standards actuels (oui qui passent avec la plupart des dernières versions des navigateurs principaux!).
Par ex;., pur masquer
<select id="jform_access" name="jform[access]" class="inputbox" size="1" aria-invalid="false">

@+
Modifié par HDcms (18 Nov 2018 - 13:44)
Modérateur
Bonjour,

J'imaginais bien qu'il s'agissait d'un extrait. Mais du coup, on ne peut pas trouver le bon remède.

Pour masquer un élément html, un display:none dans le css fait le travail très bien et partout.

S'il y a des différences entre navigateurs, une explication possible est que du fait d'une erreur dans ton code html, les navigateurs n'utilisent pas la même méthode pour s'en sortir (s'il n'y a pas d'erreur, ils produisent la même chose, mais s'il y en a, c'est aléatoire).

Mais pour le voir, il faudrait un exemple de code qui peut ne faire que 3 lignes et qui reproduit le phénomène que tu observes.

J'ai essayé avec le code que tu as fourni, et je n'ai pas réussi à voir de différence entre chrome et firefox.

Amicalement,
Modérateur
Bonjour,

Je suppose que la page qui pose problème est https://www.onsort.eu/fr/publier-annonce-partenaire-sportif et qu'il faut cliquer sur l'onglet "Publication".

J'ai exactement la même chose avec chrome et firefox.

Je vois dans les deux cas "Catégorie *", "Note de version" et "Accès".

Je ne vois pas "Statut".

Quel est le problème exactement ? (que dois-je faire pour le voir ?)

Au passage, as-tu bien vider les caches de tes navigateurs, surtout celui de Chrome qui a les crocs plus pointus que celui de firefox, ce qui explique parfois des différences d'affichage entre les deux navigateurs ?

Amicalement,
Bonsoir
Bon j'ai compris. En fait cela vient du fait qu'avec un cms , nous n'avons pas les mêmes champs de saisies qui sont affichés dans le navigateur selon le rôle du connecté.
D'ou ma méthode
 #publishing > div:nth-child(4)

va masquer des champs différents selon si je suis membre, auteur ...
Je redemande
comment masquer
<div class="control-group form-group">
	      <div class="control-label">
		<label id="jform_access-lbl" for="jform_access" class="hasPopover" title="" data-content="Niveau d'accès pour ce contenu" data-original-title="Accès" style="display: none;" aria-invalid="false">
	Accès</label>      </div>
	    <div class="controls">
	  <select id="jform_access" name="jform[access]" class="inputbox" size="1" aria-invalid="false">
	<option value="7">Accès Gratuit</option>
	<option value="8">Accès payant Niv1</option>
	<option value="9">Accès payant Niv2</option>
	<option value="1" selected="selected">Accès public</option>
	<option value="5">Accès invité</option>
	<option value="2">Accès enregistré</option>
	<option value="3">Accès spécial</option>
	<option value="6">Accès super utilisateur</option>
</select>
    </div>
</div>

j'ai essayé
 #publishing #jform_access-lbl

mais cela ne fonctionne pas
Cordialement
Modifié par HDcms (22 Nov 2018 - 17:52)
Modérateur
Bonjour,

1) tu repères le parent du div que tu veux masquer (car si je comprends bien, il s'agit d'un <div class="control-group form-group"> qui n'a pas d'id). Le parent semble être le div ayant pour id "publishing".
2) tu comptes le nombre de div qui ont le même parent que celui que tu veux masquer et qui sont avant celui que tu veux masquer. Tu en déduis la position de ton div: il semble s'agir ici du 6e fils du div ayant pour id "publishing" dans le cas de la page que j'ai pu voir.
3) dans le css, tu ajoutes alors par exemple:

#publishing:nth-child(6) {display:none;}


S'il n'y a pas de piège, ça va le cacher.

Maintenant, s'il n'y a pas le même nombre de div selon les profils des utilisateurs, il faudrait rajouter un id ou une classe dans le html à chaque <div class="control-group form-group"> de manière à pouvoir cibler ceux que tu veux cacher.

Eventuellement, tu peux à la place ajouter une information au div qui a l'id "publishing" dépendant du rôle de l'utilisateur. Si par exemple tu as comme catégories d'utilisateurs, "membre", "auteur", "...", il faudrait se débrouiller pour avoir dans le code html pour ceux qui sont "membre" <div id="publishing" class="tab-pane" data-node="[publishing[" data-role="membre">, et de même pour les autres rôles.

Si pour un utilisateur "membre", le div à cacher est le 4e, on le cible par :

#publishing[data-role="membre"]:nth-child(4) {display:none;}


Si pour un utilisateur "auteur", le div à cacher est le 6e, on le cible par :

#publishing[data-role="auteur"]:nth-child(6) {display:none;}


Amicalement,
Modifié par parsimonhi (02 Dec 2018 - 13:47)
Sujet clos
Aller à