Change the panel's color border

**equiman** · Mar 14, 2013, 3:01 AM

I'm working the color personalizatio, based on this post:
http://forums.ext.net/showthread.php...hadow-on-panel

I have an Ext form panel and I'm trying to change all the border to Yellow and define Padding to 10. But the color steel Gray!

This is the form Panel

<ext:FormPanel 
        runat="server" 
        ID="frmTransaccion" 
        Layout="VBoxLayout" 
        Width="585" 
        Padding="10"
        PaddingSummary="5" 
        Border="true" 
        Frame="true"
        Cls="exito-panel"
        MonitorValid="true">
</ext:FormPanel>

And This is the CSS:

   <style type="text/css">
        .exito-panel .x-panel-body {
            background          :   white !important;
        }
        
        .exito-panel .x-panel-default-framed  {
            background-color    :   rgb(255, 255, 0) !important;
            border-color        :   rgb(255, 255, 0) !important;
        }
    </style>

I use FF debug to know the css tags. This is the web when loads (but the new CSS don't be loaded):
Attachment 5813

To be sure that the CSS tags are right I change t,anually he values directlly on FF ... and can see the Yellow border:

Click image for larger version.

Name: virtual-exito.jpg
Views: 110
Size: 93.6 KB
ID: 5814

What am I doing wrong?

**equiman** · Mar 15, 2013, 2:13 AM

**equiman** · Apr 03, 2013, 12:36 PM

**equiman** · Apr 17, 2013, 2:44 PM

Ok... with IE9 works very good, but when I test with previous version found another problems.

IE 9: all perfect!!!

Click image for larger version.

Name: IE9.png
Views: 48
Size: 88.2 KB
ID: 6047

IE 8: Yellow border is missing

Click image for larger version.

Name: IE8.jpg
Views: 37
Size: 35.7 KB
ID: 6046

IE 7:
- Yellow border is missing
- Field's width is not respected and used the entire width
- Last block (previuos to button) is not centered

Click image for larger version.

Name: IE7.jpg
Views: 34
Size: 36.6 KB
ID: 6045

**Daniil** · Apr 26, 2013, 8:19 AM

Hi @equiman,

Please provide a full (but simplified) test case to work with.

**equiman** · Apr 26, 2013, 8:16 PM

Hi @daniil... thi is the example code.

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>

<!DOCTYPE html>

<html>
<head id="Head1" runat="server">
    <title>Boton de Pagos</title>
    
    <style type="text/css">
    /* Bordes de Panel Principal */ 
    .x-panel-body {
        background          :   white;
    }
        
    .x-panel-default-framed  {
        background-color    :   rgb(249, 232, 12);
        border-color        :   rgb(249, 232, 12);
    }
        
    /* Barras de Herramientas */
    .toolbar {
        border-color        :   rgb(249, 232, 12);
        background-color    :   rgb(249, 232, 12);
        background-image    :   none;
    }
        
    /* Campos  */ 
    .disabledControl   
    {
        background          :   rgb(245, 245, 245); 
    }
    .highlightControl  
    {
        background          :   rgb(253, 246, 157); 
    }
        
    /* Label */

    .x-panel
    {
        font-family         :   Arial, Helvetica, sans-serif;    
    }

    #txTitulo .x-label-value {
        font-size           :   18px;
        font-weight         :   bold;
    }

    #txtIp .x-label-value {
        font-size           :   10px;
        font-weight         :   bold;
    }

    #lblIntro .x-label-value {
        font-weight         :   bold;
    }

    #txtContacto .x-label-value {
        font-size           :   10px;
        font-weight         :   bold;
        text-align          :   center;
    }

    .x-form-item-label {
        font-size           :   14px;
    }

    .x-label-value {
        font-size           :   14px; 
    }

    #txtMax .x-form-item-label {
        color               :   red;
        font-weight         :   bold;
    }

    .x-form-item    
    {
        font-size           :   12px; 
    }

    /* Banners y Decorado */
    #pnlHeader  
    {
        background-color    :   rgb(255, 235, 1);
    }

    #pnlHeader .x-box-inner 
    {
        background-color    :   rgb(255, 235, 1);
    }

    #pnlAside
    {
        background          :   white;
    }

    #pnlNav   
    {
        background          :   white;
    }
    </style>
