This is a migrated thread and some comments may be shown as answers.
ComboBox styling problem
5 Answers 86 Views
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Frieder
Top achievements
Rank 1
Frieder asked on 06 Oct 2011, 11:29 AM

Hello folks,

 

i tried to restyle a combobox to have a rounded border, which works quite well, but one quirk is driving me nuts and i just can't solve this problem. As you can see in the attached screenshot, there are tiny white spots on the edges of the combobox, which shouldn't be there, They may be not visible at the fist glance, but they are there and our customer wants them gone. I am using the Office2010Black.css and the telerik.common.css, both are registered in the MasterPage. I would be so grateful if someone could help me out here, because i literally spent days to fix this to no avail.

Below you find the css code im using to change the borders

.t-state-default {
    border-color: #434449 !important;
}
 
.t-input{
   background-color:#434449;
   border:solid 1px #434449;

This is how i create the Combobox:
<% Html.Telerik().ComboBox() _
                    .Name("ComboBox_ProductTitle") _
                    .AutoFill(True) _
                    .Value(Request.Form("ComboBox_ProductTitle")) _
                    .BindTo(New SelectList(Model.ProductDistinctTitles, "Text", "Value")) _
                    .HtmlAttributes(New With {.style = "border: 1px solid #434449; background-color:#434449;border-radius:3px;vertical-align:middle;"}) _
                    .DropDownHtmlAttributes(New With {.style = "width:250px !IMPORTANT;overflow-x: hidden; border-radius:3px;"}) _
                    .Filterable(Function(filtering) filtering.FilterMode(AutoCompleteFilterMode.StartsWith)) _
                    .HighlightFirstMatch(False) _
                    .OpenOnFocus(False) _
                      .Render()%>

5 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 07 Oct 2011, 09:18 AM
Hello Frieder,

The observed appearance is caused by the browser itself and can be reproduced with a simple <div>. As far as I can see, the issue occurs when the border color matches the background color. Please remove the border (corner rounding will still work) or use two different colors.

Regards,
Dimo
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the Telerik Extensions for ASP.MET MVC, subscribe to their blog feed now
0
Frieder
Top achievements
Rank 1
answered on 14 Oct 2011, 04:22 PM
Hello Dimo,

thank you for your answer!

I tried your suggestion and removed the border, but unfortunatetly the white pixels persisted. If i don't assign a background color at all, the element is plain white and the corners look good. As soon i set the background color, the problem reappears, even with no border. Is there some way to change that default white to another color to circumvent the problem?

best regards,

Frieder

0
Dimo
Telerik team
answered on 14 Oct 2011, 04:44 PM
Hi Frieder,

I am afraid I have no other suggestions for you, as the problem seems related to the browser's rendering engine.

Regards,
Dimo
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the Telerik Extensions for ASP.MET MVC, subscribe to their blog feed now
0
AccMan
Top achievements
Rank 1
answered on 08 Dec 2011, 05:37 PM
Hello Frieder, 

Try this css, I also needed to create combobox with 5px rounded border, and i did this : 
.t-combobox.t-header                           { background:transparent; }
.t-combobox > .t-state-default                 { border-color:Green; /* Your border color*/}
.t-combobox > .t-dropdown-wrap                 { height:20px; background:Red;/* Your background color*/ border-radius:5px; }
.t-combobox > .t-dropdown-wrap > .t-select     { background:transparent; }
.t-combobox > .t-dropdown-wrap > .t-input      { background:transparent;  }

Perhaps this will help you ;)
0
Frieder
Top achievements
Rank 1
answered on 13 Dec 2011, 12:20 PM
Hey Jerome,

this code did the trick, thank you so much! Looks like there is still much to learn for me when it comes to the internal workings of the telerik controls!

best regards, Frieder
Tags
ComboBox
Asked by
Frieder
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Frieder
Top achievements
Rank 1
AccMan
Top achievements
Rank 1
Share this question
or