Align Empty message in the middle-center of the listbox

678 Views Asked by At

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>

2

There are 2 best solutions below

6
Rahul Nikate On

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>
2
Sam On

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