Buttons Hidden Behind Listbox

[Bob]

I have buttons set up to display to the right of the listbox, however when it dipslays, the buttons are hidden behind the listbox.  The listbox is on a webcontrol that is being used as an edit form for a grid.

[Nencho]

Hello Robert,

Could you provide a snippet of the code you are using and a screenshot of the observed behavior?

Kind regards,
Nencho
the Telerik team

[Bob]

Page with Grid:
<telerik:RadMultiPage ID="rmpPPPRouteAdmin" runat="server" SelectedIndex="0" Width="100%">    

   <telerik:RadPageView ID="pvSubscriptions" runat="server" Width="100%">

           <telerik:RadGrid id="rgSubscribers"  runat="server"  allowsorting="True" Width="100%" 

                     gridlines="Horizontal" OnNeedDataSource="rgSubscribers_NeedDataSource"  

                     OnDetailTableDataBind="rgSubscribers_DetailTableDataBind"  OnInsertCommand="rgSubscribers_InsertCommand"

                     Skin="Windows7"   GroupingEnabled="false" EnableLinqExpressions="false"

                     AutoGenerateColumns="False" AllowFilteringByColumn="True" ShowStatusBar="True" >

                 <MasterTableView Width="100%"   DataKeyNames="subscriber_media_id" CommandItemDisplay="Top" NoMasterRecordsText="No Subscribers" AllowFilteringByColumn="true"

                     AllowMultiColumnSorting="True" EnableHeaderContextMenu="true"   ShowFooter="true" EditMode="PopUp"  >

                     <RowIndicatorColumn Visible="False">

                         <HeaderStyle Width="20px"></HeaderStyle>

                     </RowIndicatorColumn>

                     <CommandItemSettings AddNewRecordText="New Subscriber" />

                     <ExpandCollapseColumn Visible="True"></ExpandCollapseColumn>

                     <Columns>

                         <telerik:GridBoundColumn DataField="last_name" HeaderText="Last Name" 

                             ReadOnly="True" UniqueName="lastname">

                         </telerik:GridBoundColumn>

                         <telerik:GridBoundColumn DataField="first_name" HeaderText="First Name" ReadOnly="True" 

                             UniqueName="firstname">

                         </telerik:GridBoundColumn>

                         <telerik:GridBoundColumn DataField="address" HeaderText="Email" ReadOnly="True" 

                             UniqueName="address">

                         </telerik:GridBoundColumn>

                         <telerik:GridBoundColumn DataField="sub_type" HeaderText="Subscriber Type" ReadOnly="True" 

                             UniqueName="sub_type">

                         </telerik:GridBoundColumn>                              

                 

                     </Columns>

                     <EditFormSettings   InsertCaption="Add Subscriber"  EditFormType="WebUserControl"   UserControlName="PPPRouteClosureAlertSubscriber.ascx">

                        <PopUpSettings  Modal="false" Height="400" Width="700" ScrollBars="Auto" />

                     </EditFormSettings>

                     <DetailTables>

                         <telerik:GridTableView DataKeyNames="subscriber_media_id" Name="Alert Subscribers" Width="100%" 

                              AllowFilteringByColumn="false" CommandItemDisplay="Top" NoDetailRecordsText="No Alert Subscriptions"  EditMode="PopUp">

                              <ParentTableRelation>

                                 <telerik:GridRelationFields DetailKeyField="subscriber_media_id" MasterKeyField="subscriber_media_id" />

                             </ParentTableRelation>

                             <CommandItemSettings AddNewRecordText="Add Subscription"></CommandItemSettings>

                             <EditFormSettings InsertCaption="Add Subscriber"  EditFormType="WebUserControl"   UserControlName="PPPRouteClosureAlertSubscriber.ascx">

                                 <PopUpSettings  Modal="false" />

                             </EditFormSettings>

                             <Columns>

                                 <telerik:GridBoundColumn DataField="PPPROUTE" HeaderText="PPPROUTE" UniqueName="ppproute" />

                                 <telerik:GridBoundColumn DataField="duration" HeaderText="Minimum Closure Duration (hours)" UniqueName="duration" />

                             </Columns>

                         </telerik:GridTableView>

                     </DetailTables>

                           

          </telerik:RadGrid>

User Control:

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="PPPRouteClosureAlertSubscriber.ascx.cs" Inherits="IRRIS.Client.SDDC.PPPRouteClosureAlertSubscriber" %>
<%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %>
<head id="Head1" >
<title></title>

    <style type="text/css">
