Align Empty message in the middle-center of the listbox

Question

Align Empty message in the middle-center of the listbox

678 Views Asked by AudioBubble At 21 October 2024 at 03:33

I am using two Telerik RadListBoxes as follows:

<td align="center">
    <telerik:RadListBox ID="lstDataList" runat="server" Width="266px"
        SelectionMode="Multiple" EmptyMessage="No data to display"
        TransferToID="lstcommited" Height="320" Skin="WebBlue" AllowTransfer="true"
        Style="text-align: left;">
        <ButtonSettings ShowTransferAll="false" VerticalAlign="Middle"
            HorizontalAlign="Center" TransferButtons="TransferFrom" />
    </telerik:RadListBox>
</td>
<td align="center">
    <telerik:RadListBox ID="lstcommited" runat="server" Width="240px"
        EmptyMessage="No data to display" SelectionMode="Multiple"
        TransferToID="lstDataList" Height="320" Skin="WebBlue"
        Style="text-align: left;">
    </telerik:RadListBox>
</td>

My Question is that How can I display the empty message in the middle center of the list box as like what is in the picture below.

enter image description here

Note:

Both the list boxes are in a <telerik:RadWindow>

Original Q&A

There are 2 best solutions below

**Rahul Nikate** · Answer 1

Use this CSS for your requirement. Also, You need to place this CSS in ContentTemplate of your RadWindow as your RadListBoxes are part of RadWindow. Check the Markup below:

<telerik:radwindow id="radList" runat="server" modal="true" animation="None"
    visibleonpageload="false" skin="Windows7" width="630px" keepinscreenbounds="true"
    height="500px" enableshadow="false" visiblestatusbar="false" visibletitlebar="true"
    behaviors="Close,Pin" title=" ASSIGN EMPLOYEE" enableviewstate="true"> 
<ContentTemplate>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>RadControls</title>
    <style type="text/css">
        div.RadListBox .rlbEmptyMessage {
            vertical-align: middle !important;
            text-align: center;
            position: static !important;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <table width="100%" align="center" cellpadding="4" cellspacing="0">
            <tr>
                <td align="center">
                    <telerik:radlistbox id="lstDataList" runat="server" width="266px" selectionmode="Multiple"
                        emptymessage="No data to display" transfertoid="lstcommited" height="320"
                        skin="WebBlue" allowtransfer="true" style="text-align: left;"> 
<ButtonSettings ShowTransferAll="false" VerticalAlign="Middle" HorizontalAlign="Center" 
TransferButtons="TransferFrom" /> 
</telerik:radlistbox>
                </td>
                <td align="center">
                    <telerik:radlistbox id="lstcommited" runat="server" width="240px" emptymessage="No data to display"
                        selectionmode="Multiple" transfertoid="lstDataList" height="320" skin="WebBlue"
                        style="text-align: left;"> 
</telerik:radlistbox>
                </td>
            </tr>
        </table>
        <table width="100%">
            <tr>
                <td align="center" colspan="2">
                    <br />
                    <asp:LinkButton ID="btnconfirm" runat="server" Text="Confirm" CssClass="btn_signin"
                        CausesValidation="false"></asp:LinkButton>
                </td>
            </tr>
        </table>
    </form>
</body>
</html>
 </ContentTemplate> 
</telerik:radwindow>

**Sam** · Answer 2

Sam On 15 December 2014 at 05:47

Remove Style="text-align: left;" property in both <telerik:RadListBox> controls and leave <td align="center">

Align Empty message in the middle-center of the listbox

There are 2 best solutions below

Related Questions in C#

Related Questions in ASP.NET

Related Questions in VB.NET

Related Questions in TELERIK

Related Questions in TELERIK-RADLISTBOX

Trending Questions

Popular # Hahtags

Popular Questions