Incorporer le partage embed-share

L’outil de partage intégré est constitué d’un bouton ajouté au panneau Partage sur les réseaux sociaux et de la boîte de dialogue modale qui s’affiche lorsque l’outil est activé. La position du bouton est entièrement gérée par l’outil Partage sur les réseaux sociaux .

L’aspect du bouton d’intégration du partage est contrôlé à l’aide du sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7embedshare

Propriétés CSS de l’outil de partage intégré

width
Largeur du bouton.
height
Hauteur du bouton.
background-image
Image affichée pour un état de bouton donné.
arrière-plan-position

Position dans l’objet d’illustration, si des sprites CSS sont utilisés.

Voir aussi Sprites CSS.

NOTE
Ce bouton prend en charge state sélecteur d’attributs qui peut être utilisé pour appliquer différents habillages à différents états de bouton.

Il est possible de supprimer le bouton du panneau Partage sur les réseaux sociaux en définissant display:none Propriété CSS sur sa classe CSS.

L’info-bulle de bouton peut être localisée. Voir Localisation des éléments de l’interface utilisateur pour plus d’informations.

Exemple : pour configurer un bouton de partage incorporé de 28 x 28 pixels et afficher une image différente pour chacun des quatre états de bouton différents :

.s7ecatalogsearchviewer .s7embedshare {
 width:28px;
 height:28px;
}
.s7ecatalogsearchviewer .s7embedshare[state='up'] {
background-image:url(images/v2/EmbedShare_dark_up.png);
}
.s7ecatalogsearchviewer .s7embedshare[state='over'] {
background-image:url(images/v2/EmbedShare_dark_over.png);
}
.s7ecatalogsearchviewer .s7embedshare[state='down'] {
background-image:url(images/v2/EmbedShare_dark_down.png);
}
.s7ecatalogsearchviewer .s7embedshare[state='disabled'] {
background-image:url(images/v2/EmbedShare_dark_disabled.png);
}

La superposition en arrière-plan qui couvre la page web lorsque la boîte de dialogue est active est contrôlée avec le sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7embeddialog .s7backoverlay

Propriétés CSS de la superposition en arrière-plan

opacité
Opacité du recouvrement en arrière-plan.
arrière-plan-couleur
Couleur de superposition de l’arrière-plan.

Exemple : pour configurer une superposition en arrière-plan de sorte qu’elle soit grise avec une opacité de 70 % :

.s7ecatalogsearchviewer .s7embeddialog .s7backoverlay {
 opacity:0.7;
 background-color:#222222;
}

Par défaut, la boîte de dialogue modale s’affiche centrée dans l’écran sur les systèmes de bureau et occupe l’ensemble de la zone de page web sur les appareils tactiles. Dans tous les cas, le positionnement et le dimensionnement de la boîte de dialogue sont gérés par le composant. La boîte de dialogue est contrôlée avec le sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7embeddialog .s7dialog

Propriétés CSS de la boîte de dialogue

border-radius
Rayon de bordure de la boîte de dialogue, au cas où la boîte de dialogue ne prendrait pas l’intégralité du navigateur.
arrière-plan-couleur
Couleur de fond de la boîte de dialogue.
width
doit être désactivée ou définie sur 100 %, auquel cas la boîte de dialogue s’ouvre sur l’ensemble de la fenêtre du navigateur (ce mode est préférable sur les appareils tactiles).
height
doit être désactivée ou définie sur 100 %, auquel cas la boîte de dialogue s’ouvre sur l’ensemble de la fenêtre du navigateur (ce mode est préférable sur les appareils tactiles).

Exemple : pour configurer la boîte de dialogue afin d’utiliser toute la fenêtre du navigateur et d’avoir un arrière-plan blanc sur les appareils tactiles :

.s7ecatalogsearchviewer .s7touchinput .s7embeddialog .s7dialog {
 width:100%;
 height:100%;
background-color: #ffffff;
}

