Discussion :

[jbrasselet]

Bonjour,

je travaille en asp.net.
J'ai un code html qui affiche un input de type text puis un bouton. Le but est de simuler une liste déroulante dont le panel d'option est plus large que la liste elle même. De plus il doit pouvoir se repositionner vers la gauche s'il dépasse la fin de l'écran.

J'ai donc un composant qui génère le code suivant :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div id="MasterContent_CplTest_ListView1_ComboBox1_0" class="WindowsStyle" style="display:inline;">
   <table id="MasterContent_CplTest_ListView1_ComboBox1_0_Table_0" class="ajax__combobox_inputcontainer" cellspacing="0" cellpadding="0" style="border-width:0px;border-style:None;border-collapse:collapse;display:inline;position:relative;top:5px;">
      <tr>
         <td class="ajax__combobox_textboxcontainer">
            <input name="ctl00$MasterContent$CplTest$ListView1$ctrl0$ComboBox1$TextBox" type="text" id="MasterContent_CplTest_ListView1_ComboBox1_0_TextBox_0" autocomplete="off" style="width:150px;" />
         </td>
         <td class="ajax__combobox_buttoncontainer">
            <button id="MasterContent_CplTest_ListView1_ComboBox1_0_Button_0" type="button" style="visibility:hidden;">
            </button>
         </td>
      </tr>
   </table>
   <ul id="MasterContent_CplTest_ListView1_ComboBox1_0_OptionList_0" class="ajax__combobox_itemlist" style="display:none;visibility:hidden;">
      <li>les templates sont utiles</li>
      <li>Un petit coin de paradis, loin de cet océan</li>
      <li>Trois</li>
   </ul>
   <input type="hidden" name="ctl00$MasterContent$CplTest$ListView1$ctrl0$ComboBox1$HiddenField" id="MasterContent_CplTest_ListView1_ComboBox1_0_HiddenField_0" value="0" />
</div>

Et j'ai le css suivant :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

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
34
35
36
37
38
39
40
41
42
43
44
.WindowsStyle 
{
   clear : both;
}
 
.WindowsStyle table td
{
   padding : 0px;
   margin : 0px;
   border : 0px;
}
 
.WindowsStyle .ajax__combobox_inputcontainer  {
 
	padding : 0px 0px 0px 0px;
	MARGIN: 0px;
}
 
.WindowsStyle .ajax__combobox_textboxcontainer INPUT
{
   BORDER-BOTTOM: #ff6600 1px solid; 
	BORDER-LEFT: #ff6600 1px solid; 
	BORDER-TOP: #ff6600 1px solid; 
	BORDER-RIGHT: none;
}
 
.WindowsStyle .ajax__combobox_inputcontainer {
      BORDER-BOTTOM: #ff6600 1px solid; 
	BORDER-LEFT:none; 
	BORDER-TOP: #ff6600 1px solid; 
	BORDER-RIGHT: #ff6600 1px solid;
	PADDING: 0px; 
	MARGIN : 0px 0px 0px 0px; 
 
}
 
.WindowsStyle .ajax__combobox_buttoncontainer BUTTON 
{
border : 0px;
}
 
.WindowsStyle .ajax__combobox_itemlist {
	BORDER-BOTTOM-COLOR: #ff6600; BORDER-TOP-COLOR: #ff6600; BORDER-RIGHT-COLOR: #ff6600; BORDER-LEFT-COLOR: #ff6600;
}

NB : J'ai une complète maitrise sur le css, pas sur le html.

Lorsque j'affiche ma page, mon bouton semble être un pixel au dessus de la bordure de mon input (cf PJ)

Avez-vous une idée pour résoudre cela ?

Merci d'avance
Ju'

[NoSmoking]

Bonjour,
en jouant finement avec le CSS tu dois pouvoir t'approcher du rendu souhaité
pour le button par exemple

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
.lebutton{
  height : 22px;
  width  : 22px;
  border : 1px solid #f60;
}

et pour l'input

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
.l_input{
  height : 18px;
  width : 150px;
  border : 1px solid #f60;
}

[jbrasselet]

NB : pour info je suis sous IE.

J'ai tenté ta solution mais j'ai toujours un pixel de décalage vers le haut.
Ce que je ne comprend pas c'est que si via les outils de développement de IE8, je modifie le margin-top du bouton à 1px c'est ok.
Mais si je le modifie dans le css

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
.WindowsStyle .ajax__combobox_inputcontainer .ajax__combobox_buttoncontainer button
{
   height : 22px;
  width  : 22px;
  border-top : 1px solid #f60;
  border-right : 1px solid #f60;
   border-bottom : 1px solid #f60;
   border-left : none;
   margin-top : 1px;
}

il ne me le prend pas.
Ai-je raté un truc dans la définition de mon css ?

Merci d'avance

[jbrasselet]

Pour info, je n'ai pas ce pixel de décalage sous IE8 alors que je l'ai sous IE7 et sous le mode de compatibilité IE8. Known issue ?

[jbrasselet]

En enlevant le display:inline du premier div et en ajoutant un display:block au niveau du css de mon bouton j'ai résolu le problème.