[CLOSED] TextArea custom CSS

  1. #1

    [CLOSED] TextArea custom CSS

    Hi,

    I'm trying to stylize a TextArea using its styling attributes. The "Cls" or "ComponentCls" attributes don't result in the correct behavior. I'm not sure which attribute is responsible for stylizing the editor or "main" component. Please point me in the right direction.

    <%@ Page Language="C#" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                TextArea1.Text = "Some text goes here...";
            }
        }
    </script>
    <!DOCTYPE html>
    <html>
    <head runat="server">
        <title>TextArea - Ext.NET Examples</title>
        <ext:ResourcePlaceHolder ID="ResourcePlaceHolder1" runat="server" Mode="Script" />
        <ext:ResourcePlaceHolder ID="ResourcePlaceHolder2" runat="server" Mode="Style" />
        <script type="text/javascript">
        </script>
        <style>
            .my-text-area {
                background-color: blue;
            }
        </style>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server">
            </ext:ResourceManager>
            <ext:Viewport ID="Viewport1" runat="server" Layout="FitLayout">
                <Items>
                    <ext:FormPanel runat="server" Padding="10" ButtonAlign="Left" Frame="false" Border="true">
                        <Items>
                            <ext:TextArea ID="TextArea1" runat="server" AutoScroll="true"
                                AnchorHorizontal="100%" FieldLabel="My Notes" Height="200" MaxWidth="685"
                                SubmitValue="false" EnableKeyEvents="true" AllowBlank="false" Cls="my-text-area">
                            </ext:TextArea>
                        </Items>
                        <BottomBar>
                            <ext:Toolbar runat="server">
                                <Items>
                                    <ext:Button runat="server" Text="Toggle">
                                    </ext:Button>
                                </Items>
                            </ext:Toolbar>
                        </BottomBar>
                    </ext:FormPanel>
                </Items>
            </ext:Viewport>
        </form>
    </body>
    </html>
    Last edited by fabricio.murta; Sep 02, 2015 at 4:17 PM. Reason: [CLOSED]
  2. #2
    Hi Vadym,

    Please change the CSS rule to:
    .my-text-area textarea {
        background-color: blue;
        background-image: none;
    }
    I really recommend you to master a technique which is demonstrated in this video. This is going to save your time.
    CSS Change TabPanel Header Color - Ext.NET on Vimeo
    Last edited by Daniil; Sep 01, 2015 at 11:06 PM.
  3. #3
    Thanks, Daniil, that was helpful. I've already been using IE Development tools console to help untangle CSS conundrums. I just need to do a better job about it.

Similar Threads

  1. [CLOSED] TextArea's RightButtons vs TextArea's height
    By RCN in forum 3.x Legacy Premium Help
    Replies: 1
    Last Post: Aug 26, 2015, 6:30 AM
  2. Replies: 2
    Last Post: Jan 09, 2012, 7:18 AM
  3. [CLOSED] Custom event in custom tree panel not being generated
    By anup in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Dec 31, 2011, 8:45 PM
  4. [CLOSED] Custom validator for TextArea
    By shahidmughal in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Feb 04, 2010, 7:05 PM
  5. Custom Search on TextArea
    By mj.daly in forum 1.x Help
    Replies: 2
    Last Post: Feb 02, 2010, 9:37 AM

Tags for this Thread

Posting Permissions