Hi,
I have a FormTemplate with a tabstrip containing 2 tabs.
Depending on a condition, the 2nd tab is hidden in code behind.
However, in IE8 the content of this 2nd hidden tab is visible immediately below the bottom of the popup.
This behavior is NOT present in Firefox, Chrome or Safari.
I have attached a screenshot showing the issue.
I have included the declaration for the FormTemplate as well:
Any thoughts on what could be causing this?
Jim
I have a FormTemplate with a tabstrip containing 2 tabs.
Depending on a condition, the 2nd tab is hidden in code behind.
However, in IE8 the content of this 2nd hidden tab is visible immediately below the bottom of the popup.
This behavior is NOT present in Firefox, Chrome or Safari.
I have attached a screenshot showing the issue.
I have included the declaration for the FormTemplate as well:
<
FormTemplate
>
<
div
id
=
"divEdit"
runat
=
"server"
class
=
"formTemplate"
style
=
"height: 520px;"
>
<
div
style
=
"margin-bottom: 4px;"
>
<
telerik:RadButton
ID
=
"btnQSAddUpdate"
runat
=
"server"
Text
=
"Update"
CommandName
=
"Update"
>
</
telerik:RadButton
>
<
telerik:RadButton
ID
=
"btnQSCancel"
runat
=
"server"
Text
=
"Cancel"
CausesValidation
=
"False"
CommandName
=
"Cancel"
>
</
telerik:RadButton
>
</
div
>
<
telerik:RadTabStrip
runat
=
"server"
ID
=
"tabTaskJournal"
MultiPageID
=
"Multipage1"
SelectedIndex
=
"0"
>
<
Tabs
>
<
telerik:RadTab
runat
=
"server"
ID
=
"tabMessages"
Text
=
"Start/End Messages"
PageViewID
=
"pagMessages"
Selected
=
"true"
>
</
telerik:RadTab
>
<
telerik:RadTab
runat
=
"server"
ID
=
"tabDemographics"
Text
=
"Demographics"
PageViewID
=
"pagDemographics"
OnPreRender
=
"tabDemographics_PreRender"
>
</
telerik:RadTab
>
</
Tabs
>
</
telerik:RadTabStrip
>
<
telerik:RadMultiPage
runat
=
"server"
ID
=
"Multipage1"
SelectedIndex
=
"0"
RenderSelectedPageOnly
=
"false"
>
<
telerik:RadPageView
runat
=
"server"
ID
=
"pagMessages"
>
<
table
class
=
"formTemplateTable"
>
<
tr
>
<
td
style
=
"width: 30%;"
>
</
td
>
</
tr
>
<
tr
>
<
td
style
=
"text-align: left;"
>
<
asp:Label
ID
=
"lblBegin"
runat
=
"server"
ToolTip
=
"Specify the start message that will appear at the beginning of the assessment"
Text
=
"Start Content"
Font-Size
=
"Small"
Font-Bold
=
"true"
></
asp:Label
>
<
asp:RequiredFieldValidator
ID
=
"valStartMsg"
runat
=
"server"
ControlToValidate
=
"edtBeginMsgRichText"
ErrorMessage
=
"** REQUIRED **"
></
asp:RequiredFieldValidator
>
</
td
>
</
tr
>
<
tr
>
<
td
>
<
telerik:RadEditor
EnableEmbeddedSkins
=
"true"
Skin
=
"Vista"
ID
=
"edtBeginMsgRichText"
runat
=
"server"
EnableAjaxSkinRendering
=
"true"
Content='<%# Bind("BeginContent") %>'
Width="740px" Height="200px" ImageManager-ViewPaths='<%# (string[])Session["currentCustomerImagesViewPath"] %>'
ImageManager-UploadPaths='<%# (string[])Session["currentCustomerImagesUploadPath"] %>'
ExternalDialogsPath="~/EditorDialogs" ToolTip="Specify the start message that will appear at the beginning of the assessment">
<
Tools
>
<
telerik:EditorToolGroup
Tag
=
"MainToolbar"
>
<
telerik:EditorSplitButton
Name
=
"Undo"
>
</
telerik:EditorSplitButton
>
<
telerik:EditorSplitButton
Name
=
"Redo"
>
</
telerik:EditorSplitButton
>
<
telerik:EditorSeparator
/>
<
telerik:EditorTool
Name
=
"Cut"
/>
<
telerik:EditorTool
Name
=
"Copy"
/>
<
telerik:EditorTool
Name
=
"Paste"
ShortCut
=
"CTRL+V"
/>
</
telerik:EditorToolGroup
>
<
telerik:EditorToolGroup
Tag
=
"Formatting"
>
<
telerik:EditorTool
Name
=
"Bold"
/>
<
telerik:EditorTool
Name
=
"Italic"
/>
<
telerik:EditorTool
Name
=
"Underline"
/>
<
telerik:EditorSeparator
/>
<
telerik:EditorSplitButton
Name
=
"ForeColor"
>
</
telerik:EditorSplitButton
>
<
telerik:EditorSplitButton
Name
=
"BackColor"
>
</
telerik:EditorSplitButton
>
<
telerik:EditorSeparator
/>
<
telerik:EditorDropDown
Name
=
"FontName"
>
</
telerik:EditorDropDown
>
<
telerik:EditorDropDown
Name
=
"FontSize"
>
</
telerik:EditorDropDown
>
</
telerik:EditorToolGroup
>
<
telerik:EditorToolGroup
Tag
=
"Alignment"
>
<
telerik:EditorTool
Name
=
"Indent"
/>
<
telerik:EditorTool
Name
=
"Outdent"
/>
<
telerik:EditorTool
Name
=
"JustifyLeft"
/>
<
telerik:EditorTool
Name
=
"JustifyCenter"
/>
<
telerik:EditorTool
Name
=
"JustifyRight"
/>
<
telerik:EditorTool
Name
=
"JustifyFull"
/>
</
telerik:EditorToolGroup
>
<
telerik:EditorToolGroup
Tag
=
"Tables"
>
<
telerik:EditorSeparator
/>
<
telerik:EditorTool
Name
=
"InsertTable"
/>
<
telerik:EditorTool
Name
=
"ToggleTableBorder"
/>
</
telerik:EditorToolGroup
>
<
telerik:EditorToolGroup
Tag
=
"Lists"
>
<
telerik:EditorTool
Name
=
"InsertUnorderedList"
/>
<
telerik:EditorTool
Name
=
"InsertOrderedList"
/>
<
telerik:EditorTool
Name
=
"InsertHorizontalRule"
/>
</
telerik:EditorToolGroup
>
<
telerik:EditorToolGroup
Tag
=
"ImagesAndLinks"
>
<
telerik:EditorTool
Name
=
"InsertLink"
/>
<
telerik:EditorTool
Name
=
"Unlink"
/>
<
telerik:EditorTool
Name
=
"ImageManager"
/>
</
telerik:EditorToolGroup
>
<
telerik:EditorToolGroup
Tag
=
"Spell"
>
<
telerik:EditorTool
Name
=
"AjaxSpellCheck"
/>
</
telerik:EditorToolGroup
>
</
Tools
>
</
telerik:RadEditor
>
</
td
>
</
tr
>
<
tr
>
<
td
style
=
"text-align: left;"
>
<
asp:Label
ID
=
"Label1"
runat
=
"server"
ToolTip
=
"Specify the start message that will appear at the end of the assessment"
Text
=
"End Content"
Font-Size
=
"Small"
Font-Bold
=
"true"
></
asp:Label
>
<
asp:RequiredFieldValidator
ID
=
"valEndMsg"
runat
=
"server"
ControlToValidate
=
"edtEndMsgRichText"
ErrorMessage
=
"** REQUIRED **"
></
asp:RequiredFieldValidator
>
</
td
>
</
tr
>
<
tr
>
<
td
>
<
telerik:RadEditor
EnableEmbeddedSkins
=
"true"
Skin
=
"Vista"
ID
=
"edtEndMsgRichText"
runat
=
"server"
EnableAjaxSkinRendering
=
"true"
Content='<%# Bind("EndContent") %>'
Width="740px" Height="200px" ImageManager-ViewPaths='<%# (string[])Session["currentCustomerImagesViewPath"] %>'
ImageManager-UploadPaths='<%# (string[])Session["currentCustomerImagesUploadPath"] %>'
ExternalDialogsPath="~/EditorDialogs" ToolTip="Specify the start message that will appear at the end of the assessment">
<
Tools
>
<
telerik:EditorToolGroup
Tag
=
"MainToolbar"
>
<
telerik:EditorSplitButton
Name
=
"Undo"
>
</
telerik:EditorSplitButton
>
<
telerik:EditorSplitButton
Name
=
"Redo"
>
</
telerik:EditorSplitButton
>
<
telerik:EditorSeparator
/>
<
telerik:EditorTool
Name
=
"Cut"
/>
<
telerik:EditorTool
Name
=
"Copy"
/>
<
telerik:EditorTool
Name
=
"Paste"
ShortCut
=
"CTRL+V"
/>
</
telerik:EditorToolGroup
>
<
telerik:EditorToolGroup
Tag
=
"Formatting"
>
<
telerik:EditorTool
Name
=
"Bold"
/>
<
telerik:EditorTool
Name
=
"Italic"
/>
<
telerik:EditorTool
Name
=
"Underline"
/>
<
telerik:EditorSeparator
/>
<
telerik:EditorSplitButton
Name
=
"ForeColor"
>
</
telerik:EditorSplitButton
>
<
telerik:EditorSplitButton
Name
=
"BackColor"
>
</
telerik:EditorSplitButton
>
<
telerik:EditorSeparator
/>
<
telerik:EditorDropDown
Name
=
"FontName"
>
</
telerik:EditorDropDown
>
<
telerik:EditorDropDown
Name
=
"FontSize"
>
</
telerik:EditorDropDown
>
</
telerik:EditorToolGroup
>
<
telerik:EditorToolGroup
Tag
=
"Alignment"
>
<
telerik:EditorTool
Name
=
"Indent"
/>
<
telerik:EditorTool
Name
=
"Outdent"
/>
<
telerik:EditorTool
Name
=
"JustifyLeft"
/>
<
telerik:EditorTool
Name
=
"JustifyCenter"
/>
<
telerik:EditorTool
Name
=
"JustifyRight"
/>
<
telerik:EditorTool
Name
=
"JustifyFull"
/>
</
telerik:EditorToolGroup
>
<
telerik:EditorToolGroup
Tag
=
"Tables"
>
<
telerik:EditorTool
Name
=
"InsertTable"
/>
<
telerik:EditorTool
Name
=
"ToggleTableBorder"
/>
</
telerik:EditorToolGroup
>
<
telerik:EditorToolGroup
Tag
=
"Lists"
>
<
telerik:EditorTool
Name
=
"InsertUnorderedList"
/>
<
telerik:EditorTool
Name
=
"InsertOrderedList"
/>
<
telerik:EditorTool
Name
=
"InsertHorizontalRule"
/>
</
telerik:EditorToolGroup
>
<
telerik:EditorToolGroup
Tag
=
"ImagesAndLinks"
>
<
telerik:EditorSeparator
/>
<
telerik:EditorTool
Name
=
"InsertLink"
/>
<
telerik:EditorTool
Name
=
"Unlink"
/>
<
telerik:EditorTool
Name
=
"ImageManager"
/>
</
telerik:EditorToolGroup
>
<
telerik:EditorToolGroup
Tag
=
"Spell"
>
<
telerik:EditorTool
Name
=
"AjaxSpellCheck"
/>
</
telerik:EditorToolGroup
>
</
Tools
>
</
telerik:RadEditor
>
</
td
>
</
tr
>
</
table
>
</
telerik:RadPageView
>
<
telerik:RadPageView
runat
=
"server"
ID
=
"pagDemographics"
>
<
table
style
=
"width:90%; border-color:Teal; border-width:2px; border-style:solid; margin:25px; padding:10px; "
>
<
tr
>
<
td
style
=
"width: 50%; background-color:#ADDBF7;"
>
<
asp:Label
ID
=
"Label2"
runat
=
"server"
Text
=
"Field Name"
Font-Bold
=
"true"
></
asp:Label
>
</
td
>
<
td
style
=
"width: 25%; text-align: center; background-color:#ADDBF7;"
>
<
asp:Label
ID
=
"Label3"
runat
=
"server"
Text
=
"Capture"
Font-Bold
=
"true"
></
asp:Label
>
</
td
>
<
td
style
=
"width: 25%; text-align: center; background-color:#ADDBF7;"
>
<
asp:Label
ID
=
"Label4"
runat
=
"server"
Text
=
"Mandatory"
Font-Bold
=
"true"
></
asp:Label
>
</
td
>
</
tr
>
<
tr
>
<
td
style
=
"width: 50%; background-color:White;"
>
<
asp:Label
ID
=
"lblFirstName"
runat
=
"server"
Text
=
"First Name"
></
asp:Label
>
</
td
>
<
td
style
=
"width: 25%; text-align: center; background-color:White;"
>
<
telerik:RadButton
ID
=
"chkFirstName_Vis"
runat
=
"server"
Text
=
""
ButtonType
=
"ToggleButton"
ToggleType
=
"CheckBox"
AutoPostBack
=
"false"
OnPreRender
=
"chkFirstName_Vis_Prerender"
>
</
telerik:RadButton
>
</
td
>
<
td
style
=
"width: 25%; text-align: center; background-color:White;"
>
<
telerik:RadButton
ID
=
"chkFirstName_Man"
runat
=
"server"
Text
=
""
ButtonType
=
"ToggleButton"
ToggleType
=
"CheckBox"
AutoPostBack
=
"false"
>
</
telerik:RadButton
>
</
td
>
</
tr
>
<
tr
>
<
td
style
=
"width: 50%; border-color:Teal; background-color:#EFEFF7;"
>
<
asp:Label
ID
=
"lblLastName"
runat
=
"server"
Text
=
"Last Name"
></
asp:Label
>
</
td
>
<
td
style
=
"width: 25%; text-align: center; background-color:#EFEFF7;"
>
<
telerik:RadButton
ID
=
"chkLastName_Vis"
runat
=
"server"
Text
=
""
ButtonType
=
"ToggleButton"
ToggleType
=
"CheckBox"
AutoPostBack
=
"false"
>
</
telerik:RadButton
>
</
td
>
<
td
style
=
"width: 25%; text-align: center; background-color:#EFEFF7;"
>
<
telerik:RadButton
ID
=
"chkLastName_Man"
runat
=
"server"
Text
=
""
ButtonType
=
"ToggleButton"
ToggleType
=
"CheckBox"
AutoPostBack
=
"false"
>
</
telerik:RadButton
>
</
td
>
</
tr
>
<
tr
>
<
td
style
=
"width: 50%; background-color:White;"
>
<
asp:Label
ID
=
"lblCompany"
runat
=
"server"
Text
=
"Company"
></
asp:Label
>
</
td
>
<
td
style
=
"width: 25%; text-align: center; background-color:White;"
>
<
telerik:RadButton
ID
=
"chkCompany_Vis"
runat
=
"server"
Text
=
""
ButtonType
=
"ToggleButton"
ToggleType
=
"CheckBox"
AutoPostBack
=
"false"
>
</
telerik:RadButton
>
</
td
>
<
td
style
=
"width: 25%; text-align: center; background-color:White;"
>
<
telerik:RadButton
ID
=
"chkCompany_Man"
runat
=
"server"
Text
=
""
ButtonType
=
"ToggleButton"
ToggleType
=
"CheckBox"
AutoPostBack
=
"false"
>
</
telerik:RadButton
>
</
td
>
</
tr
>
<
tr
>
<
td
style
=
"width: 50%; background-color:#EFEFF7;"
>
<
asp:Label
ID
=
"lblEmail"
runat
=
"server"
Text
=
"Email Address"
></
asp:Label
>
</
td
>
<
td
style
=
"width: 25%; text-align: center; background-color:#EFEFF7;"
>
<
telerik:RadButton
ID
=
"chkEmail_Vis"
runat
=
"server"
Text
=
""
ButtonType
=
"ToggleButton"
ToggleType
=
"CheckBox"
AutoPostBack
=
"false"
>
</
telerik:RadButton
>
</
td
>
<
td
style
=
"width: 25%; text-align: center; background-color:#EFEFF7;"
>
<
telerik:RadButton
ID
=
"chkEmail_Man"
runat
=
"server"
Text
=
""
ButtonType
=
"ToggleButton"
ToggleType
=
"CheckBox"
AutoPostBack
=
"false"
>
</
telerik:RadButton
>
</
td
>
</
tr
>
<
tr
>
<
td
style
=
"width: 50%; background-color:White;"
>
<
asp:Label
ID
=
"lblCountry"
runat
=
"server"
Text
=
"Country (dropdown list)"
></
asp:Label
>
</
td
>
<
td
style
=
"width: 25%; text-align: center; background-color:White;"
>
<
telerik:RadButton
ID
=
"chkCountry_Vis"
runat
=
"server"
Text
=
""
ButtonType
=
"ToggleButton"
ToggleType
=
"CheckBox"
AutoPostBack
=
"false"
>
</
telerik:RadButton
>
</
td
>
<
td
style
=
"width: 25%; text-align: center; background-color:White;"
>
<
telerik:RadButton
ID
=
"chkCountry_Man"
runat
=
"server"
Text
=
""
ButtonType
=
"ToggleButton"
ToggleType
=
"CheckBox"
AutoPostBack
=
"false"
>
</
telerik:RadButton
>
</
td
>
</
tr
>
<
tr
>
<
td
style
=
"width: 50%; background-color:#EFEFF7;"
>
<
asp:Label
ID
=
"lblSubdivision"
runat
=
"server"
Text
=
"State/Province"
></
asp:Label
>
</
td
>
<
td
style
=
"width: 25%; text-align: center; background-color:#EFEFF7;"
>
<
telerik:RadButton
ID
=
"chkSubdivision_Vis"
runat
=
"server"
Text
=
""
ButtonType
=
"ToggleButton"
ToggleType
=
"CheckBox"
AutoPostBack
=
"false"
>
</
telerik:RadButton
>
</
td
>
<
td
style
=
"width: 25%; text-align: center; background-color:#EFEFF7;"
>
<
telerik:RadButton
ID
=
"chkSubdivision_Man"
runat
=
"server"
Text
=
""
ButtonType
=
"ToggleButton"
ToggleType
=
"CheckBox"
AutoPostBack
=
"false"
>
</
telerik:RadButton
>
</
td
>
</
tr
>
<
tr
>
<
td
style
=
"width: 50%; background-color:White;"
>
<
asp:Label
ID
=
"LblJobFunction"
runat
=
"server"
Text
=
"Job Function (dropdown list)"
></
asp:Label
>
</
td
>
<
td
style
=
"width: 25%; text-align: center; background-color:White;"
>
<
telerik:RadButton
ID
=
"chkJobFunction_Vis"
runat
=
"server"
Text
=
""
ButtonType
=
"ToggleButton"
ToggleType
=
"CheckBox"
AutoPostBack
=
"false"
>
</
telerik:RadButton
>
</
td
>
<
td
style
=
"width: 25%; text-align: center; background-color:White;"
>
<
telerik:RadButton
ID
=
"chkJobFunction_Man"
runat
=
"server"
Text
=
""
ButtonType
=
"ToggleButton"
ToggleType
=
"CheckBox"
AutoPostBack
=
"false"
>
</
telerik:RadButton
>
</
td
>
</
tr
>
<
tr
>
<
td
style
=
"width: 50%; background-color:#EFEFF7;"
>
<
asp:Label
ID
=
"lblIndustry"
runat
=
"server"
Text
=
"Industry Sector (dropdown list)"
></
asp:Label
>
</
td
>
<
td
style
=
"width: 25%; text-align: center; background-color:#EFEFF7;"
>
<
telerik:RadButton
ID
=
"chkIndustry_Vis"
runat
=
"server"
Text
=
""
ButtonType
=
"ToggleButton"
ToggleType
=
"CheckBox"
AutoPostBack
=
"false"
>
</
telerik:RadButton
>
</
td
>
<
td
style
=
"width: 25%; text-align: center; background-color:#EFEFF7;"
>
<
telerik:RadButton
ID
=
"chkIndustry_Man"
runat
=
"server"
Text
=
""
ButtonType
=
"ToggleButton"
ToggleType
=
"CheckBox"
AutoPostBack
=
"false"
>
</
telerik:RadButton
>
</
td
>
</
tr
>
</
table
>
<
div
style
=
"margin-left: 25px;"
>
<
p
>
Notes on capturing demographics from survey participants:</
p
>
<
ul
>
<
li
>Check the Capture box to prompt the user for the corresponding information </
li
>
<
li
>Check the Mandatory box if the user "must" provide this information before completing
the survey</
li
>
<
li
>The capture of demographics is not gauranteed, since users may opt to close their
browser when this page is presented</
li
>
</
ul
>
</
div
>
</
telerik:RadPageView
>
</
telerik:RadMultiPage
>
</
div
>
</
FormTemplate
>
Any thoughts on what could be causing this?
Jim