L’en-tête de la boîte de dialogue se compose d’une icône, d’un texte de titre et d’un bouton de fermeture. Le conteneur d’en-tête est contrôlé avec

.s7ecatalogsearchviewer .s7embeddialog .s7dialogheader

Propriétés CSS de l’en-tête de la boîte de dialogue

remplissage
Marge intérieure du contenu de l’en-tête.

L’icône et le texte du titre sont placés dans un conteneur supplémentaire contrôlé par

.s7ecatalogsearchviewer .s7embeddialog .s7dialogheader .s7dialogline

Propriétés CSS de la ligne de dialogue

remplissage
Marge intérieure de l’icône et du titre de l’en-tête

L’icône d’en-tête est contrôlée avec le sélecteur de classe CSS suivant

.s7ecatalogsearchviewer .s7embeddialog .s7dialogheadericon

Propriétés CSS de l’icône d’en-tête de la boîte de dialogue

width
Largeur de l’icône.
height
Hauteur de l’icône.
background-image
Image de l’icône.
arrière-plan-position

Position dans l’objet d’illustration, si des sprites CSS sont utilisés.

Voir aussi Sprites CSS.

Le titre d’en-tête est contrôlé à l’aide du sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7embeddialog .s7dialogheadertext

Propriétés CSS du texte de l’en-tête de la boîte de dialogue

font-weight
Poids de police.
font-size
Hauteur de la police.
font-family
Famille de polices.
remplissage
Marge intérieure du texte interne.

Le bouton Fermer est contrôlé à l’aide du sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7embeddialog .s7closebutton

Propriétés CSS du bouton de fermeture ​

haut
Position verticale des boutons par rapport au conteneur d’en-tête.
droite
Position du bouton horizontal par rapport au conteneur d’en-tête.
width
Largeur du bouton.
height
Hauteur du bouton.
remplissage
Marge intérieure du bouton.
background-image
Image de bouton pour chaque état.
arrière-plan-position

Position dans l’objet d’illustration, si des sprites CSS sont utilisés.

Voir aussi Sprites CSS.

NOTE
Ce bouton prend en charge state sélecteur d’attributs qui peut être utilisé pour appliquer différents habillages à différents états de bouton.

L’info-bulle de bouton peut être localisée. Voir Localisation des éléments de l’interface utilisateur pour plus d’informations.

Exemple : pour configurer un en-tête de boîte de dialogue avec marge intérieure, une icône de 24 x 14 pixels et un titre de 16 points en gras. Enfin, un bouton Fermer de 28 x 28 pixels, positionné deux pixels du haut, et deux pixels à droite du conteneur de la boîte de dialogue :

.s7ecatalogsearchviewer .s7embeddialog .s7dialogheader {
 padding: 10px;
}
.s7ecatalogsearchviewer .s7embeddialog .s7dialogheader .s7dialogline {
 padding: 10px 10px 2px;
}
.s7ecatalogsearchviewer .s7embeddialog .s7dialogheadericon {
    background-image: url("images/sdk/dlgembed_cap.png");
    height: 14px;
    width: 24px;
}
.s7ecatalogsearchviewer .s7embeddialog .s7dialogheadertext {
    font-size: 16pt;
    font-weight: bold;
    padding-left: 16px;
}
.s7ecatalogsearchviewer .s7embeddialog .s7closebutton {
 top:2px;
 right:2px;
 padding:8px;
 width:28px;
 height:28px;
}
.s7ecatalogsearchviewer .s7embeddialog .s7closebutton[state='up'] {
 background-image:url(images/sdk/close_up.png);
}
.s7ecatalogsearchviewer .s7embeddialog .s7closebutton[state='over'] {
 background-image:url(images/sdk/close_over.png);
}
.s7ecatalogsearchviewer .s7embeddialog .s7closebutton[state='down'] {
 background-image:url(images/sdk/close_down.png);
}
.s7ecatalogsearchviewer .s7embeddialog .s7closebutton[state='disabled'] {
 background-image:url(images/sdk/close_disabled.png);
}

