Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

Radnumerictextbox align right

32 Answers 1039 Views
Input
This is a migrated thread and some comments may be shown as answers.
Gama
Top achievements
Rank 1
Gama asked on 21 Jun 2010, 09:51 PM
I have the following radnumerictextbox which is behaving oddly

<telerik:RadNumericTextBox ID="txtAmount" runat="server" TabIndex="23" MaxLength="15" 
     DataType="System.Decimal" Width="50px" AllowOutOfRangeAutoCorrect="False" MaxValue="922337203685477" 
     Type="Currency" EmptyMessage="$" style="text-align:right" EnabledStyle-HorizontalAlign="Right"  /> 
 

When the page first loads, the textbox is aligned to the left.  As soon as the mouse enters it, it becomes aligned to the right.  How can I make it align to the right when the page first loads?



32 Answers, 1 is accepted

Sort by
0
Gama
Top achievements
Rank 1
answered on 21 Jun 2010, 11:09 PM
Nevermind.  I got it.  I had to add the RTL style.
0
axeuser
Top achievements
Rank 1
answered on 20 Jul 2010, 06:40 PM
how did you do it expecificaly?
0
Carlos Contreras
Top achievements
Rank 1
answered on 08 Oct 2010, 07:01 PM

Hi axeuser!

In order to align a RadNumericTextBox to the right, you could do it from it's design, like this:

<telerik:RadNumericTextBox ID="RadNumericTextBox1" runat="server" AutoPostBack="True" MaxLength="7" MaxValue="21" MinValue="0" OnTextChanged="rntbTipoCambio_TextChanged" Type="Currency" Value="0" Width="63px">
   <EnabledStyle Font-Names="Verdana" HorizontalAlign="Right" />
</telerik:RadNumericTextBox>

I hope it helps you.


Good luck!
0
Stacy
Top achievements
Rank 1
answered on 20 Jun 2011, 01:46 PM
I am getting the same behavior as desribed above, the numbers are left justified but as soon as my mouse hovers over the numeric textbox, they align to the right.  I want them to be right justified all the time.

I have wrapped the original class to create my own class with this:

