PDA

View Full Version : panel Collapsible icon position issue



AJAIN32
26 May 2015, 7:41 PM
Hi,

I am using some collapsible panels in my code, and i have used some custom icon for expand/collapse. I am trying to put the icon just after the panel title. but i am not able to reduce the gap between title and icon.
I tried following override in css -

.mycss .x-panel-header-text-container{
width : auto !important
}

when i inspect the element, width of the title text container is reduced but the left property of icon still taking the same pixels.

Any suggestion to do that ?

Thanks,
Ankit

Phil Guerrant
27 May 2015, 6:35 AM
You can use the $panel-header-icon-spacing (http://docs.sencha.com/extjs/4.2.3/#!/api/Ext.panel.Panel-css_var-S-panel-header-icon-spacing) variable to configure the space between the panel header icon and the panel header text, or $panel-tool-spacing (http://docs.sencha.com/extjs/4.2.3/#!/api/Ext.panel.Panel-css_var-S-panel-tool-spacing) to configure the space between panel tools (not sure which one you are using). These variables affect all "default ui" panels, but behind the scenes they translate into css margin on the icon or tool elements. You can easily change the spacing on an individual tool or icon by setting its margin in css. The panel header's "box" layout takes the margin of the items into account when laying them out

AJAIN32
27 May 2015, 7:41 AM
Thanks for replying,

i tried with -
.mycss .x-tool
{
left : 100px !important;
}

and it is working fine for the panel on which i want that much space, but this css it used across multiple panels so is there any way to configure it like - whatever title/text i have in the panel, just after that the tool appears ?

and i am not sure about overriding the css variables as you suggested can you please suggest how can i achieve this ?

Thanks,
Ankit

Phil Guerrant
27 May 2015, 7:48 AM
See the theming guide for info on how to use the sass variables http://docs.sencha.com/extjs/4.2.3/#!/guide/theming This is the best way to go if you want to configure things globally.

AJAIN32
27 May 2015, 7:56 AM
Thanks for Quick response,

I dont want to change the sass variable globally to change the behaviour of all panel components, i just want it for few of the panels for which i am using common css, Anything i can do in css to implement this behaviour ?

Putting indvidual css for the panels and overridding the css for tool will resolve the issue, but is there any way to implement it in common css ? The problem is - tool icon should display just after the panel header title (can be of any length). Any suggestion ?

Thanks,
Ankit

Phil Guerrant
27 May 2015, 7:59 AM
Perhaps I misunderstood your initial question. Are you trying to use CSS to change the order of the tool relative to the header text? If so, don't do that, there is a javascript config for that. http://docs.sencha.com/extjs/4.2.3/#!/api/Ext.panel.Header-cfg-titlePosition

AJAIN32
27 May 2015, 8:27 AM
Thanks,

as i understood from this config, this will only do the positioning between 3 elements
Icon
Header Title
expand/collapse icon/tool

can you please help me to understand how i can use this config to achieve what i am trying to do,
as title is already at correct position i just need to control the spacing between title and the tool and that should be auto(depending on the title text length)

Thanks,
Ankit