Le pied de page de la boîte de dialogue se compose du bouton "Annuler". Le conteneur de pied de page est contrôlé à l’aide du sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7embeddialog .s7dialogfooter

Propriétés CSS du pied de page de la boîte de dialogue ​

bordure
Bordure permettant de séparer visuellement le pied de page du reste de la boîte de dialogue.

Le pied de page comporte un conteneur interne qui conserve le bouton. Il est contrôlé à l’aide du sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7embeddialog .s7dialogbuttoncontainer

Propriétés CSS du conteneur de boutons de la boîte de dialogue

remplissage
Marge intérieure entre le pied de page et le bouton.

Le bouton Tout sélectionner est contrôlé à l’aide du sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7embeddialog .s7dialogactionbutton

Ce bouton n’est disponible que sur les ordinateurs de bureau.

Propriétés CSS du bouton Tout sélectionner

width
Largeur du bouton.
height
Hauteur du bouton.
color
Couleur de texte des boutons pour chaque état.
arrière-plan-couleur
Couleur d’arrière-plan du bouton pour chaque état.
NOTE
Le bouton Tout sélectionner prend en charge la variable state sélecteur d’attributs qui peut être utilisé pour appliquer différents habillages à différents états de bouton.

Le bouton Annuler est contrôlé à l’aide du sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7embeddialog .s7dialogcancelbutton

Propriétés CSS du bouton Annuler de la boîte de dialogue

width
Largeur du bouton.
height
Hauteur du bouton.
color
Couleur de texte des boutons pour chaque état.
arrière-plan-couleur
Couleur d’arrière-plan du bouton pour chaque état.
NOTE
Ce bouton prend en charge state sélecteur d’attributs qui peut être utilisé pour appliquer différents habillages à différents états de bouton.

En outre, les deux boutons partagent une classe CSS commune, qui peut contenir des paramètres CSS identiques pour les autres boutons de boîte de dialogue :

.s7ecatalogsearchviewer .s7embeddialog .s7dialogfooter .s7button

Propriétés CSS du bouton

font-weight
Poids de police du bouton.
font-size
Taille de police du bouton.
font-family
Famille de polices de bouton.
line-height
Hauteur du texte dans le bouton. Affecte l’alignement vertical.
box-shadow
Abandonner l'ombre.
margin-right
Marge du bouton droit.

L’info-bulle de bouton peut être localisée. Voir Localisation des éléments de l’interface utilisateur pour plus d’informations.

Exemple : pour configurer un pied de page de boîte de dialogue avec un bouton Annuler 64 x 34, un bouton Tout sélectionner 82 x 34, avec une couleur de texte et une couleur d’arrière-plan différentes pour chaque état de bouton :

