This is a migrated thread and some comments may be shown as answers.

[Solved] Multicolumn Borders

2 Answers 114 Views

ComboBox

This is a migrated thread and some comments may be shown as answers.

Ed Staffin asked on 18 Sep 2009, 11:42 AM

Hi,
I have been trying to figure out how to make a multicolum combo look nice. I would like to have a border on each side of the table cells but I've found that when I do that there is a gap at the top and bottom of each cell. This makes the border on each side look silly.
How can I make the border on the left and right of each cell look like a single line going down the columns?
Thanks ... Ed

I have the following snippets to illustrate.

    
            .tdMultiColDLL  
        
            {  
        
                border-style: none solid none solid;  
        
                border-width: 1px;  
        
                border-color: #000000;  
        
            }  
        
                                    <telerik:RadComboBox ID="ddlVoucher" runat="server" Skin="Vista" Width="500" MaxHeight="200"   
        
                                        HighlightTemplatedItems="true" AutoPostBack="true" CausesValidation="false">  
        
                                        <HeaderTemplate> 
        
                                            <table style="width: 480px; text-align: left" cellpadding="0" cellspacing = "0">  
        
                                                <tr> 
        
                                                    <td style="width: 60px;"  align="right" class="tdMultiColDLL">Voucher #</td> 
        
                                                    <td style="width: 250px;"  class="tdMultiColDLL">Vendor/Staff/Customer</td> 
        
                                                    <td style="width: 80px;" align="right"  class="tdMultiColDLL">Pmt Date</td> 
        
                                                    <td style="width: 80px;" align="right" class="tdMultiColDLL">Invoice #</td> 
        
                                                </tr> 
        
                                            </table> 
        
                                        </HeaderTemplate><ItemTemplate>  
        
                                            <table style="width: 480px; text-align: left" cellpadding="0" cellspacing="0">  
        
                                                <tr> 
        
                                                <td style="width: 60px;"   align="right" class="tdMultiColDLL">  
        
                                                   <%#DataBinder.Eval(Container.DataItem, "VoucherId")%>   
        
                                                </td> 
        
                                                <td style="width: 250px;" class="tdMultiColDLL" > 
        
                                                   <%#DataBinder.Eval(Container.DataItem, "VendorOrStaff")%>   
        
                                                </td> 
        
                                                <td style="width: 80px;" align="right" class="tdMultiColDLL">  
        
                                                   <%#CDate(DataBinder.Eval(Container.DataItem, "PaymentDate")).ToShortDateString%>   
        
                                                </td> 
        
                                                <td style="width: 80px;" align="right" class="tdMultiColDLL">  
        
                                                   <%#DataBinder.Eval(Container.DataItem, "InvoiceNumber")%>&nbsp;   
        
                                                </td> 
        
                                            </tr> 
        
                                        </table> 
        
                                    </ItemTemplate> 
        
                                </telerik:RadComboBox>

2 Answers, 1 is accepted

Accepted

answered on 23 Sep 2009, 10:36 AM

Hi Ed,

I've already answered the support ticket regarding the same issue, I paste my reply here:

1. set DropDownCssClass property of the combobox:

    
            <telerik:RadComboBox ID="ddlVoucher" runat="server" Skin="Vista" Width="500" MaxHeight="200" DropDownCssClass="multiColCombo"    
        
                                    HighlightTemplatedItems="true" AutoPostBack="true" CausesValidation="false">

2. add the following css styles to the page:

    
            .tdMultiColDLL   
        
            {   
        
                border-style: none solid none solid;   
        
                border-width: 1px;   
        
                border-color: #000000;   
        
                padding: 2px 0 !important; 
        
            }   
        
            .multiColCombo .rcbItem,  
        
            .multiColCombo .rcbHovered,  
        
            .multiColCombo .rcbDisabled,  
        
            .multiColCombo .rcbLoading, 
        
            .multiColCombo .rcbHeader { 
        
                padding: 0 !important; 
        
                border: 0 !important; 
        
                margin: 0 !important; 
        
            }

Best wishes,
Yana
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.