[Solved] text-align problem when using custom stylesheet

[kchou]

Hi All

I'm noticing a weird alignment issue with the combobox when I'm using a custom stylesheet.  I have the combobox inside an asp Panel.  I have a checkbox that executes some javascript code to enable disable the asp Panel.  The text inside the combobox is left aligned when the asp Panel is enable, but right aligned when the asp Panel is disabled.  I want the text to be left aligned at all times.  Any ideas?

I've tried putting text-align: left; everywhere in my .css file but it's not working.

[Simon]

Hi kchou,

Could you please provide the code of your custom stylesheet so that we inspect it?

If it is more convenient for you, please open a formal support ticket and send us your files there.

All the best,
Simon
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[kchou]

Hi

Here is my custom stylesheet:

/* RadComboBox Default skin */

/*global*/


.RadComboBox_TelerikComboBox *
{
    margin:0;
    padding:0;
    text-align: left;
}

.RadComboBox_TelerikComboBox,
.RadComboBox_TelerikComboBox .rcbInputCell .rcbInput,
.RadComboBoxDropDown_TelerikComboBox
{
    font:10px Verdana, Arial, Helvetica;
    color:#000;
    text-align: left;
}

.RadComboBox_TelerikComboBox_rtl,
.RadComboBox_TelerikComboBox_rtl .rcbInputCell .rcbInput,
.RadComboBoxDropDown_TelerikComboBox_rtl
{
    text-align: left;
}

/* combobox */

.RadComboBox_TelerikComboBox
{
    vertical-align:middle;
    text-align: left;
}

.RadComboBox_TelerikComboBox table
{
    border:0;
    /*border-collapse:collapse;*/
}

.RadComboBox_TelerikComboBox td
{
    border:1px solid #7f9db9;
    text-align: left;
}

.RadComboBox_TelerikComboBox td.rcbInputCell
{
    height:18px;
    line-height:17px;
    vertical-align:top;
    background: #fff;
    padding:0;
    text-align: left;
}

.RadComboBox_TelerikComboBox .rcbInputCell .rcbInput
{
    width:100%;
    background:transparent;
    border:0;
    vertical-align:middle;
    padding:0px 0 0 0;
    color: #373737;
    text-align: left;
}

.RadComboBox_TelerikComboBox .rcbInputCell .rcbEmptyMessage
{
    color: #666;
    font-style: italic;
}

.RadComboBox_TelerikComboBox td.rcbInputCell,
.RadComboBox_TelerikComboBox .rcbInputCell .rcbInput
{
    padding-left: 2px;
}

.RadComboBox_TelerikComboBox_rtl td.rcbInputCell,
.RadComboBox_TelerikComboBox_rtl .rcbInputCell .rcbInput
{
    padding-right: 2px;
    padding-left: 0;
}

.RadComboBox_TelerikComboBox td.rcbInputCellLeft
{
    border-right: 0;
}

.RadComboBox_TelerikComboBox td.rcbInputCellRight
{
    border-left: 0;
}

.RadComboBox_TelerikComboBox .rcbDisabled .rcbInputCell
{
    border-color: #a1a1a1;
}

.RadComboBox_TelerikComboBox .rcbDisabled .rcbInputCell .rcbInput
{
    color: #9b9b9b;
}

.RadComboBox_TelerikComboBox td.rcbArrowCell
{
    background:url(../Images/Button/rcbArrow.gif);
    width:20px;
    padding:1px;
}

.RadComboBox_TelerikComboBox .rcbDisabled .rcbArrowCell
{
    border-color: #878787;
}

.RadComboBox_TelerikComboBox td.rcbArrowCellLeft
{
    border-right-width: 0;
}

.RadComboBox_TelerikComboBox td.rcbArrowCellRight
{
    border-left-width: 0;
}

.RadComboBox_TelerikComboBox .rcbArrowCell a
{
    line-height:17px;
    width:100%;
    height:18px;
    text-decoration:none;
    text-indent: -9999px;
    font-size: 0;
}

.RadComboBox_TelerikComboBox .rcbDisabled .rcbArrowCell a
{
    cursor:no-drop;
}

.RadComboBox_TelerikComboBox .rcbDisabled .rcbArrowCellHidden a
{
    cursor: default;
}

.RadComboBox_TelerikComboBox td.rcbArrowCellHidden,
.RadComboBox_TelerikComboBox .rcbDisabled .rcbArrowCellHidden,
.RadComboBox_TelerikComboBox .rcbArrowCellHidden a
{
    width: 0;
}

/* dropdown */