.s7ecatalogsearchviewer .s7embeddialog .s7dialogfooter {
    border-top: 1px solid #909090;
}
.s7ecatalogsearchviewer .s7embeddialog .s7dialogbuttoncontainer {
    padding-bottom: 6px;
    padding-top: 10px;
}
.s7ecatalogsearchviewer .s7embeddialog .s7dialogfooter .s7button {
    box-shadow: 1px 1px 1px #999999;
    color: #FFFFFF;
    font-size: 9pt;
    font-weight: bold;
    line-height: 34px;
    margin-right: 10px;
}
.s7ecatalogsearchviewer .s7embeddialog .s7dialogcancelbutton {
 width:64px;
 height:34px;
}
.s7ecatalogsearchviewer .s7embeddialog .s7dialogcancelbutton[state='up'] {
 background-color:#666666;
 color:#dddddd;
}
.s7ecatalogsearchviewer .s7embeddialog .s7dialogcancelbutton[state='down'] {
 background-color:#555555;
 color:#ffffff;
}
.s7ecatalogsearchviewer .s7embeddialog .s7dialogcancelbutton[state='over'] {
 background-color:#555555;
 color:#ffffff;
}
.s7ecatalogsearchviewer .s7embeddialog .s7dialogcancelbutton[state='disabled'] {
 background-color:#b2b2b2;
 color:#dddddd;
}
.s7ecatalogsearchviewer .s7embeddialog .s7dialogactionbutton {
 width:82px;
 height:34px;
}
.s7ecatalogsearchviewer .s7embeddialog .s7dialogactionbutton[state='up'] {
 background-color:#333333;
 color:#dddddd;
}
.s7ecatalogsearchviewer .s7embeddialog .s7dialogactionbutton[state='down'] {
 background-color:#222222;
 color:#cccccc;
}
.s7ecatalogsearchviewer .s7embeddialog .s7dialogactionbutton[state='over'] {
 background-color:#222222;
 color:#cccccc;
}
.s7ecatalogsearchviewer .s7embeddialog .s7dialogactionbutton[state='disabled'] {
 background-color:#b2b2b2;
 color:#dddddd;
}

La zone de dialogue principale (entre l’en-tête et le pied de page) contient le contenu de la boîte de dialogue défilante et le panneau de défilement à droite. Dans tous les cas, le composant gère la largeur de cette zone. Il n’est pas possible de la définir dans CSS. La zone de boîte de dialogue principale est contrôlée avec le sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7embeddialog .s7dialogviewarea

Propriétés CSS de la zone d’affichage de la boîte de dialogue ​

height
Hauteur de la zone de boîte de dialogue principale. Elle doit être spécifiée uniquement lorsque la boîte de dialogue fonctionne en mode bureau. Cela ne s’applique pas lorsque la boîte de dialogue est dimensionnée pour occuper toute la fenêtre du navigateur.
arrière-plan-couleur
Couleur d’arrière-plan de la zone de boîte de dialogue principale.
margin
Marge extérieure.

Exemple : pour configurer une zone de boîte de dialogue principale d’une hauteur de 300 pixels, définissez une marge de dix pixels et utilisez un arrière-plan blanc :

.s7ecatalogsearchviewer .s7embeddialog .s7dialogviewarea {
 background-color:#ffffff;
 margin:10px;
 height:300px;
}

Tout le contenu du formulaire (comme les libellés et les champs de saisie) se trouve dans un conteneur contrôlé par le sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7embeddialog .s7dialogbody

Si la hauteur de ce conteneur semble supérieure à la zone de boîte de dialogue principale, un défilement vertical est activé automatiquement par le composant.

Propriétés CSS du corps de la boîte de dialogue ​

remplissage
Marge intérieure.

Exemple : pour configurer le contenu d’un formulaire avec une marge intérieure de dix pixels :

.s7ecatalogsearchviewer .s7embeddialog .s7dialogbody {
    padding: 10px;
}

Tous les libellés statiques du formulaire de boîte de dialogue sont contrôlés par

.s7ecatalogsearchviewer .s7embeddialog .s7dialoglabel

Cette classe ne convient pas au contrôle de la taille ou de la position des libellés, car vous pouvez l’appliquer à des textes situés à différents endroits de l’interface utilisateur du formulaire.

Propriétés CSS du libellé de la boîte de dialogue. ​

font-weight
Etiqueter le poids de la police.
font-size
Étiqueter la taille de la police.
font-family
Étiqueter la famille de polices.
color
Couleur du texte du libellé.

Les libellés des boîtes de dialogue peuvent être localisés. Voir Localisation des éléments de l’interface utilisateur pour plus d’informations.

Exemple : pour configurer toutes les étiquettes en gris, en gras avec une police de neuf pixels :

.s7ecatalogsearchviewer .s7embeddialog .s7dialoglabel {
    color: #666666;
    font-size: 9pt;
    font-weight: bold;
}

