RadTextBox oddity

Posted by Community Admin on 04-Aug-2018 18:20

RadTextBox oddity

Sitefinity - Front- & Back-End Development

All Replies

Posted by Community Admin on 14-May-2011 00:00

Could someone have a go at explaining what I'm doing wrong that would cause a multiline RadTextbox to act as it does in this Jing video link.

This is the markup for the control ...

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="ContactForm.ascx.cs" Inherits="SitefinityWebApp.Controls.ContactForm" %>
<div class="sfContactForm">
    <telerik:RadTextBox runat="server" ID="RadTextBox1" Label="Full name: " LabelCssClass="sfContactFormLabel" Width="400px"/>
    <br/>
    <telerik:RadTextBox runat="server" ID="RadTextBox3" Label="Address: " LabelCssClass="sfContactFormLabel"  TextMode="MultiLine" Width="500px" Wrap="true" Height="80px"/>
    <br/>
    <telerik:RadTextBox runat="server" ID="txtPhone" Label="Telephone: " LabelCssClass="sfContactFormLabel" EmptyMessage="Include dialing code" Width="250px"/>
    <br/>
    <telerik:RadTextBox runat="server" ID="RadTextBox4" Label="Email: " LabelCssClass="sfContactFormLabel" Width="300px"/>
    <br/>
    <br/>
    <telerik:RadTextBox runat="server" ID="RadTextBox5" Label="Subject: " LabelCssClass="sfContactFormLabel" Width="300px"/>
    <br/>
    <telerik:RadTextBox runat="server" ID="RadTextBox2" Label="Message: " LabelCssClass="sfContactFormLabel" EmptyMessage="Enter your message here. Provide as much detail as you need" TextMode="MultiLine" Width="500px" Wrap="true" Height="80px"/>
    <br/>
    <div style="clear:both">
        <!-- -->
    </div>
    <div style="text-align:center;margin-top:20px;">
        <telerik:RadButton runat="server" ID="btnSubmit" ButtonType="LinkButton" OnClick="btnSubmit_Click" Text="Submit"/>
    </div>
</div>

Thanks in anticipation.

-- 
Stuart

Posted by Community Admin on 18-May-2011 00:00

Hi Stuart Hemming,

Am I missing something? I have tried creating a user control with this markup and adding it to front end pages. I do not get the resizing option at all? Can you please let me know where are you using the controls? Are they in a control designer or somewhere else?

Best wishes,
Radoslav Georgiev
the Telerik team

Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

Posted by Community Admin on 18-May-2011 00:00

Radoslav,

All I did was write the code I posted in VS2010 and then registered the control in the sitefinity backend as directed in this documentation page then dragged the control from the toolbox to the page.

-- 
Stuart

Posted by Community Admin on 18-May-2011 00:00

Hi Stuart Hemming,

Thank you for the clarification. I will need to ask you something else though. Are you using a custom template/theme. Anything that might have a javascript or something to enable this "extension of the text area" behavior? What other controls are there on the page? As mentioned I used exactly the same code on a page with the built in them and one of the built templates.

Regards,
Radoslav Georgiev
the Telerik team

Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

Posted by Community Admin on 18-May-2011 00:00

Radoslav,

The site was build using the 4.0 Charity starter kit and I'm using the templates from that. I've modified the theme a bit and include the main.css I'm using below.

I assume that whilst it's now been taken down from your website you still have access to the starter kit internally.

/* -------------------------------------------------------------------- */
/* HTML styles */
 
.sf_cols:after
content: "" !important;
 
 
body
    background-color: #262626;
    margin: 0px;
    top: 0px;
    font-size: 14px;
    font-family: Arial;
    color: Black;
 
fieldset
    border: none;
 
a
    color: #6F006F;
 
.sfContentBlock blockquote
    margin: 15px 0 0 0 !important;
    position: relative;
    font-family: Times New Roman;
    font-size: 18px;
    line-height: 30px;
    color: #666;
    text-align: center;
    padding: 20px 40px;
    background-image: url(../Images/quote_bg.jpg);
    background-position:center;
    background-color:#EFEFEF;
    background-repeat: no-repeat;
    text-shadow: 1px 1px 0px #fff;
 
address
    font-style: normal;
 
/* -------------------------------------------------------------------- */
/* Primary styles */
 
#wrapper
    position:relative;
    margin: 20px auto;
    width: 900px;
 
.main
    margin-top:15px;
    background: #efefef;
    color: #444;
    line-height: 1.5em;
 