.rcbSlide
{
    position:absolute;
    overflow:hidden;
    display:none;
    _height:1px;
    float:left;
}

.RadComboBoxDropDown_TelerikComboBox
{
    position:absolute;
    background:#fff;
    border: 1px solid #000;
    cursor:default;
    font-size:10px;
}

.RadComboBoxDropDown_TelerikComboBox_rtl
{
    text-align: left;
    direction: rtl;
}

.RadComboBoxDropDown_TelerikComboBox .rcbScroll
{
    overflow:auto;
    overflow-x:hidden !important;
}

.RadComboBoxDropDown_TelerikComboBox .rcbList
{
    list-style:none;
    margin:0;
    padding:0;
}

/*.RadComboBoxDropDown_TelerikComboBox .rcbScroll .rcbList
{
    float:left;
}*/

.RadComboBoxDropDown_TelerikComboBox .rcbHeader,
.RadComboBoxDropDown_TelerikComboBox .rcbFooter
{
    background:#929292;
    color:#fff;
    padding:4px;
}

.RadComboBoxDropDown_TelerikComboBox .rcbNoWrap .rcbItem,
.RadComboBoxDropDown_TelerikComboBox .rcbNoWrap .rcbHovered,
.RadComboBoxDropDown_TelerikComboBox .rcbNoWrap .rcbDisabled,
.RadComboBoxDropDown_TelerikComboBox .rcbNoWrap .rcbLoading
{
    white-space:nowrap;
}

.RadComboBoxDropDown_TelerikComboBox .rcbItem,
.RadComboBoxDropDown_TelerikComboBox .rcbHovered,
.RadComboBoxDropDown_TelerikComboBox .rcbDisabled,
.RadComboBoxDropDown_TelerikComboBox .rcbLoading
{
    padding:0;
}

* html .RadComboBoxDropDown_TelerikComboBox .rcbItem,
* html .RadComboBoxDropDown_TelerikComboBox .rcbHovered,
* html .RadComboBoxDropDown_TelerikComboBox .rcbDisabled,
* html .RadComboBoxDropDown_TelerikComboBox .rcbLoading
{
}

.RadComboBoxDropDown_TelerikComboBox_rtl .rcbItem,
.RadComboBoxDropDown_TelerikComboBox_rtl .rcbHovered,
.RadComboBoxDropDown_TelerikComboBox_rtl .rcbDisabled,
.RadComboBoxDropDown_TelerikComboBox_rtl .rcbLoading
{
    padding:0;
}

.RadComboBoxDropDown_TelerikComboBox .rcbItem em
{
    background: #e5e5e5;
    font-style: normal;
    font-weight: bold;
}

.RadComboBoxDropDown_TelerikComboBox .rcbHovered
{
    background:#316ac5;
    color:#fff;
}

.RadComboBoxDropDown_TelerikComboBox .rcbDisabled
{
    color:#ccc;
    cursor:no-drop;
}

.RadComboBoxDropDown_TelerikComboBox .rcbSeparator
{
    color: #fff;
    background: #aaa;
}

.RadComboBoxDropDown_TelerikComboBox .rcbLoading
{
    background:#f0f0f0;
    text-align: left;
}

.RadComboBoxDropDown_TelerikComboBox .rcbMoreResults
{
    clear:both;
    background:#f3f3f3;
    padding:4px;
    text-align: left;
}

.RadComboBoxDropDown_TelerikComboBox .rcbMoreResults a
{
    display:block;
    width:10px;
    height:10px;
    background:url(../Images/Button/rcbArrow.gif);
    margin:0 auto;
    text-indent:0px;
    overflow:hidden;
    text-decoration:none;
    cursor:pointer;
}

.RadComboBoxDropDown_TelerikComboBox .rcbMoreResults span
{
    display:block;
    text-align: left;
}

/*hacks*/


/*Opera start*/
@media screen and (min-width:550px)
{
    .RadComboBoxDropDown_TelerikComboBox_rtl .rcbItem,
    .RadComboBoxDropDown_TelerikComboBox_rtl .rcbHovered,
    .RadComboBoxDropDown_TelerikComboBox_rtl .rcbDisabled,
    .RadComboBoxDropDown_TelerikComboBox_rtl .rcbLoading
    {
        padding:0;
    }
}
/*Opera end*/

[Simon]

Hello kchou,

Thank you for providing the CSS code.

I tried disabling the Panel and could not reproduce the text alignment issue.

Could you also provide the definiton of the ComboBox and the Panel as well as the JavaScript code enabling/disabling the Panel?

Kind regards,
Simon
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.