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.
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.
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.
6 Answers, 1 is accepted
0

Kevin
Top achievements
Rank 2
answered on 21 Jan 2013, 07:38 PM
Hello Robert,
Are you sure there isn't any style that is conflicting with the way the buttons are rendering?
Are you sure there isn't any style that is conflicting with the way the buttons are rendering?
0

Melanie
Top achievements
Rank 1
answered on 22 Jan 2013, 01:59 PM
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?
0
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
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.
0

Melanie
Top achievements
Rank 1
answered on 23 Jan 2013, 02:14 PM
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
>
0

Melanie
Top achievements
Rank 1
answered on 23 Jan 2013, 02:36 PM
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?
0
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
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.