La taille de la copie de texte affichée en haut du code incorporé est contrôlée par le sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7embeddialog .s7dialoginputwide

Propriétés CSS du champ d’entrée de la boîte de dialogue

width
Largeur du champ de saisie.
remplissage
Marge intérieure.

Exemple : pour définir une copie de texte de 430 pixels de large et une marge intérieure de dix pixels en bas :

.s7ecatalogsearchviewer .s7embeddialog .s7dialoginputwide {
    padding-bottom: 10px;
    width: 430px;
}

Le code incorporé est encapsulé dans un conteneur et contrôlé à l’aide du sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7embeddialog .s7dialoginputcontainer

Propriétés CSS du conteneur d’entrée de la boîte de dialogue

width
Largeur du conteneur de code incorporé.
bordure
Bordure autour du conteneur de code incorporé.
remplissage
Marge intérieure.

Exemple : pour définir une bordure grise d’un pixel autour du texte du code incorporé, faites-la 430 pixels de large et faites dix pixels de remplissage :

.s7ecatalogsearchviewer .s7embeddialog .s7dialoginputcontainer {
    border: 1px solid #CCCCCC;
    padding: 10px;
    width: 430px;
}

Le texte du code incorporé réel est contrôlé à l’aide du sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7embeddialog .s7dialoginputcontainer

Propriétés CSS du conteneur d’entrée de la boîte de dialogue

word-wrap
Style d’encapsulation de mot.

Exemple - Pour configurer le code incorporé à utiliser break-word retour à la ligne :

.s7ecatalogsearchviewer .s7embeddialog .s7dialogmessage {
    word-wrap: break-word;
}

Le libellé de taille d’incorporation et la liste déroulante se trouvent au bas de la boîte de dialogue et sont placés dans un conteneur contrôlé à l’aide du sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7embeddialog .s7dialogembedsizepanel

Propriétés CSS du panneau Taille de la boîte de dialogue intégrée

remplissage
Marge intérieure.

Exemple : pour configurer un panneau de taille d’incorporation afin qu’il ait dix pixels de remplissage :

.s7ecatalogsearchviewer .s7embeddialog .s7dialogembedsizepanel {
    padding: 10px;
}

La taille et l’alignement du libellé de taille d’intégration sont contrôlés avec le sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7embeddialog .s7dialogembedsizepanel

Propriétés CSS du panneau Taille de la boîte de dialogue intégrée

alignement vertical
Alignement vertical des libellés.
width
Largeur du libellé.

Exemple : pour définir le libellé de la taille d’intégration de sorte qu’il soit aligné en haut et de 80 pixels de large :

.s7ecatalogsearchviewer .s7embeddialog .s7dialogembedsizelabel {
    vertical-align: top;
    width: 80px;
}

La largeur de la zone combinée de taille d’intégration est contrôlée avec le sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7embeddialog .s7combobox

Propriétés CSS de la zone combinée

width
Largeur de la zone de liste déroulante.
NOTE
La zone de liste modifiable prend en charge la variable expanded sélecteur d’attributs avec les valeurs possibles de true et false. La valeur true est utilisée lorsque la zone de liste modifiable affiche l’une des tailles incorporées prédéfinies. Elle doit donc prendre toute la largeur disponible. La valeur false est utilisée lorsque l’option de taille personnalisée est sélectionnée dans la zone combinée. Elle doit donc être réduite pour libérer de l’espace pour les champs de saisie de largeur et de hauteur personnalisés.

Exemple : pour définir la zone combinée de taille d’intégration sur 300 pixels de large lors de l’affichage d’un élément prédéfini et 110 pixels de large lors de l’affichage d’une taille personnalisée :

.s7ecatalogsearchviewer .s7embeddialog .s7combobox[expanded="true"] {
    width: 300px;
}
.s7ecatalogsearchviewer .s7embeddialog .s7combobox[expanded="false"] {
    width: 110px;
}