</head>
<body>
    <form id="Form1" runat="server" autocomplete="off">
        <ext:ResourceManager ID="rmInaltec" runat="server" /> 
        <asp:ScriptManager ID="smInaltec" EnableScriptLocalization="true" runat="server" />
    </form>

    <ext:Panel runat="server" ID="pnlMain" 
        layout="FormLayout" 
        Border="false" 
        MinWidth="1024" 
        MonitorResize="true">
        <Items>
            <ext:Panel ID="pnlHeader" runat="server" 
                PaddingSpec="5 0 5 0" 
                Border="false" 
                MonitorResize="true">
                <LayoutConfig>
                    <ext:HBoxLayoutConfig Align="Middle" Pack="Center" />
                </LayoutConfig>
                <Items>
                    <ext:Image runat="server" ID="headerBanner"
                        ImageUrl="~/Content/images/client/banner-nort.jpg"
                        Align="Middle"
                        Width="1024" Height="140"
                        Border="false" />
                </Items>
            </ext:Panel>
            <ext:Panel runat="server" ID="pnlSection" 
                Layout="HBoxLayout"
                Border="false"
                PaddingSpec="10 0 0 0"
                MonitorResize="true" >
                <Items>
                    <ext:Panel runat="server" ID="pnlNav" Border="false" PaddingSpec="0 10 0 10">
                        <Items>
                            <ext:Image runat="server" ID="leftBanner"
                                ImageUrl="~/Content/client/Exito/banner-west.jpg"
                                Align="Top"
                                Width="244" Height="589" />
                        </Items>
                    </ext:Panel>

                    <ext:Panel ID="pnlLeft" Layout="FitLayout" runat="server" Flex="1" Border="false" MonitorResize="true" />

                    <ext:Panel ID="pnlAside" runat="server" 
                        Border="false" 
                        Shadow="true" 
                        MonitorResize="true">
                        <LayoutConfig>
                            <ext:VBoxLayoutConfig Align="Center" Pack="Start" />
                        </LayoutConfig>
                        <Items>
                            <ext:FormPanel 
                                runat="server" 
                                ID="frmTransaccion" 
                                Layout="VBoxLayout" 
                                Width="585" 
                                PaddingSpec="10 10 10 10"
                                Frame="true"
                                MonitorValid="true">
                                <TopBar>
                                    <ext:Toolbar ID="tbTitulo" runat="server" BaseCls="toolbar" PaddingSpec="0 0 8 0">
                                        <Items>
                                            <ext:Label runat="server" ID="txTitulo" 
                                                Text="TITULO" 
                                                Height="25" />
                                            <ext:ToolbarFill ID="tfTitulo" runat="server"/>
                                            <ext:Label runat="server" ID="txtIp" />
                                        </Items>
                                    </ext:Toolbar>
                                </TopBar>
                                <Content>
                                    <ext:Panel runat="server" ID="pnlDatos" 
                                        Layout="FormLayout" 
                                        Width="585" 
                                        PaddingSpec="10 0 10 64"
                                        PaddingSummary="10" 
                                        Border="false"
                                        MonitorValid="true" >
                                        <Items>
                                            <ext:TextField runat="server" ID="txtOne"
                                                FieldLabel="Field One" 
                                                LabelWidth="150"
                                                Width="390" 
                                                MinLength="16" MaxLength="16" EnforceMaxLength="true" 
                                                MaskRe="[0-9]"
                                                AllowBlank="false" />
                                            <ext:TextField runat="server" ID="txtTwo"
                                                FieldLabel="Field Two" 
                                                LabelWidth="150"
                                                Width="390"
                                                FieldCls="disabledControl"
                                                ReadOnly="true"
                                                AllowBlank="false" />
                                            <ext:TextField runat="server" ID="txtThree"
                                                FieldLabel="Field Three" 
                                                LabelWidth="150"
                                                Width="390"
                                                FieldCls="disabledControl"
                                                ReadOnly="true"
                                                AllowBlank="false" />
                                            <ext:TextField runat="server" ID="txtFour"
                                                FieldLabel="Field Four" 
                                                LabelWidth="150"
                                                Width="390"
                                                FieldCls="disabledControl"
                                                ReadOnly="true"
                                                AllowBlank="false" />
                                            <ext:TextField runat="server" ID="txtMax"
                                                FieldLabel="Field MAX" 
                                                LabelWidth="150"
                                                Width="390"
                                                FieldCls="highlightControl"
                                                ReadOnly="true"
                                                AllowBlank="false" />
                                            <ext:TextField runat="server" ID="txtSix"
                                                FieldLabel="Field Five" 
                                                LabelWidth="150"
                                                Width="390"
                                                FieldCls="disabledControl"
                                                ReadOnly="true"
                                                AllowBlank="false" />
                                        </Items>
                                    </ext:Panel>

                                    <ext:Panel runat="server" ID="pnlContacto" 
                                        Layout="TableLayout" 
                                        Width="585" 
                                        PaddingSpec="0 0 10 90"
                                        Border="false" >
                                        <Items>
                                            <ext:Label runat="server" ID="txtContacto" 
                                                Width="545" 
                                                Html="<p>Text one Text one Text one Text one Text one Text one Text one Text one Text one </p><p>Lunes a Sabado de 7:30 am a 9:00 pm - Domingos y Festivos de 8:00 am a 8:00 pm</p><p>555 55 5555</p><p>5555 5555 </p><p>555555555</p><p>01 8000 555 555</p>">
                                            </ext:Label>
                                        </Items>
                                    </ext:Panel>
                                </Content>     
           
                                <BottomBar>
                                    <ext:Toolbar ID="tbPay" runat="server" BaseCls="toolbar" PaddingSpec="12 0 0 253">
                                        <Items> 
                                            <ext:ImageButton runat="server" ID="btnPagar"
                                                FormBind="false" 
                                                Disabled="false"
                                                Height="32">
                                                <DirectEvents>
                                                    <Click Url="~/Pagos/paymentRequest" 
                                                        CleanRequest="true" >
                                                        <ExtraParams>
                                                            <ext:Parameter Name="p_strTarjeta" Value="#{txtOne}.getValue()" Mode="Raw" />
                                                            <ext:Parameter Name="p_strToken" Value="#{txtToken}.getValue()" Mode="Raw" />
                                                            <ext:Parameter Name="p_strCodComercio" Value="#{txtCodComercio}.getValue()" Mode="Raw" />
                                                            <ext:Parameter Name="p_strUrl" Value="#{txtUrlRetorno}.getValue()" Mode="Raw" />
                                                        </ExtraParams>
                                                    </Click>
                                                </DirectEvents>
                                            </ext:ImageButton>
                                        </Items>
                                    </ext:Toolbar>
                                </BottomBar>
                            </ext:FormPanel>
                        </Items>
                    </ext:Panel>

                    <ext:Panel ID="pnlRight" Layout="FitLayout" runat="server" Flex="1" Border="false" MonitorResize="true" />

                </Items>
            </ext:Panel>
        </Items>
    </ext:Panel>
