Start Building Professional
Web Apps Today


 
Categories Question details Back To List
Question  posted by GB on Oct 15, 2009 14:07
open dhtmlx forum
Text and down arrow alignment

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?
Answer posted by Alex (support) on Oct 16, 2009 01:48

Hello, 

please provide the complete sample where we can recreate the issue. We'll try to help.

Answer posted by gb on Oct 16, 2009 06:15

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(https://secure.spidermed.com/fsabenefits/images/newsbackground.gif) repeat-y right top;
}
#header{
 height: 205px;
 width: 780px;
}
#searchspacer{
 background-color: #d78c0b;
 left: 479px;
 height: 51px;
 width: 53px;
 position: absolute;
}
#searchbox{
 background-color: #d78c0b;
 left: 532px;
 height: 90px;
 width: 248px;
 position: absolute;
}

#search{
 margin-left: 45px;
 margin-top: 20px;
 position: absolute;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 10px;
 font-weight: bold;
 color: #000000;
}
#go{
 background-color: #FFFFFF;
 background-image: url(https://secure.spidermed.com/fsabenefits/images/searchbutton.gif);
 background-repeat: no-repeat;
 margin-left: 159px;
 margin-top: 18px;
 position: absolute;
}
#imageheader{
 background-image: url(https://secure.spidermed.com/fsabenefits/images/header3.jpg);
 background-repeat: no-repeat;
 top: 51px;
 position: absolute;
 height: 154px;
 width: 532px;
}

#menu_header{
 position: absolute;
        top: 57px;
 height: 23px;
 width: 532px;
        margin-left: 18px;
}


#navtop{
        background-image: url(https://secure.spidermed.com/fsabenefits/images/navtop_image.jpg);
 background-repeat: no-repeat; 
        list-style-position: inside;
 list-style-image: none;
 list-style-type: none;
 position: absolute;
 height: 51px;
 width: 479px;
  color=#fff;
       
}
#navtop a{
 height: 32px;
 text-decoration: none;
 font-size: 12px;
 font-style: normal;
 display: block;
 position: absolute;
 overflow: hidden;
 font-family: Georgia, "Times New Roman", Times, serif;
 padding-top: 19px;
        color: #FFFFFF;
          
}
#nt1 ,#nt2 ,#nt3{
 padding-left: 40px;
 width: 79px;
 background-image: url(https://secure.spidermed.com/fsabenefits/images/navtop_bl.gif);
       
 }
#nt2{left: 119px;}
#nt3{left: 238px;}
#nt4{
 left: 357px;
 width: 94px;
 padding-left: 28px;
 background-image: url(images/navtopend_bl.gif);
}
#nt1:hover ,#nt2:hover ,#nt3:hover {background-image: url(https://secure.spidermed.com/fsabenefits/images/navtopover_bl.gif);}
#nt4:hover{background-image: url(https://secure.spidermed.com/fsabenefits/images/navtopendover_bl.gif);}
#navright{
 position: absolute;
 height: 85px;
 width: 248px;
 left: 532px;
 top: 90px;
 background-color: #000000;
 list-style-position: inside;
 list-style-image: none;
 list-style-type: none;
        }

#navright li{
 text-indent: 0px;
 background-color: #FFFFFF;
 list-style-position: inside;
 list-style-image: none;
 list-style-type: none;
 display: block;
       
}

#navright a{
 background-repeat: no-repeat;
 display: block;
 height: 26px;
 width: 195px;
 position: absolute;
 padding-left: 53px;
 padding-top: 6px;
 font-family: "Times New Roman", Times, serif;
 font-size: 14px;
 font-style: normal;
 line-height: normal;
 font-weight: bold;
 color: #FFFFFF;
 text-decoration: none;
}

#nr2 ,#nr3{background-image: url(https://secure.spidermed.com/fsabenefits/images/navright.gif);}
#nr2{top: 29px;}
#nr3{top: 58px;}
#nr4{
 top: 87px;
 background-image: url(https://secure.spidermed.com/fsabenefits/images/navrightend.gif);
}
#nr1{
 background-image: url(https://secure.spidermed.com/fsabenefits/images/navright_top2.jpg);
}

#nr2:hover ,#nr3:hover {background-image: url(https://secure.spidermed.com/fsabenefits/images/navrightover.gif);}
#nr4:hover{background-image: url(https://secure.spidermed.com/fsabenefits/images/navrightendover.gif);}
#nr1:hover{background-image: url(https://secure.spidermed.com/fsabenefits/images/navrightover_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;

    
        }


 

Answer posted by Alex (support) on Oct 16, 2009 07:58

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;
}


Answer posted by GB on Oct 16, 2009 08:12

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?

 

Answer posted by Alex (support) on Oct 16, 2009 09:09

The arrow class is (dhtmlxcombo.css):

.dhx_combo_img{
 position:absolute;
 top:0px;
 right:0px;
 width:17px;
 height:20px;
}



Answer posted by GB on Oct 16, 2009 09:33
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... "?
Answer posted by Alex (support) on Oct 19, 2009 02:41

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.