.col1, .col2, .col3
{
    float: left;
    width: 110px;
    margin: 0;
    padding: 0 5px 0 0;
    line-height: 14px;
}


    #rlbRoutes .rlbGroup
    {
        margin-right: 54px !important;
    }
    .validationsummary {
        border: 1px solid #dfe9f5;
        padding: 0px 0px 13px 0px;
        font-size:12px;
        width:99%;
    }
    .validationheader {
       left: 0px;
       position: relative;
       font-size: 11px;
       background-color: #dfe9f5;
       color: #56300a;
       height: 14px;
       font-weight: bold;
       border-bottom: 1px solid #dfe9f5;
       padding-top: 3px;
   }
   .validationsummary ul {
       padding-top: 5px;
       padding-left: 45px;
       list-style:none;
       font-size: 11px;
       color:#982b12;
       font-style:italic;
   }
   .validationsummary ul li {
       padding: 2px 0px 0px 15px;
       background-position:0px 3px;
       background-repeat:no-repeat;
   }

</style>
</head>
<telerik:RadAjaxManagerProxy ID="radProxy" runat="server">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="rlbRoutes">
            <UpdatedControls >
                <telerik:AjaxUpdatedControl ControlID="rlbSelectedRoutes" />
            </UpdatedControls>
        </telerik:AjaxSetting>
        <telerik:AjaxSetting AjaxControlID="rlbSelectedRoutes">
            <UpdatedControls >
                <telerik:AjaxUpdatedControl ControlID="rlbSelectedRoutes" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>

</telerik:RadAjaxManagerProxy>

<table id="Table1"   cellspacing="2" cellpadding="2" border="0" width="100%">
    <tr>
        <td colspan="4">

        </td>
    </tr>
    <tr>
        <td>
            <asp:Label id="Label1" runat="server" Text="Subscriber Type:" AssociatedControlID="rcbSubType"></asp:Label>
        </td>
        <td colspan="3">
            <telerik:RadComboBox ID="rcbSubType" Runat="server" CausesValidation="false" AutoPostBack="true" OnSelectedIndexChanged="rcbSubType_SelectedIndexChanged">
                <Items>
                    <telerik:RadComboBoxItem Text="IRRIS" Value="IRRIS" Selected="true" />
                    <telerik:RadComboBoxItem Text="Non-IRRIS" Value="NONIRRIS" />
                </Items>
            </telerik:RadComboBox>
        </td>
    </tr>
    <tr>
        <td colspan="4">

        </td>
    </tr>
    <tr>
        <td>
            <asp:Label id="lblIRRISUsers" runat="server" Text="IRRIS Users:" AssociatedControlID="rcbIRRISUsers"></asp:Label>
            <asp:Label id="lblFirstName" runat="server" Text="First Name:" AssociatedControlID="rtbFirstName" Visible="false"></asp:Label>
        </td>
        <td >
            <telerik:RadComboBox ID="rcbIRRISUsers" Runat="server" EmptyMessage="Please select an IRRIS User" MarkFirstMatch="False" Width="360px" />
            <telerik:RadTextBox ID="rtbFirstName" runat="server"
                TextMode="SingleLine" Visible="false" Enabled="false" Width="225px" ></telerik:RadTextBox>
                            <asp:RequiredFieldValidator ID="rfvFirstName" runat="server" Display="None"
                ControlToValidate="rtbFirstName"   ErrorMessage="Please enter a first name" Enabled="false" />
       </td>
        <td>
            <asp:Label id="lblLastName" runat="server" Text="Last Name:" AssociatedControlID="rtbLastName" Visible="false"></asp:Label>
        </td>
        <td >
            <telerik:RadTextBox ID="rtbLastName" runat="server"
                TextMode="SingleLine" Visible="false" Enabled="false" Skin="Windows7" Width="223px"></telerik:RadTextBox>
            <asp:RequiredFieldValidator ID="rfvLastName" runat="server" Display="None"
                ControlToValidate="rtbLastName"   ErrorMessage="Please enter a last name" Enabled="false" />

        </td>

    </tr>
    <tr>
        <td>
            <asp:Label id="lblEmail" runat="server" Text="Email:" AssociatedControlID="rtbEmail" Visible="false"></asp:Label>

        </td>
        <td colspan="3">
            <telerik:RadTextBox ID="rtbEmail" runat="server"
                TextMode="SingleLine" Visible="false" Enabled="false" Width="219px" CausesValidation="false" ></telerik:RadTextBox>
            <asp:RegularExpressionValidator ID="revEmail" runat="server" Display="None"
                ErrorMessage="Please enter a valid e-mail address." ValidationExpression="^[\w\.\-]+@[a-zA-Z0-9\-]+(\.[a-zA-Z0-9\-]{1,})*(\.[a-zA-Z]{2,3}){1,2}$"
                ControlToValidate="rtbEmail" Enabled="false">
            </asp:RegularExpressionValidator>
            <asp:RequiredFieldValidator ID="rfvEmail" runat="server" Display="None"
                ControlToValidate="rtbEmail"   ErrorMessage="Please enter an e-mail address" Enabled="false" />
        </td>
    </tr>
    <tr>
        <td colspan="4">
             </td>
    </tr>
    <tr>
    <td colspan="4">
    <table width="100%">
    <tr>
    <td>
    <asp:Label runat="server" Text="Available PPP Routes:"></asp:Label>
    </td>
    <td></td>
    <td> <asp:Label ID="Label2" runat="server" Text="Selected PPP Routes:"></asp:Label></td>
    </tr>
    <tr>
    <td width="40%" valign="top">
     <telerik:RadListBox ID="rlbRoutes" runat="server" AllowTransfer="true" TransferToID="rlbSelectedRoutes"  CausesValidation="false"
    TransferMode="Move" AutoPostBackOnTransfer="true" SelectionMode="Multiple" Height="200px" Width="200px" visible="true" Enabled="true" OnTransferred="rlbRoutes_Transferred">
    <ButtonSettings Position="Right"   VerticalAlign="Middle"  ShowDelete="false" ShowTransferAll="true" ShowReorder="false"   />

