PDA

View Full Version : [CLOSED] StatusBar : Remove Border



matrixwebtech
May 01, 2015, 12:39 PM
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

23947

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

Daniil
May 01, 2015, 2:27 PM
Hi @matrixwebtech,

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

matrixwebtech
May 01, 2015, 2:40 PM
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
May 04, 2015, 10:06 PM
Setting .BodyCls("my-panel-body") for the Panel and defining this CSS should do the job.

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