[CLOSED] StatusBar : Remove Border

[matrixwebtech]

Hi
I do bellow code

   <style>
       

        .my-statusbar {
            background: #F1F1F1!important;
            /*width: 50px !important;*/
            
        }
      
    </style>

    @(X.Panel()
        //.Width(500)
        .Layout(LayoutType.Fit)
        // .BodyPadding(5)
        .BodyStyle("background-color: #F1F1F1;").Border(false)

        .Items
        (

        /*===========*/

        X.TextArea()
        .EnableKeyEvents(true)
        .Grow(true)
        .GrowMin(100)
        .GrowMax(200)
        .LabelWidth(125)
        .FieldLabel("SMS Body")
        .LabelAlign(LabelAlign.Right)
        //.Listeners(l =>
        //{
        //l.KeyDown.Handler = "charecterValidator()";

        //l.KeyDown.Buffer = 1;
        //})
       // .Validator(v => v.Handler = "return charecterValidator()")
        .ValidatorText("Value not more then 160 char")

        /*============*/

        )
        .BottomBar(
        X.StatusBar()

        .Cls("my-statusbar")
        .DefaultText("")
        .Border(false)
        .BorderSpec("0 0 0 0")
        .Width(125)
        .Items(

        //X.ToolbarFill(),
        X.ToolbarTextItem()
        .ID("wordCount")
        .Text("Words: 0")
        .CtCls("x-status-text-panel"),
        X.ToolbarSeparator(),
        X.ToolbarTextItem()
        .ID("charCount")
        .Text("Char: 0")
        .CtCls("x-status-text-panel")

        )

        ))

please see image also



I want to remove (marked in image) border of the status bar.

[Daniil]

Hi @matrixwebtech,

Please clarify were you able to find a CSS rule that causes appearing of that border?

[matrixwebtech]

I inspect again and found

 <div id="panel-1009" class="x-panel x-panel-default x-border-box" style="height: 123px;">
            <div style="background-color: rgb(241, 241, 241); width: 1600px; left: 0px; top: 0px; height: 103px;" class="x-panel-body x-panel-body-default x-layout-fit x-panel-body-default x-docked-noborder-top x-docked-noborder-right x-docked-noborder-left" id="panel-1009-body">
               
            </div>
          
        </div>

if I set border:none!important for inner div of panel-1009 div then border is disappear , now please assist me how I make this with my code.I mean in where in panel control I set the CSS rule?

[Daniil]

Setting .BodyCls("my-panel-body") for the Panel and defining this CSS should do the job.

<style>
    .my-panel-body {
        border: none !important;
    }
</style>