</telerik:RadListBox>
    </td>
    <td width="5%">
    </td>
    <td width="30%" valign="top">
    <telerik:RadListBox ID="rlbSelectedRoutes"  runat="server" Height="200px" Width="200px">
            <ItemTemplate>

                <ul class="details">
                            <li>
                            <label>Route: </label>
                                <%# DataBinder.Eval(Container, "Text")%></label>
                            </li>
                            <li>
                                <label>
                                    Duration: </label>
                                <telerik:RadNumericTextBox ID="rntbDuration" Runat="server"         Culture="en-US" DataType="System.Int32" Value="6" Width="125px" MaxValue="48" MinValue="1"
                                            NumberFormat-DecimalDigits="0" ShowSpinButtons="True" >
    <NumberFormat DecimalDigits="0"  />
    </telerik:RadNumericTextBox>
                            </li>
                        </ul>


        </ItemTemplate>
</telerik:RadListBox>
        <asp:CustomValidator ID="cvSelectedRoutes" runat="server" Display="None"  Enabled="true"

             ErrorMessage="Please select at least one PPP Route"    ClientValidationFunction="clientValidate"      ></asp:CustomValidator>

    </td>
    <td>
    </td>
    <td style="text-align:right;" width="100%"  valign="bottom">

    </td>
    </tr>
    <tr>
    <td colspan="4">
         <asp:ValidationSummary ID="vsSubscriber" runat="server"
                 DisplayMode="BulletList"  CssClass="validationsummary" HeaderText="<div class='validationheader'> Please correct the following:</div>"   />
    </td>
    <td>
     <asp:Button ID="btnSave" Text="Save" runat="server" CommandName="PerformInsert"
Visible='<%# DataItem is Telerik.Web.UI.GridInsertionObject %>'
        ></asp:Button>

<asp:Button ID="btnCancel" Text="Cancel" runat="server" CausesValidation="False"
CommandName="Cancel"></asp:Button>
    </td>
    </tr>
    </table>
   </td>
   </tr>




</table>
  <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
    <script type="text/javascript">

        function clientValidate(source, args) {
            args.IsValid = true;
            var listbox = $find("<%= rlbSelectedRoutes.ClientID %>");
            if (listbox.get_items().get_count() < 1) {
                args.IsValid = false;
            }

        }

                }


    </script>
</telerik:RadScriptBlock>

[Nencho]

Hello Robert,

I've tried to reproduce the issue you experience, with the provided resources, but to no avail. Could you provide us a runnable sample, so we could examine the problem locally?


Kind regards,
Nencho
the Telerik team

[Bob]

I will try to get a sample uploaded.  Until then, here is a link to a solution for this issue when the listbox is on a tab:  http://www.telerik.com/community/forums/aspnet-ajax/listbox/listbox-buttons-hides-behind-the-listbox.aspx

In my case there is a tab however since the listbox isn't displayed until editing the grid row the solution doesn't work for me.