.content
    background-image: url(../Images/vertical_separator.jpg);
    background-position: right;
    background-repeat: repeat-y;
.content .sf_colsIn
    margin-right: 15px;
 
 
.content h1
    background-color: #FFFFFF;
    background-image: url('../Images/HSection600.png');
    background-repeat: repeat-y;
     
    font-size: 1.3em;
    font-weight: bold;
    color: White;
    text-shadow: 1px 1px 0px #000;
    margin: 0 0 1em 0;
    padding: 0.30em;
 
.sidebar h2
    background-color: #FFFFFF;
    background-image: url('../Images/HSection275.png');
    background-repeat: repeat-y;
     
    font-size: 1.3em;
    font-weight: bold;
    color: White;
    text-shadow: 1px 1px 0px #000;
    margin: 0 0 1em 0;
    padding: 0.30em;
 
.left-sidebar
    background-color: #FFFFFF;
    background-image: url('../Images/HSection275.png');
    background-repeat: repeat-y;
 
.left-sidebar h2
    font-size: 1.3em;
    font-weight: bold;
    color: White;
    text-align:center;
    text-shadow: 1px 1px 0px #000;
    margin:0;
    padding:20px 0;
 
/* -------------------------------------------------------------------- */
/* Header styles */
 
.header
    background-color:#600060;
    background-image: url('../Images/HSection900.png');
    background-repeat: repeat-y;
 
.header .logo
    position: relative;
    width: 360px;
    height: 119px;
    display: block;
    background-image: url('../Images/logo.png');
    background-repeat: no-repeat;
 
 
.header .logo h1
    position: absolute;
    font-family: Tahoma, Geneva, sans-serif;
    font-style: italic;
    text-shadow: 1px 1px 0 #000;
    font-size: 2em;
    color: White;
    top: 15px;
    left: 82px;
 
.header .logo h2
    font-size: 1em;
    font-weight: bold;
    position: absolute;
    top: 56px;
    left: 120px;
    text-shadow: 1px 1px 0 #000;
    color: White;
 
.header a:hover
    background-position: 0 -119px;
 
.header .search
    position: relative;
 
/* -------------------------------------------------------------------- */
/* Navigation Menu styles */
 
.RadTabStripVertical li a
 
    font-weight: bold;
    color: White;
    text-shadow: 1px 1px 0px #000;
    padding: 0 7px 0 19px;
 
.RadTabStripVertical .rtsUL
  padding: 0 0 0 20px;   
 
.RadTabStripVertical .rtsLink
    text-align: center;
 
.RadTabStrip_menu
    position: relative;
    float: left;
    width: 100%;
    line-height: 40px;
    border-top: 1px solid #500050;
    border-bottom: 1px solid #500050;
    background-color: #6F006F;
 
.RadTabStrip_menu .rtsLI a
    color: White;
    display: block;
    text-align: center;
    border-bottom: 2px solid #6F006F;
    text-decoration: none;
    cursor: pointer !important;
 
.RadTabStrip_menu a:hover,
.RadTabStrip_menu a.rmSelected,
.RadTabStrip_menu a.rmExpanded
    display: block;
    background-color: #800080;
    border-bottom: 2px solid #C000C0;
.RadMenu_menu
    position: relative;
    float: left;
    width: 100%;
    line-height: 40px;
    border-top: 1px solid #500050;
    border-bottom: 1px solid #500050;
    background-color: #6F006F;
 
.RadMenu_menu a.rmLink
    color: White;
    display: block;
    text-align: center;
    border-bottom: 2px solid #6F006F;
    text-decoration: none;
    cursor: pointer !important;
    padding: 0 7px 0 19px;
 
.RadMenu_menu a:hover,
.RadMenu_menu a.rmSelected,
.RadMenu_menu a.rmExpanded
    display: block;
    background-color: #800080;
    border-bottom: 2px solid #C000C0;
 
.RadMenu_menu .rmGroup
    background-color: #6F006F;
    border-top: 1px solid #500050;
 
.RadMenu_menu .rmGroup a
    border-left: 2px solid #6F006F;
 
.RadMenu_menu .rmGroup a:hover,
.RadMenu_menu .rmGroup .rmSelected
    border-bottom: none;
    border-left: 2px solid #C000C0;
 
/* -------------------------------------------------------------------- */
/* Banner styles */
 
.banner
    height: 280px;
 
.banner-left
    height: 280px;
    overflow: hidden;
 
.banner-right
    height: 280px;
    overflow: hidden;
    background-image: url(../Images/header_right.jpg);
    color: #ccc;
    line-height: 22px;
 
