RadListBox Button Issue

7 posts, 0 answers
  1. Rick
    Rick avatar
    11 posts
    Member since:
    Oct 2005

    Posted 17 Jan 2013 Link to this post

    Hello,

    I am having an issue with the RadListBox transfer buttons. It is happening in IE and in quirks mode only, yes I know about quirks mode and yes I have to use it for client compatibility issues. The buttons are rendering partially behind the listbox. Please see the screenshot for an example. The settings for the listbox are below though I don't think it is going to matter because what I need is a way to deal with IE5 compliant styling I think.

    <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"   HorizontalAlign="Right" />
    </telerik:RadListBox>

    The one really weird thing is that if I change the AreaWidth to 20, the buttons scoot to the right just a bit but they never fully come out from behind the box. Another weird thing about this is that I took all of the code for the listbox and put it in to a new project and it renders fine, even in quirks mode. I am truly at a loss on this. I am wondering if it has anything to do with the fact that I am using this as a custom control instead of putting it directly in the .aspx page. This is the only difference between the original project and the new test project I made.
  2. Kevin
    Kevin avatar
    360 posts
    Member since:
    Jul 2012

    Posted 21 Jan 2013 Link to this post

    Hello Robert,

    Are you sure there isn't any style that is conflicting with the way the buttons are rendering?
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Rick
    Rick avatar
    11 posts
    Member since:
    Oct 2005

    Posted 22 Jan 2013 Link to this post

    I am fairly sure yes. I have looked through all of the CSS and there is nothing overriding the CSS for this control. It is only happening in quirks mode. If I force IE8 it works fine but then half of the client'st site no longer functions. Any ideas?
  5. Ivan Zhekov
    Admin
    Ivan Zhekov avatar
    540 posts

    Posted 22 Jan 2013 Link to this post

    Hi, Robert.

    I tested with your snippet and I couldn't produce the depicted behvaiour. The only issue i have found that in IE 6 the buttons are slightly wider than in the rest of the skins.

    Which leads me to believe that there might be something specific to your project. Do you happen to have additional styles on the page, that i am not aware of?

    Also ,what is your exact working environment? I would like to test against the same environment as you.

    Regards,
    Ivan Zhekov
    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 RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  6. Rick
    Rick avatar
    11 posts
    Member since:
    Oct 2005

    Posted 23 Jan 2013 Link to this post

    I f you mean which version of the dll I am using it is 2012.2.912.40. I am going to attach the code for the control where this issue is happening. There are some styles in the aspx page but I took them all out just to safe and the same thing occurs which leads me to believe it is somewhere in the control code. I did not write this control so I am not sure what the thought process was behind doing it this way. It was created like 7 years ago. Note that it is the listbox with ID="rlbRoutes" that is the issue


    <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="ClosureAlertSubscriber.ascx.cs" Inherits="Site.Client.Test.ClosureAlertSubscriber" %>
    <%@ 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%;
            color: red;
        }
        .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="Site" Value="Site" Selected="true" />
                        <telerik:RadComboBoxItem Text="Non-Site" Value="NONSite" />
                    </Items>
                </telerik:RadComboBox>
            </td>
        </tr>
        <tr>
            <td colspan="4">
                  
            </td>
        </tr>
        <tr>
            <td>
                <asp:Label id="lblSiteUsers" runat="server" Text="Site Users:" AssociatedControlID="rcbSiteUsers"></asp:Label>
                
                <asp:Label id="lblFirstName" runat="server" Text="First Name:" AssociatedControlID="rtbFirstName" Visible="false"></asp:Label>
            </td>
            <td >
                <telerik:RadComboBox ID="rcbSiteUsers" Runat="server" EmptyMessage="Please select an Site User" MarkFirstMatch="False" Width="360px"  />            
                    <asp:CustomValidator ID="rfvSiteUsers" ErrorMessage="Please select an Site User" Enabled="True" runat="server" Display="None" ClientValidationFunction="userValidate"></asp:CustomValidator>
                <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="400px" 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="400px">
                <ItemTemplate>
                     
                    <ul class="details">
                                <li>
                                <label>Route: </label>
                                    <%# DataBinder.Eval(Container, "Text")%></label>   
                                </li>
                                <li>
                                    <label>
                                        Duration (Hours): </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="5">
             <asp:ValidationSummary ID="vsSubscriber" runat="server"
                     DisplayMode="BulletList"  CssClass="validationsummary" HeaderText="<div class='validationheader'> Please correct the following:</div>"   />
                       
        </td>   
        </tr>
        <tr>
            <td colspan="5">
                <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) {
                //alert('im here! 1111');
                args.IsValid = true;
                var listbox = $find("<%= rlbSelectedRoutes.ClientID %>");
                if (listbox.get_items().get_count() < 1) {
                    args.IsValid = false;
                }
     
            }
     
            function userValidate(source, arguments)
            {       
     
            arguments.IsValid = true;
     
            var Cbox = $find("<%= rcbSiteUsers.ClientID %>");           
                if (Cbox) {
     
                    if (Cbox.get_selectedIndex() == null || Cbox.get_selectedIndex() == "") {                   
                        arguments.IsValid = false;
                    }               
                }
     
        }
                     
     
        </script>
    </telerik:RadScriptBlock>
  7. Rick
    Rick avatar
    11 posts
    Member since:
    Oct 2005

    Posted 23 Jan 2013 Link to this post

    I tried changing the table data tag that holds this listbox from LTR to RTL and the buttons now show. The issue is that the scrollbar is now on the left side of the box which is abnormal. This tells me that the scrollbar is the problem and is laying over my buttons instead of pushing them out a little to compensate. Any ideas how to deal with this?
  8. Ivan Zhekov
    Admin
    Ivan Zhekov avatar
    540 posts

    Posted 28 Jan 2013 Link to this post

    Hello, Robert.

    I checked the code and I couldn't produce the wrong behaviour.

    True, in quirks mode there was displacement in regards to standard modes, but still nothing out of the ordinary.

    Few things puzzle me in your page -- there is no script manager. The controls require a script manager to function properly. By any chance did you forgot to include it in this snippet, or is there a master page that includes the script manager?

    I am attaching a slightly modified version of your page (so I could run it locally).

    Can you confirm that you still have the issues described? If not, remove the doctype and try again. Then write back with your findings.

    Regards,
    Ivan Zhekov
    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 RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017