</body>
</html>

**Daniil** · Apr 29, 2013, 6:53 AM

Thank you.

Originally Posted by equiman

IE 8: Yellow border is missing

IE 7:
- Yellow border is missing

In IE9 (and other modern browsers) frames are done by means of CSS radial (radius) borders. In old browsers like IE8 and IE7 it gets more complicated, because it doesn't support radial (radius) borders.

Each frame's piece is a separate image in IE7/IE8.

Please set up this for the "frmTransaccion" FormPanel.

Cls="yellow-frame"

The CSS rules are:

.yellow-frame .x-frame-tl,
.yellow-frame .x-frame-tc,
.yellow-frame .x-frame-tr,
.yellow-frame .x-frame-ml,
.yellow-frame .x-frame-mr,
.yellow-frame .x-frame-bl,
.yellow-frame .x-frame-bc,
.yellow-frame .x-frame-br {
    background-image: none;
    background-color: rgb(255, 235, 1);
}

Sure, to get radial borders in the corners you have to provide respective images for ".x-frame-tl" (top left), ".x-frame-tr" (top right), ".x-frame-bl" (bottom left), ".x-frame-br" (bottom right).

Originally Posted by equiman

IE 7:
- Field's width is not respected and used the entire width

Please try to replace TextFields'

Width="390"

with

InputWidth="230"

Originally Posted by equiman

IE 7:
- Last block (previuos to button) is not centered

This helps.

#txtContacto .x-label-value p {
    text-align: center;
}

**equiman** · Apr 29, 2013, 2:49 PM

Thanks! @daniil works good... I can live without round borders on IE7 and IE8.

But now I have other questions:

How can I define the width of .yellow-frame border because is less bigger than the IE9.
And How can i remove the gary border over the frame? I'm trying to add Cls="yellow-frame" Border="false" on frmTransaccion but doesn't work.

It's an image update using IE7/IE8

Click image for larger version.

Name: Capture_2013_04_29_09_45_25_886.jpg
Views: 31
Size: 34.5 KB
ID: 6122

Thanks!

**equiman** · Apr 30, 2013, 2:48 PM

**Daniil** · May 01, 2013, 9:48 AM

Originally Posted by equiman

Thanks! @daniil works good... I can live without round borders on IE7 and IE8.

Well, this statement rocks:)

Then I suggest the following.

protected void Page_Load(object sender, EventArgs e)
{
    if (!X.IsAjaxRequest)
    {
        if (RequestManager.IsIE7 || RequestManager.IsIE8)
        {
            this.frmTransaccion.Frame = false;
        }
    }
}

After that you can remove Cls="yellow-frame" and the related CSS rules.

Then replace this:

#frmTransaccion-frame1MC{
    background-color: rgb(249, 232, 12);
}

with

#frmTransaccion {
    background-color: rgb(249, 232, 12);
}

Also add the following rule.

#frmTransaccion .x-panel-body {
    border-width: 0px;
}

Thread: Change the panel's color border

Thread Tools

Search Thread

Display

Change the panel's color border

Similar Threads

how to change color panel header?

[CLOSED] Change Panel color

[CLOSED] How to change the border color of button bar that contents PagginToolBar?

[CLOSED] How to change ComboBox border color using CSS?

[CLOSED] Is there any way to change the top border of a panel where is the title by an image using CSS?

Tags for this Thread

Posting Permissions

Sitemap

Downloads

Resources

Thread: Change the panel's color border

Change the panel's color border

Similar Threads

Tags for this Thread

Posting Permissions

Sitemap

Downloads

Resources

Stay connected with us