.banner-right h3
    font-size: 22px;
    color: White;
    font-weight: normal;
    margin-bottom: 10px;
    font-family: Times New Roman;
    border-bottom: 1px solid #707070;
    padding-bottom: 10px;
 
.banner-right a
    display: block;
    position: relative;
    float:left;
    padding-left: 40px;
    height: 33px;
    line-height: 33px;
    padding-right: 10px;
    background-image: url(../Images/donate.png);
    color: White;
    font-weight: bold;
    text-shadow: 1px 1px 0px #000;
    text-decoration: none;
    border-right: 1px solid #13405b;
 
.banner-right a:hover
    background-position: 0 -33px;
 
/* -------------------------------------------------------------------- */
/* Homepage styles */
 
.body h2,
.homepage h2
    background-color: #0c9cca;
    font-size: 16px;
    font-weight: bold;
    color: White;
    text-shadow: 1px 1px 0px #000;
    width: 98%;
    margin-top: 0px;
    padding-left: 2%;
    padding-top: 10px;
    padding-bottom: 10px;
 
.three_col_split h2
    background-color: #FFFFFF;
    background-image: url('../Images/HSection265.png');
    background-repeat: repeat-y;
 
.homepage .sfnewsListItem
    margin-right: 50px;
    background: url('../images/news.png') left 8px no-repeat;
    padding: 8px 0 8px 45px;
     
 
.homepage .sfeventListItem
    margin-right: 50px;
    background: url('../images/calendar.png') left 8px no-repeat;
    padding: 8px 0 8px 45px;
    border-bottom: 1px dashed #ccc;
 
/* -------------------------------------------------------------------- */
/* News styles */
 
.two_col_Split
    background-color:#FFFFFF;
    margin: 18px 0;   
 
.sfnewsList
    margin: 0;
    padding: 0;
    list-style-type: none;
 
.sfnewsList h3.sfnewsTitle
    margin-bottom: 3px;
 
.sfnewsList h3.sfnewsTitle a
    color: #444444;
    text-decoration: none;
 
.sfnewsList .sfnewsMetaInfo
    margin: 0px;
 
.sfnewsSummary
    margin: 10px 0px;
 
.sfnewsListItem
    padding-bottom: 10px;
    margin-right: 20px;
    border-bottom: 1px dashed #ccc;
 
.sfnewsDetails .sfcommentsForm
    padding: 0;
    margin: 0;
 
.sfnewsDetails .sfcommentsForm ol.sfcommentsFieldsList
    list-style: none;
    padding: 0;
    margin: 0;
 
.sfnewsDetails .sfcommentsForm ol.sfcommentsFieldsList li
    margin: 5px 0 5px 0;
 
.sfnewsDetails .sfnewsContent
    padding-bottom: 20px;
    border-bottom: 1px dashed #ccc;
 
.sfnewsDetails .sfcommentsForm ol.sfcommentsFieldsList input
    width: 300px;
 
.three_col_split h2
    background-color: #600060;
    font-size: 22px;
    text-indent: 15px;
    font-weight: bold;
    color: White;
    text-shadow: 1px 1px 0px #000;
    width: 255px;
    margin-top: 0px;
    padding-top: 15px;
    padding-bottom: 15px;
 
.three_col_split p
    width: 250px;
 
.three_col_split .sf_colsOut img
    width: 255px;
    height: 180px;
 
.iCalFeed
    clear: both;
    text-align: right;
 
.iCalFeed a
    background: url('/images/ical.png') right center no-repeat;
    padding: 8px 38px 8px 38px;
    font-size: .9em;
    text-decoration: none !important;
 
.outlook
    float: right;
    text-align: right;
    background: url('/images/alarm.png') left center no-repeat;
    padding-left: 20px;
    text-decoration: none;
 
/* -------------------------------------------------------------------- */
/* Login styles */
 
.LoginStatus
    text-align:right;
    color: #600060;   
.LoginStatus a
    color: #600060;   
    font-weight: bold;
    text-shadow: 1px 1px 0px #AAA;
    padding: 0 7px 0 19px;
 
.LoginWrapper
    color: White;
    background-color: #600060;
    background-image: url('../Images/HSection900.png');
    background-repeat: repeat-y;
    text-align:center;
 
.LoginWrapper table
    width:100%;
 
.LoginWrapper a
    font-weight: bold;
    color: White;
    text-shadow: 1px 1px 0px #000;
    padding: 0 7px 0 19px;
 