public class WLPNumericTextBox : RadNumericTextBox
   {
       public WLPNumericTextBox()
       {
           Initialize();
       }
 
       private void Initialize()
       {
           EnabledStyle.HorizontalAlign = HorizontalAlign.Right;
       }

But this seems to have no effect, any ideas?
0
jsearl
Top achievements
Rank 1
answered on 20 Jun 2011, 08:58 PM
I'm having the same issue when using EnabledStyle-HorizontalAlign="Right".  I am only seeing this when using IE9.  It works in previous versions of IE.  I did try what the original poster had described as fixing the problem, which was add the css attribute "direction: rtl;", and this works, but this is a hack.  I don't want to have to do this for every place I have the control right aligned.  Any suggestions for this bug?

Thanks!
0
Martin
Telerik team
answered on 21 Jun 2011, 05:37 PM
Hello Jsearl,

It looks like the reported problem is IE9 related issue. I have forwarded your report to our developers for further investigation. As a workaround you can set the required alignment with CssClass instead:

<%@ Page Language="C#" %>
 
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<head id="Head1" runat="server">
    <style type="text/css">
        .MyClass
        {
            text-align:right;
        }
    </style>
</head>
<body>
    <form id="mainForm" runat="server">
    <asp:ScriptManager runat="server" ID="ScriptManager1">
    </asp:ScriptManager>
    <telerik:RadNumericTextBox ID="RadNumericTextBox1" runat="server" Type="Currency"
         Value="100" EnabledStyle-CssClass="MyClass" />
    </form>
</body>
</html>

I hope this helps.

All the best,
Martin
the Telerik team

Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

0
Datamex
Top achievements
Rank 2
answered on 18 Dec 2012, 03:52 PM
Dear sir/madam,

I'm using the RadNumericTextBox and it works flawless in Internet Explorer 7 and 8. Google Chrome and even Firefox.
However in Internet Explorer 9 it will not align the text to the right (unless I run the browser in Compatibility modus)

I've tried all the following:

<telerik:RadNumericTextBox ID="TotalAccountBalanceTextbox" runat="server" Type="Currency"
   DbValue='<%# Eval("AccountBalanceTwoYearsBefore")  %>' ReadOnly="true" SkinID="ReadOnlyNumericTextBox"
  Style="text-align:right;">
  <DisabledStyle HorizontalAlign="Right" />
  <EnabledStyle HorizontalAlign="Right" />
  <FocusedStyle HorizontalAlign="Right" />
  <ReadOnlyStyle HorizontalAlign="Right" />
</telerik:RadNumericTextBox>


I also modified the SkinID in the .skin file (just for checking)

<telerik:RadNumericTextBox runat="server" SkinId="ReadOnlyNumericTextBox"
  BackColor="LightYellow"
  style="border-color:#8E8E8E #B8B8B8 #B8B8B8 #8E8E8E; text-align:right !important;"
  DisabledStyle-ForeColor="Black"
  EnabledStyle-HorizontalAlign="Right"
  DisabledStyle-HorizontalAlign="Right"
  ReadOnlyStyle-HorizontalAlign="Right"
   />

I've tried the style with and without the !important tag but no matter what I try. In IE9 this box does not align to the right.
When I check the source with the debug viewer (F12) it states 'inline style - text-align:right'.

Can someone please help me with this issue.. (ow and by the way.. 'Not using IE9 is, sadly, not an option')

Thank you in advance!


0
Martin
Telerik team
answered on 19 Dec 2012, 07:57 AM
Hello,

As stated in the previous post, this is IE9 only related issue that can be easily workarounded by using custom CSS class. Here is how your code should be modified:

<style type="text/css">
    .RightAligned
    {
        text-align: right;
    }
</style>


<telerik:RadNumericTextBox ID="TotalAccountBalanceTextbox" runat="server" Type="Currency"
    DbValue='<%# Eval("AccountBalanceTwoYearsBefore")  %>' ReadOnly="true" SkinID="ReadOnlyNumericTextBox"
    Style="text-align: right;" CssClass="RightAligned" >
    <DisabledStyle HorizontalAlign="Right" CssClass="RightAligned" />
    <EnabledStyle HorizontalAlign="Right" CssClass="RightAligned" />
    <FocusedStyle HorizontalAlign="Right" CssClass="RightAligned" />
    <ReadOnlyStyle HorizontalAlign="Right" CssClass="RightAligned" />
</telerik:RadNumericTextBox>

Note that there is no need to change the skin code.

I hope this helps.

Kind regards,
Martin
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
Romi
Top achievements
Rank 1
answered on 22 Jan 2014, 01:05 PM
Hi ,

I am using RadNumerictextbox ,but i am not able to remove caution image from my textbox please help me out i dont want caution image in my textbox ,when a user enter wrong value.

Thanks
Romi
0
Princy
Top achievements
Rank 2
answered on 23 Jan 2014, 05:35 AM
Hi Romi,

Please have a look into the sample code snippet to achieve your scenario.

ASPX:
<telerik:RadNumericTextBox ID="RadNumericTextBox1" runat="server" ClientEvents-OnError="OnError">
</telerik:RadNumericTextBox>

JavaScript:
<script type="text/javascript">
    function OnError(sender, args) {
      args.set_cancel(true);
    }
</script>

Thanks,
Princy.
0
Romi
Top achievements
Rank 1
answered on 23 Jan 2014, 10:57 AM
Hi,

Thanks for your reply, It was useful for us .I want to know one thing that ,can I changed button look  and customized it according to our requirement in radnumericTextbox.

Thanks ,
Romi

0
Princy
Top achievements
Rank 2
answered on 24 Jan 2014, 04:01 AM
Hi Romi,

I guess that you want to customize the RadButton style. You can customize the look of the RadButton either by creating  a Custom Skin for Radbutton or customize the Common Styles as per your requirement. Please elaborate your requirement if it doen't help.

Thanks,
Princy.
0
Romi
Top achievements
Rank 1
answered on 24 Jan 2014, 06:50 AM
Hi,

Actually ,I am asking about RadNumericTextbox Up and down default  button,whether i can change or customize  its look according to our application requirement  using some css or new image for that.
0
Princy
Top achievements
Rank 2
answered on 24 Jan 2014, 07:26 AM
Hi Romi,

You can customize the RadNumericTextBox Button. Please have a look into this help documentation for further information.

Thanks,
Princy.
0
Romi
Top achievements
Rank 1
answered on 24 Jan 2014, 09:06 AM
Hi,

I tried alot but i am not able to change the image (up and down) of radnumerictextbox.Please suggest.
0
Princy
Top achievements
Rank 2
answered on 27 Jan 2014, 03:11 AM
Hi Romi,

Please have a look into the following code snippet which works fine at my end.

ASPX:
<telerik:RadNumericTextBox ID="RadNumericTextBox" runat="server" ShowSpinButtons="True"
    SpinUpCssClass="Upbutton" SpinDownCssClass="Downbutton">
</telerik:RadNumericTextBox>

CSS:
<style type="text/css">
    .Upbutton
    {
        background: url('plus.gif') 0 0 no-repeat !important;
    }
    .Downbutton
    {
        background: url('plus.gif') 0 0 no-repeat !important;
    }
</style>

Thanks,
Princy.
0
Romi
Top achievements
Rank 1
answered on 27 Jan 2014, 06:56 AM
Thanks ,it was useful for me.And it is working as i want .Thanks alot.
0
Romi
Top achievements
Rank 1
answered on 28 Jan 2014, 11:41 AM
Hi,

I am trying to change the image button  of radnumerictextbox ,but it is not working at my end .Their any size  constaint for image .

code snippet :

<style type="text/css">
.riUp Upbutton
{

background-image:url('~/Images/Plus.GIF') 0 0 no-repeat !important;
background-color:Black ;
border-bottom-color:Black;
}
.riDown Downbutton
{
background-color:Black ;
}
</style>


<telerik:RadNumericTextBox ID="rntPriority" runat="server" ClientEvents-OnError="OnError" Height="13px" NumberFormat-DecimalDigits="0" Width="50px" IncrementSettings-InterceptArrowKeys="true" IncrementSettings-InterceptMouseWheel="true"
ShowSpinButtons="true" CssClass="MyEnabledTextBox" SpinUpCssClass="riUp Upbutton" SpinDownCssClass="riDown Downbutton" AutoPostBack="false" ></telerik:RadNumericTextBox>

please suggest me waht is wrong this .I want to change the border of my image area ,but i am not able to do it.
0
Romi
Top achievements
Rank 1
answered on 29 Jan 2014, 07:19 AM
Hi,

Can I changed the back color of up and down button.

Thanks,
Romi Varun
0
Princy
Top achievements
Rank 2
answered on 29 Jan 2014, 08:26 AM
Hi Romi,

Please try the following CSS which works fine at my end.

CSS:
<style type="text/css">
    .riUp
    {
        background:url('plus.gif') 0 0 no-repeat !important;
        background-color:Red !important;
    }
    .riDown
    {
             
        background-color:Red !important;
    }
</style>

Thanks,
Princy.
0
Romi
Top achievements
Rank 1
answered on 29 Jan 2014, 09:10 AM

hi,
Can i place spin buttons inside a textbox.

Thanks

  

 
0
Princy
Top achievements
Rank 2
answered on 30 Jan 2014, 02:45 AM
Hi Romi,

Please try the following CSS to achieve your scenario.

CSS:
<style type="text/css">    
.riUp
{
   background: url('plus.gif') 0 0 no-repeat !important;
   background-color: Red !important;
   margin-left: -15px !important;
}
</style>

Thanks,
Princy.
0
Romi
Top achievements
Rank 1
answered on 04 Feb 2014, 12:27 PM
Hi,

I have a query related to the radgrid control  .I want to display pager style like below format.

Records: 1 to 20 of1, 642 Page: 1

Please suggest.
0
Princy
Top achievements
Rank 2
answered on 05 Feb 2014, 05:18 AM
Hi Romi,

You can set the format of the text that appears in the Pager using the PagerTextFormat property.
Please take a look at this documentation on Using PagerTextFormat to know more about how to set it.

Thanks,
Princy
0
Romi
Top achievements
Rank 1
answered on 05 Feb 2014, 10:34 AM
Hi,

Thanks for your reply,
can we grayout the spin buttons when we open numeric textbox as readonly.
0
Romi
Top achievements
Rank 1
answered on 05 Feb 2014, 10:36 AM
Hi,

Any suggestion at code behind .

Thanks
Romi
0
Princy
Top achievements
Rank 2
answered on 06 Feb 2014, 04:10 AM
Hi Romi,

Please have a look into the following code snippet to achieve your scenario.

JavaScript:
RadNumericTextBox1.ReadOnly = true;
RadNumericTextBox1.SpinDownCssClass = "ChangeColor";
RadNumericTextBox1.SpinUpCssClass = "ChangeColor";  

CSS:
<style type="text/css">
    .ChangeColor
    {
        background: url('plus.gif') 0 0 no-repeat !important;
        background-color : Gray !important;
    }
</style>

Thanks,
Princy.
0
Romi
Top achievements
Rank 1
answered on 11 Feb 2014, 04:45 AM
hi,

How to implement a paging in Telerik Rad grid without postback.Because I have to implement it on modal popup .Please suggest.


Thanks
Romi
0
Romi
Top achievements
Rank 1
answered on 11 Feb 2014, 04:50 AM
Hi,
I have a question this time regarding Telerik rad grid ,actually i am using modal popup in that modal popup ,using rad grid ,but when i did paging it goes to the base page and when it return to the modal popup there is no data to display.This is happening because when i changed my page there is postback ,but i dont want any kind of postback when i do page change.
For this i did pagesize="20" and allowpaging= "true".
Can i do paging without any post back .because this is requirement of my application.I dont want any kind of postback while paging.Because i am not writing any thing on my page index changed.so why there is postback Please suggest me its very urgent.
Thanks
Romi
0
Princy
Top achievements
Rank 2
answered on 11 Feb 2014, 05:58 AM
Hi Romi,

Please try to ajaxify the RadGrid to avoid postback while paging. Please have a look into the sample code snippet which works fine at my end.

ASPX:
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="RadGrid1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="RadGrid1" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>
<telerik:RadWindow ID="RadWindow1" runat="server" VisibleOnPageLoad="true">
    <ContentTemplate>
        <telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="false"      DataSourceID="SqlDataSource1" AllowPaging="true">
            <MasterTableView DataKeyNames="OrderDate" CommandItemDisplay="Top">
                <Columns>
                    <telerik:GridBoundColumn UniqueName="OrderID" DataField="OrderID" HeaderText="OrderID">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="ShipCity" HeaderText="ShipCity" UniqueName="ShipCity" />
                </Columns>
            </MasterTableView>
        </telerik:RadGrid>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:Northwind_newConnectionString%>"
            SelectCommand="SELECT  * FROM [Orders]"></asp:SqlDataSource>
    </ContentTemplate>
</telerik:RadWindow>

Thanks,
Princy.
0
Romi
Top achievements
Rank 1
answered on 12 Feb 2014, 11:48 AM
Hi,

I want to make Radnumerictextbox readonly.In IE its image is blinking.How to make its image disabled also in case of readonly.

Thanks
Romi
0
Princy
Top achievements
Rank 2
answered on 12 Feb 2014, 11:57 AM
Hi Romi,

You can handle the OnError event of RadNumericTextBox to hide the warning image as follows.

ASPX:
<telerik:RadNumericTextBox ID="RadNumericTextBox1" runat="server" ReadOnly="true"
    ClientEvents-OnError="OnError">
</telerik:RadNumericTextBox>

JavaScript:
<script type="text/javascript">
    function OnError(sender, args) {
        args.set_cancel(true);
    }
</script>

Thanks,
Princy.
Tags
Input
Asked by
Gama
Top achievements
Rank 1
Answers by
Gama
Top achievements
Rank 1
axeuser
Top achievements
Rank 1
Carlos Contreras
Top achievements
Rank 1
Stacy
Top achievements
Rank 1
jsearl
Top achievements
Rank 1
Martin
Telerik team
Datamex
Top achievements
Rank 2
Romi
Top achievements
Rank 1
Princy
Top achievements
Rank 2
Share this question
or