PDA

View Full Version : [CLOSED] Panel Title Height



Timothy
Jun 02, 2012, 11:23 PM
Hello,

Just curious with CSS how would one go about changing the height of a title on a panel? I've tried a few methods to get it to be 5 pixels bigger, no luck.

Any suggestions?

Cheers,
Timothy

Vladimir
Jun 03, 2012, 5:24 PM
Do you need increase header height or title element in the header? Or increase title font height?

Timothy
Jun 03, 2012, 5:39 PM
Do you need increase header height or title element in the header? Or increase title font height?

I would like to increase the header height.

Cheers,
Timothy

Vladimir
Jun 03, 2012, 6:02 PM
Please see the following sample


<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html>

<html>
<head id="Head1" runat="server">
<title></title>


<style type="text/css">
.x-big-header .x-panel-header{
height:50px;
}
</style>
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />

<ext:Panel runat="server" Title="Title" Width="200" Height="100" Cls="x-big-header" />
</form>
</body>
</html>

Timothy
Jun 07, 2012, 12:24 PM
Thanks vladsch!

What would you suggest if I have a tool bar attached to my top bar of the panel, it doesn't seem to work correctly?

Cheers,
Timothy

Daniil
Jun 07, 2012, 12:52 PM
I would add

Cls="my-toolbar"
for that Toolbar.

The CSS class definition.

<style type="text/css">
.my-toolbar {
top: 50px !important;
}
</style>

The default is 25px.

Timothy
Jun 07, 2012, 1:25 PM
I've attached an image of what my interface is looking like. I would like to line up the lines on the tree panel on the left with the tab panel and the tool bar on the right. I've split these with a border layout, west and center.

When I adjust the height of the collapsible panel header on the left, it doesn't shift the border line down at all because there is a tool bar attached to it.

Any suggestions?

Cheers,
Timothy

Daniil
Jun 07, 2012, 2:43 PM
Please provide a sample to reproduce.

Timothy
Jun 07, 2012, 3:43 PM
Here is an example, ignore the loading error I didn't provide a nodes.



@(Html.X().Viewport()
.Border(false)
.Layout(LayoutType.Border)
.Items(a =>
{
a.Add(Html.X().Panel()
.BodyStyle("background-color: #333;")
.Border(false)
.Height(26)
.Margins("0 0 1 0")
.Region(Region.North)
);


a.Add(Html.X().TreePanel()
.ID("TreePanel")
.Animate(false)
.Border(false)
.Collapsible(true)
.DisplayField("Name")
.Lines(false)
.Region(Region.West)
.RootVisible(false)
.Split(true)
.StyleSpec("border-right: 1px solid #D0D0D0;")
.UseArrows(true)
.Width(255)
.TopBar(bar =>
bar.Add(Html.X().Toolbar()
.Items(b =>
{
b.Add(Html.X().ToolbarFill());


b.Add(Html.X().Button()
.Icon(Icon.Accept)
.Listeners(listeners =>
{
listeners.Click.Handler = @"#{TreePanel}.collapseAll();";
} )
);


b.Add(Html.X().Button()
.Icon(Icon.Accept)
.Listeners(listeners =>
{
listeners.Click.Handler = @"#{TreePanel}.expandAll();";
} )
);
} )
)
)
);


a.Add(Html.X().Panel()
.ID("Center")
.Border(false)
.Layout(LayoutType.Fit)
.Region(Region.Center)
.StyleSpec("border-left: 1px solid #D0D0D0;")
.Items(b =>
{
b.Add(Html.X().TabPanel()
.Items(c =>
{
c.Add(Html.X().Panel()
.Title("Tab 1")
.TopBar(bar =>
{
bar.Add(Html.X().Toolbar()
.Items(d =>
{
d.Add(Html.X().Button()
.Text("Button")
);
} )
);
} )
);
} )
);
} )
);
} )
)

Daniil
Jun 07, 2012, 4:53 PM
Seems I can't reproduce the problem using the example. Also I can't see any issues on the screenshot you have posted.

Probably, I am missing something simple.

Could you highlight on the screenshot where the problem lies?

Timothy
Jun 07, 2012, 5:25 PM
Seems I can't reproduce the problem using the example. Also I can't see any issues on the screenshot you have posted.

Probably, I am missing something simple.

Could you highlight on the screenshot where the problem lies?

Hello Daniil,

I just want to update the height of the panel header on the left so that the border lines up with the tab panel border on the right, it's 1 px off :) It's not easy to see unless you zoom in on the image, you'll see they are not aligned.

Cheers,
Timothy

Daniil
Jun 07, 2012, 7:24 PM
Got it, thanks for the clarification.

Please set up

.Cls("my-tree")
for the TreePanel and

.Cls("my-toolbar")
for the Toolbar.

Here is the definition of the CSS classes.

CSS

<style type="text/css">
.my-toolbar {
top: 25px !important;
}

.my-tree .x-panel-header {
height: 25px;
}
</style>

Timothy
Jun 08, 2012, 1:50 PM
That worked Daniil, thanks!

Please close.

Cheers,
Timothy