.LoginWrapper ol
    list-style-type:none !important;
 
.sfLoginHelp
    margin-top:20px;
 
/* -------------------------------------------------------------------- */
/* Contact Form styles */
.sfContactFormLabel
    display:block;
    width: 80px !important;
    text-align:right;
 
.riLabel .sfContactFormLabel,
    float:left;
 
.RadCombobox .sfContactFormLabel
    clear:both;
 
 
.RadInput table.riTable td
    vertical-align:top;
 
/* -------------------------------------------------------------------- */
/* Widget icon styles */
 
.RadDock_Sitefinity .rdTable .rdTitleBar .sfTwitterFeedWidget
    background: url('../images/Widgets.png') 3px -38px no-repeat;
 
.RadDock_Sitefinity .rdTable .rdTitleBar .sfYouTubeFeedWidget
    background: url('../images/Widgets.png') 3px -138px no-repeat;
 
.RadDock_Sitefinity .rdTable .rdTitleBar .sfFlickrFeedWidget
    background: url('../images/Widgets.png') 3px -238px no-repeat;
 
.RadDock_Sitefinity .rdTable .rdTitleBar .sfLikeBoxWidget
    background: url('../images/Widgets.png') 3px -338px no-repeat;
 
.RadDock_Sitefinity .rdTable .rdTitleBar .sfiCalFeedwidget
    background: url('../images/Widgets.png') 3px -438px no-repeat;
 
.RadDock_Sitefinity .rdTable .rdTitleBar .sfDonationWidget
    background: url('../images/Widgets.png') 3px -538px no-repeat;
 
.RadDock_Sitefinity .rdTable .rdTitleBar .sfMapWidget
    background: url('../images/Widgets.png') 3px -638px no-repeat;
 
/* -------------------------------------------------------------------- */
/* Events styles */
 
ul.sfeventsList
    padding: 0;
    margin: 0;
    list-style: none;
 
ul.sfeventsList h3.sfeventTitle
    border-bottom: 1px dashed #ccc;
    font-size: 1.5em;
    padding-bottom: 0.5em;
    margin: 0 0 0.25em 3.5em;
 
ul.sfeventsList h3.sfeventTitle a
    color: #444444;
    text-decoration: none;
 
.sfeventsList .sfeventDateSummary
    color: White;
    float: left;
    padding: 0.3em;
    margin: 0 1em 0 0;
    background-color: #464646;
    text-align: center;
    clear: both;
    width: 3.5em;
 
.sfeventsList .sfeventDateSummary div
    line-height: 1.25em;
 
.sfeventsList .sfeventDateSummary .sfeventDay
    font-size: 1.25em;
 
.sfeventListItem
    margin-bottom: 1.5em;
 
/* -------------------------------------------------------------------- */
/* Event Calendar styles */
 
.EventCalendar .rcRow td
    border: 1px solid #EEEEEE !important;  
    height: 100px !important;
 
.EventCalendar .rcTitle:hover
    background-color: #6F006F;
    color: White;
 
.EventCalendar .rcRow td a:hover
    background-color: #ddd;
 
/* -------------------------------------------------------------------- */
/* Event Sidebar styles */
 
ul.sfeventsListSidebar
    list-style: none;
    padding: 0;
    margin: 0;
 
ul.sfeventsListSidebar  li.sfeventListItem
    padding: 0 0 10px 0;
    margin: 10px 0 0 0;
    border-bottom: 1px dashed #ccc;
 
/* -------------------------------------------------------------------- */
/* Facebook styles */
 
.facebookLikeBox
    background-color: White;
 
/* -------------------------------------------------------------------- */
/* Blog styles */
 
ul.sfpostsList
    padding: 0;
    margin: 0;
    list-style: none;
 
ul.sfpostsList .sfpostTitle
    margin-bottom: 0;
    padding-bottom: 0;
 
ul.sfpostsList .sfpostTitle a
    text-decoration: none;
    color: #444444;
 
ul.sfpostsList .sfpostListItem
    border-bottom: 1px dashed #ccc;
 
.sfpostDetails .sfcommentsForm
    padding: 0;
    margin: 0;
 
.sfpostDetails .sfcommentsForm ol.sfcommentsFieldsList
    list-style: none;
    padding: 0;
    margin: 0;
 
.sfpostDetails .sfcommentsForm ol.sfcommentsFieldsList li
    margin: 5px 0 5px 0;
 
