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'