Forums Ultimate UI for ASP.NET Web Forms
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Snoopy
140
WebTextEditor and vertical alignment
posted

How to vertically align text in a WebTextEditor control? There is a property "HorizontalAlign" for alignment in horizontal dimension, but there is no property for vertical alignment!?

I have already tried

style="vertical-align:middle;"

Setting this style attribute obviously does not have any effect! I can set to "top, buttom, text-top, text-buttom" or any other value - the text inside the control is always aligned on top!!!

So is there really no way to vertically align text in a WebTextEditor control???

 

  • 12679
    posted

    Let us know if we can help further .

    Thanks.

  • 24497
    Suggested Answer
    posted

    Hi Snoopy,

    That is correct WebTextEditor does not support vertical alignment. The reason is that most browsers do not allow to customize vertical alignment of text in their INPUT element. Browsers use their defaults and those defaults are different for different browsers. For example IE puts text at the top, but Firefox puts text in the middle.
    Following will be ignored by browsers:
    <ig:WebTextEditor ID="WebTextEditor1" runat="server" Height="50px" style="vertical-align:bottom;"></ig:WebTextEditor>

    The best I can suggest is to use padding-top instead of alignment. However, in this case you should be very carefull about overall height of control. Because if you try something like

    <ig:WebTextEditor ID="WebTextEditor1" runat="server" Height="50px" style="padding-top:30px;"></ig:WebTextEditor>

    then overall height of editor will be not 50px, but 50+30=80px.

    It means you should not set Height at all and to allign text by padding-top/bottom. Of course overall height will depend on height of font and can be different in different browsers.

    If you use editor with buttons, then that will not work, because style will be applied to TABLE and destroy layout. In this case you should hack-into rendering and override attributes of internal INPUT used by WebTextEditor. Below I wrote an example for you. Attributes border and background are optional: they will override special/not-default AppStyling configurations.
    Note: if similar hacks will have side effects, then they should not be used.

    <head runat="server">
     <style type="text/css">
     .bottomAlign INPUT
     {
      padding-top:10px !important;
      height:auto !important;
      border:none !important;
      background:transparent !important;
     }
     </style>
    </head>
    <body>
        <form id="form1" runat="server">
      <asp:ScriptManager runat="server" ID="scr"></asp:ScriptManager>
      <ig:WebTextEditor ID="WebTextEditor4" runat="server" CssClass="bottomAlign">
       <Buttons CustomButtonDisplay="OnRight"></Buttons>
      </ig:WebTextEditor>
      <ig:WebTextEditor ID="WebTextEditor5" runat="server" Height="40px" CssClass="bottomAlign">
       <Buttons CustomButtonDisplay="OnRight"></Buttons>
      </ig:WebTextEditor>
        </form>
    </body>