La hauteur du texte de zone combinée est définie par un élément interne spécial et est contrôlée avec le sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7embeddialog .s7combobox .s7comboboxtext

Propriétés CSS du texte de zone combinée

height
Hauteur du texte de la zone de liste déroulante.

Exemple : pour définir la hauteur du texte de la zone combinée de taille d’intégration sur 40 pixels :

.s7ecatalogsearchviewer .s7embeddialog .s7combobox .s7comboboxtext {
    height: 40px;
}

La zone de liste modifiable comporte un bouton "déroulant" à droite et elle est contrôlée avec le sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7embeddialog .s7combobox .s7comboboxbutton

Propriétés CSS du bouton de zone combinée

haut
Position du bouton vertical à l’intérieur de la zone combinée.
droite
Position du bouton horizontal à l’intérieur de la zone combinée.
width
Largeur du bouton.
height
Hauteur du bouton.
background-image
Image de bouton pour chaque état.
arrière-plan-position

Position dans l’objet d’illustration, si des sprites CSS sont utilisés.

Voir aussi Sprites CSS.

NOTE
Ce bouton prend en charge state sélecteur d’attributs qui peut être utilisé pour appliquer différents habillages à différents états de bouton.

Exemple : pour définir un bouton déroulant sur 28 x 28 pixels et disposer d’une image distincte pour chaque état :

.s7ecatalogsearchviewer .s7embeddialog .s7combobox .s7comboboxbutton {
 width:28px;
 height:28px;
}
.s7ecatalogsearchviewer .s7embeddialog .s7combobox .s7comboboxbutton[state='up'] {
 background-image:url(images/sdk/cboxbtndn_up.png);
}
.s7ecatalogsearchviewer .s7embeddialog .s7combobox .s7comboboxbutton[state='over'] {
 background-image:url(images/sdk/cboxbtndn_over.png);
}
.s7ecatalogsearchviewer .s7embeddialog .s7combobox .s7comboboxbutton[state='down'] {
 background-image:url(images/sdk/cboxbtndn_over.png);
}
.s7ecatalogsearchviewer .s7embeddialog .s7combobox .s7comboboxbutton[state='disabled'] {
 background-image:url(images/sdk/cboxbtndn_up.png);
}

Le panneau avec la liste des tailles d’intégration affichée à l’ouverture d’une zone de liste modifiable est contrôlé à l’aide du sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7embeddialog .s7comboboxdropdown

La taille et la position du panneau sont contrôlées par le composant. Il n’est pas possible de le modifier via CSS.

Propriétés CSS de la liste déroulante de zone combinée

bordure
Bordure du panneau.

Exemple : pour définir le panneau de zone combinée sur une bordure grise d’un pixel :

.s7ecatalogsearchviewer .s7embeddialog .s7comboboxdropdown {
    border: 1px solid #CCCCCC;
}

Un seul élément d’un panneau déroulant contrôlé à l’aide du sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7embeddialog .s7dropdownitemanchor

Propriétés CSS de l’ancre d’élément de liste déroulante

arrière-plan-couleur
Arrière-plan des éléments.

Exemple : pour définir l’élément de panneau de zone combinée sur un arrière-plan blanc :

.s7ecatalogsearchviewer .s7embeddialog .s7dropdownitemanchor {
    background-color: #FFFFFF;
}

Coche affichée à gauche de l’élément sélectionné dans le panneau de zone combinée contrôlé à l’aide du sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7embeddialog .s7checkmark

Propriétés CSS de la case à cocher

width
Largeur de l’icône.
height
Hauteur de l’icône.
background-image
Image de l’élément.
arrière-plan-position

Position dans l’objet d’illustration, si des sprites CSS sont utilisés.

Voir aussi Sprites CSS.

Exemple : pour définir l’icône de coche sur 25 x 25 pixels :