.sfpostDetails .sfpostContent
    padding-bottom: 10px;
    margin-bottom: 20x;
    border-bottom: 1px dashed #ccc;
 
.sfpostDetails .sfcommentsForm ol.sfcommentsFieldsList input
    width: 300px;
 
/* -------------------------------------------------------------------- */
/* RSS styles */
 
.rss
    padding-bottom: 20px;
 
/* -------------------------------------------------------------------- */
/* Form styles */
 
.sfFormsEditor .sfFormBox
    margin: 0.5em 0 0.5em 0;
.sfFormsEditor input.sfTxt
    width: 300px;
.sfFormsEditor .sfFormDropdown
    margin: 1em 0 1em 0;
.sfFormsEditor .sfFormDropdown .sfDropdownList
    display: block;
.sfFormsEditor .sfFormDropdown select
    width: 185px;
.sfFormsEditor .sfTxtLbl
    font-weight: bold;
.sfFormsEditor textarea.sfTxt
    width: 400px;
    margin-bottom: 1em;
 
.sfSuccess
    padding-top: 1em;
    font-size: 1.5em;  
    border-top: 1px dashed #ccc;  
 
/* -------------------------------------------------------------------- */
/* Search styles */
 
.header .search .sfsearchBox
    position: absolute;
    top: 40px;
    left: 190px;
    width: 195px;
    background-color: #6F006F;
    padding: 10px;
 
.sfsearchResultsWrp .sfsearchResultTitle
    font-weight: bold;
 
.sfsearchResultsWrp .sfsearchResultUrl
    padding: 0;
    margin: 0;
 
.sfsearchSubmit
    background: url('../Images/search.png');
    border: none;
    text-indent: -999px;
    overflow: hidden;
    vertical-align: middle;
    width: 32px;
    height: 32px;
    padding: 0px;
 
/* -------------------------------------------------------------------- */
/* Footer styles */
 
.footer
    color: #777;
    font-weight: bold;
    margin-top: 15px;
 
.RadTabStrip_footer_menu
    position: relative;
    /*float: left;*/
    text-align:center;
    width: 100%;
    line-height: 40px;
 
.RadTabStrip_footer_menu a
    color: #ccc;
    display: block;
 
.RadTabStrip_footer_menu a:hover
    display: block;
    color : #eee;
 
.RadTabStrip_footer_menu a.rtsLink 
    padding-left: 0px;
    text-align: left;
.RadTabStrip_footer_menu a.rtsLink  span
    padding: 0px;
 
 
.rssfeed
    background: url('/images/rss.png') no-repeat left center;
    padding-left: 35px;
    text-decoration: none;
 
.floatright
    float: right;
    margin: 0px 0px 15px 15px;

-- 
Stuart

Posted by Community Admin on 18-May-2011 00:00

@Stuart

Curious...does it happen outside of SF4?

(which browser, webkit based?)

Posted by Community Admin on 18-May-2011 00:00

Steve,

I've just created a standalone project in VS and used the same control and it doesn't show the resize handles!

Could it be SF4.0 that's doing it?

-- 
Stuart

Posted by Community Admin on 18-May-2011 00:00

I was wondering about that...looked like the drag handle was something i'd get in chrome\safari, but I couldn't replicate on the RadInput demo page.

I'm not sure what CSS style would allow that to happen...have you peeked into what it looks like in firebug?

Happens in all browsers?

Posted by Community Admin on 18-May-2011 00:00

In my sitefinity website I get the handles in Firefox (4) a Chrome, but not in IE8. In a standalone project, I don't see the handles in any of the browsers.

-- 
Stuart

Posted by Community Admin on 23-May-2011 00:00

Hi Stuart Hemming,

Thank you for providing all the necessary information.

The resizing is coming from CSS 3 and Firefox 4.0 and WebKit browsers support it. The multi-line RadTextbox renders a tag <textarea> in the HTML. By default the RadTextbox has the following rule in its embedded styles so that it prevents resizing:

.RadInput textarea
    overflow: auto;
    resize: none;
    vertical-align: bottom;

In WebKit and Firefox 4+, the <textarea> elements are resizable in both directions by default; in order to negate this, you can just use resize: none. If you have disabled the embedded styles of the RadTextbox or are using a reset.css file this might be overridden. Your sample control behaves as expected in the default installation of the education starter kit for 4.1 SP1.

Best wishes,
Radoslav Georgiev
the Telerik team
Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

Posted by Community Admin on 23-May-2011 00:00

Cheers Rado.

Every day's a school day! :-)

-- 
Stuart

This thread is closed