I have been using the combobox very successfully for a long time with no problems. Now, I cannot get the text (of the selection choices) to align to the left (they align in the center) and cannot get the down arrow graphic to align to the right. The down arrow even covers up the first few letters of the selected item.
I believe it is a problem with a conflict with an external style sheet (not the dhtml stylesheet), because when I remove the style sheet, the combobox works fine. I cannot narrow down which element of the external style sheet is causing this.
Is there someway to ‘override’ the external style sheet settings or do you have any other ideas?
Hello,
please provide the complete sample where we can recreate the issue. We’ll try to help.
Here is the external style sheet. Your DHTML is trying to run in the “content” div. Thanks again.
* {margin:0px;padding:0px;top:0px;left:0px;}
body{
text-align: center;
background-color: #D78C0C;
}
#central{
margin-right: auto;
margin-left: auto;
margin-top: 10px;
position: relative;
width: 780px;
text-align: left;
background:#fff url(secure.spidermed.com/fsabenefit … r_top2.jpg);}
#contentbox{
background:transparent;
}
#content{
width: 532px;
background:transparent;
float:left;
margin-top: 20px;
}
#content p{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: normal;
color: #393535;
margin-left: 20px;
margin-bottom: 20px;
width: 430px;
}
#content h1{
margin: 10px 10px 10px 26px;
width: 430px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #033387;
}
#content h2{
margin: 10px 10px 10px 20px;
width: 430px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #d78c0b;
}
#content li{
text-indent: 25px;
background-color: #FFFFFF;
list-style-position: inside;
list-style-image: none;
list-style-type: square;
display: block;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
color: #666666;
}
#content A.mBlack:link {color:#393535; text-decoration:none;}
#content A.mBlack:visited {color:#393535; text-decoration:none;}
#content A.mBlack:active {color:#393535; text-decoration:none;}
#content A.mBlack:hover {color:#C00000; text-decoration:underline;}
#content A.mWhite:link {color:#ffffff; text-decoration:none;}
#content A.mWhite:visited {color:#ffffff; text-decoration:none;}
#content A.mWhite:active {color:#ffffff; text-decoration:none;}
#content A.mWhite:hover {color:#C00000; text-decoration:underline;}
#content A.mOrange:link {color:#D78C0C; text-decoration:none;}
#content A.mOrange:visited {color:#D78C0C; text-decoration:none;}
#content A.mOrange:active {color:#D78C0C; text-decoration:none;}
#content A.mOrange:hover {color:#C00000; text-decoration:underline;}
#content span{
margin-top: 10px;
margin-bottom: 4px;
width: 430px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #649721;
}
#content span#s2{color: #03449f;}
#content a{color: #666666;}
img{
float: left;
margin-right: 7px;
}
#news{
background:transparent;
width: 240px;
float:right;
padding-left: 8px;
margin-top: 0px;
}
#news p{
background-color: #033387;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
padding: 20px 20px 10px 20px;
}
#news a{color: #FFFFFF;}
#news h4{
color: #ffffff;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
background-color: #000000;
}
#news A.mWhite:link {color:#ffffff; text-decoration:none;}
#news A.mWhite:visited {color:#ffffff; text-decoration:none;}
#news A.mWhite:active {color:#ffffff; text-decoration:none;}
#news A.mWhite:hover {color:#D78C0C; text-decoration:underline;}
#footer{
background-color: #000000;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FFFFFF;
height: 20px;
width: 780px;
clear: both;
text-decoration: none;
text-align: center;
padding-top:4px;
}
#footer ul{display: inline;}
#footer li{display: inline;}
#footer a{
color: #FFFFFF;
text-decoration: underline;
padding-right: 7px;
}
#copyright{
background-color: #c0c0c0;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
height: 20px;
width: 780px;
text-decoration: none;
text-align: center;
position: relative;
}
#copyright p{
height: 20px;
text-decoration: none;
padding: 10px 10px;
}
#copyright a{color: #0000FF;}
#copyright a:hover{color: #FF0000;}
#imagepreloader{
visibility: hidden;
overflow: hidden;
height: 0px;
width: 0px;
}
.box_1_border {
font-family: tahoma;
font-size: 10px;
background-color: #ffffff;
border-left:1px solid #696969;
border-right:1px solid #696969;
border-top:1px solid #696969;
border-bottom:1px solid #696969;
}
.box_1_border_grid {
font-family: tahoma;
font-size: 10px;
background-color: #ffffff;
border-left:1px solid #696969;
border-right:1px solid #696969;
border-top:1px solid #696969;
border-bottom:1px solid #696969;
border-collapse: collapse;
}
.box_1_noborder {
font-family: tahoma;
font-size: 10px;
background-color: #ffffff;
}
.box_1_noborder_lg {
font-family: tahoma;
font-size: 12px;
background-color: #ffffff;
}
.box_1_noborder_grid {
font-family: tahoma;
font-size: 10px;
background-color: #ffffff;
border-collapse: collapse;
}
The issue is caused by body{text-align: center; … class. In the local sample this class have affected only list of the options - it can be redefeined as
Try to add the following class to the page:
.dhx_combo_list{
text-align:left;
}
Thanks! That aligned the list to the left, but the graphic arrow still lines up on the left (should be on the riight) and its position actually hides the first few letters of the selection. Is there another class for the arrow as well?
The arrow class is (dhtmlxcombo.css):
.dhx_combo_img{
position:absolute;
top:0px;
right:0px;
width:17px;
height:20px;
}
Just putting that code into my external style sheet didn’t fix the problem like the other one did. Do I actually need to CHANGE it - maybe put “align…” ? or "float… "?
You didn’t provide the complete demo. So, we just point you to css class that is responsible for the arrow image style. You can modify it as you need.
If you need to get the ready solution, please provide the complete demo where we can recreate the issue.