.s7ecatalogsearchviewer .s7embeddialog .s7checkmark {
    background-image: url("images/sdk/cboxchecked.png");
    height: 25px;
    width: 25px;
}

Lorsque l’option "Taille personnalisée" est sélectionnée dans la zone combinée Taille de l’intégration, la boîte de dialogue affiche deux champs de saisie supplémentaires à droite pour permettre à l’utilisateur de saisir une taille d’intégration personnalisée. Ces champs sont placés dans un conteneur contrôlé à l’aide du sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7embeddialog .s7dialogcustomsizepanel

Propriétés CSS du panneau de taille personnalisée de la boîte de dialogue

gauche
Distance par rapport à la zone combinée de taille d’intégration.

Exemple : pour définir la taille personnalisée du panneau des champs d’entrée sur 20 pixels à droite de la zone combinée :

.s7ecatalogsearchviewer .s7embeddialog .s7dialogcustomsizepanel {
    left: 20px;
}

Chaque champ d’entrée de taille personnalisée est encapsulé dans un conteneur qui effectue le rendu d’une bordure et définit la marge entre les champs. Il est contrôlé à l’aide du sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7embeddialog .s7dialogcustomsize

Propriétés CSS de la boîte de dialogue, taille personnalisée

bordure
Bordure autour du champ de saisie.
width
Largeur du champ de saisie.
margin
Marge du champ de saisie.
remplissage
Marge intérieure des champs de saisie.

Exemple : pour définir la taille personnalisée des champs d’entrée pour qu’ils aient une bordure grise d’un pixel, une marge, une marge intérieure et une largeur de 70 pixels :

.s7ecatalogsearchviewer .s7embeddialog .s7dialogcustomsize {
    border: 1px solid #CCCCCC;
    margin-right: 20px;
    padding-left: 2px;
    padding-right: 2px;
    width: 70px;
}

Si un défilement vertical est nécessaire, la barre de défilement s’affiche dans le panneau près du bord droit de la boîte de dialogue, qui est contrôlé à l’aide du sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7embeddialog .s7dialogscrollpanel

Propriétés CSS du panneau de défilement de la boîte de dialogue

width
Largeur du panneau de défilement.

Exemple : pour configurer un panneau de défilement d’une largeur de 44 pixels

.s7ecatalogsearchviewer .s7embeddialog .s7dialogscrollpanel {
    width: 44px;
}

L’aspect de la zone de barre de défilement est contrôlé à l’aide du sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar

Propriétés CSS de la barre de défilement

width
Largeur de la barre de défilement.
haut
Décalage de la barre de défilement verticale à partir du haut du panneau de défilement.
bas
Décalage de la barre de défilement verticale à partir du bas du panneau de défilement.
droite
Décalage de la barre de défilement horizontale à partir du bord droit du panneau de défilement.

Exemple : pour configurer une barre de défilement de 28 pixels de large et dont la marge de huit pixels se trouve en haut, à droite et au bas du panneau de défilement :

.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar {
    bottom: 8px;
    right: 8px;
    top: 8px;
    width: 28px;
}

Le suivi de la barre de défilement est la zone entre les boutons de défilement supérieur et inférieur. Le composant définit automatiquement la position et la hauteur du suivi. Le suivi est contrôlé par le sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar .s7scrolltrack

Propriétés CSS de la barre de défilement

width
Largeur du suivi.
arrière-plan-couleur
Suivi de la couleur de fond.

Exemple : pour configurer un suivi de barre de défilement de 28 pixels de large et avec un arrière-plan gris :

.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar .s7scrolltrack {
width:28px;
background-color: #B2B2B2;
}

Le curseur de la barre de défilement se déplace verticalement dans une zone de suivi de défilement. Sa position verticale est entièrement contrôlée par la logique du composant. Toutefois, la hauteur de la miniature ne change pas dynamiquement en fonction de la quantité de contenu. La hauteur du pouce et d’autres aspects peuvent être configurés avec le sélecteur de classe CSS suivant :

.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar .s7scrollthumb

Propriétés CSS de la barre de défilement

width
Largeur du pouce.
height
Hauteur du pouce.
remplissage-top
Marge intérieure verticale entre le haut de la piste.
remplissage-bottom
Marge intérieure verticale entre le bas de la piste.
background-image
Image affichée pour un état de pouce donné.
arrière-plan-position

Position dans l’objet d’illustration, si des sprites CSS sont utilisés.

Voir aussi Sprites CSS.

NOTE
Le curseur prend en charge state le sélecteur d’attributs, qui peut être utilisé pour appliquer différents habillages à différents états de pouce : up, down, over, et disabled.

Exemple : pour configurer une barre de défilement de 28 x 45 pixels, avec une marge de dix pixels en haut et en bas et une illustration différente pour chaque état :

.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar .s7scrollthumb {
    height: 45px;
    padding-bottom: 10px;
    padding-top: 10px;
    width: 28px;
}
.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar .s7scrollthumb[state="up"] {
 background-image:url("images/sdk/scrollbar_thumb_up.png");
}
.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar .s7scrollthumb[state="down"] {
 background-image:url("images/sdk/scrollbar_thumb_down.png");
}
.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar .s7scrollthumb[state="over"] {
 background-image:url("images/sdk/scrollbar_thumb_over.png");
}
.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar .s7scrollthumb[state="disabled"] {
 background-image:url("images/sdk/scrollbar_thumb_disabled.png");
}

L’aspect des boutons de défilement haut et bas est contrôlé à l’aide des sélecteurs de classe CSS suivants :

.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar .s7scrollupbutton
.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar .s7scrolldownbutton

Il n’est pas possible de positionner des boutons de défilement à l’aide de CSS top, left, bottom, et right propriétés. La logique de la visionneuse les positionne automatiquement.

Propriétés CSS des boutons de défilement haut et bas

width
Largeur du bouton.
height
Hauteur du bouton.
background-image
Image affichée pour un état de bouton donné.
arrière-plan-position

Position dans l’objet d’illustration, si des sprites CSS sont utilisés.

Voir aussi Sprites CSS.

NOTE
Ces boutons prennent en charge les state le sélecteur d’attributs, qui peut être utilisé pour appliquer différents habillages à différents états de bouton : up, down, over, et disabled.

Les info-bulles des boutons peuvent être localisées. Voir Localisation des éléments de l’interface utilisateur pour plus d’informations.

Exemple : pour configurer des boutons de défilement de 28 x 32 pixels et dont l’illustration est différente pour chaque état :

.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar .s7scrollupbutton {
 width:28px;
 height:32px;
}
.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar .s7scrollupbutton[state='up'] {
background-image:url(images/sdk/scroll_up_up.png);
}
.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar .s7scrollupbutton[state='over'] {
 background-image:url(images/sdk/scroll_up_over.png);
}
.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar .s7scrollupbutton[state='down'] {
 background-image:url(images/sdk/scroll_up_down.png);
}
.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar .s7scrollupbutton[state='disabled'] {
 background-image:url(images/sdk/scroll_up_disabled.png);
}
.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar .s7scrolldownbutton {
 width:28px;
 height:32px;
}
.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar .s7scrolldownbutton[state='up'] {
 background-image:url(images/sdk/scroll_down_up.png);
}
.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar .s7scrolldownbutton[state='over'] {
 background-image:url(images/sdk/scroll_down_over.png);
}
.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar .s7scrolldownbutton[state='down'] {
 background-image:url(images/sdk/scroll_down_down.png);
}
.s7ecatalogsearchviewer .s7embeddialog .s7scrollbar .s7scrolldownbutton[state='disabled'] {
 background-image:url(images/sdk/scroll_down_disabled.png);
}
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8