BarStyle.setPos: Set the position of the Bar on the DFrame.
BarStyle.setWidth: Set the width of the Bar
BarStyle.setAutoWidth: Allow to adjust the width of the Bar to the width of Buttons or to the width of its content.
BarStyle.setHeight: Set the height of the Bar
BarStyle.setAutoHeight: Allow to adjust the height of the Bar to the height of Buttons or to the height of its content.
Syntaxes
BarStyle.setPos(position)
BarStyle.setWidth(number)
BarStyle.setAutoWidth(stringKeyword)
BarStyle.setHeight(number)
BarStyle.setAutoHeight(stringKeyword)
Demo
file: setAutoWidthForBars.html
Run
the example
See the source code
Example
var barStyle = new BarStyle()
bar.setPos([5, 15])
barStyle.setWidth(100)
barStyle.setAutoWidth('CONTENT')
barStyle.setHeight(200)
barStyle.setAutoHeight('CONTENT-')
var bar = dFrame.addBar(barStyle)
position
setPos method only.
If string (not case sensitive).
Can be 'TOP', 'RIGHT', BOTTOM' or 'LEFT'. Indicates the position of the Bar.
If 'TOP' or 'BOTTON'
A Bar is created and will be set at the top or bottom of the DFrame.
The width of the Bar is the one of the DFrame.
The height of the Bar can be adjusted with the setHeight method.
If 'LEFT' or 'RIGHT'
A Bar is created and will be set at the left or right of the DFrame.
The height of the Bar is the one of the DFrame.
The width of the Bar can be adjusted with the setWidth method.
If array indicates coordinates of the bar on the DFrame.
A Floating Bar is created and will be set at its coordinates.
Coordinates are in % of the DFrame's size if numbers, in pixels if strings. Do not forget the brackets.
See position in Reference documentation for more information.
number
setWidth and setHeight methods only. Indicate the width (vertical Bar only) or the height (horizontal Bar only) in pixels.
stringKeyword
setAutoWidth and setAutoHeight methods.
string (not case sensitive):
§ '' (empty string). The width / height of the Bar will be those defined with the setWidth / Height methods.
§
'BUTTON'
§ setAutoWidth. Apply to vertical Bar only. Ignored for horizontal Bars. A Bar is an horizontal Bar if:
§ The startFrom value is set to empty string and the Bar has a position defined by 'TOP' or 'BOTTOM'.
§ The startFrom value is set to 'RIGHT' or 'LEFT'
Indicate that the width of the vertical Bar will be the width the largest Button / Menu inside the bar (+ borders margins and Buttons/Menus spacing).
§ setAutoHeight, Apply to horizontal Bar only. Ignored for vertical Bars. A Bar is a vertical bar if:
§ The startFrom value is set to empty string and the Bar has a position defined by LEFT or 'RIGHT.
§ The startFrom value is set to 'TOP' or 'BOTTOM'
Indicate that the height of the Bar will be the height of the largest Button inside the bar (+ borders margins and Buttons/Menus spacing).
§ 'BUTTON-' : Same as 'BUTTON' but the with (vertical Bar) and height (horizontal Bar) of Buttons of pop-up Menus will be ignored.
§
'CONTENT'
§ setAutoWidth:
Indicate that the width of the Bar will be:
the width of all the Buttons / Menus inside the bar (+ borders margins and Buttons/Menus spacing). for a horizontal Bar
the width of all the Buttons Menus inside the bar (+ borders margins and Buttons/Menus spacing) for a vertical Bar.
§ setAutoHeight:
Indicate that the height of the Bar will be:
the height of all the Buttons inside the bar (+ borders margins and Buttons/Menus spacing). for a vertical Bar
the height of all the Buttons inside the bar (+ borders margins and Buttons/Menus spacing) for a horizontal Bar
The 'BUTTON' keyword means the Bar will have the width / height of the largest Button of the Bar.
If the Bar is an Horizontal Bar and have many Buttons it cannot have the width of one Button and thus the setAutoWidth method used the 'BUTTON' is disabled. (Same / symmetric for Vertical Bars and setAutoHeight).
The width/height of a Bar
will never be smaller than dimensions set either by the setWidth/Height methods
of BarStyle or in the setPos methods if the Bar is a floating Bar.
Caution 1: If, for instance, you prepare a Style for a vertical Bar, set
a width and then use this Style as a default BarStyle the width you set will,
of course, apply:
var barStyle = new BarStyle()
barStyle.setPos('LEFT')
barStyle.setWidth(180)
dFrameStyle.setDefaultBarStyle(barStyle)
…
var bar = dFrame.addBar([10, 10, '*', '*'])
You will get a bar with a width of 180, unless you reset the width to 0
bar.setWidth(0)
On the contrary if you want a Bar to have a fixed width/height you must use the setWidth/Height methods AND set the autoWidth/Height to '' (empty string) as the default value is 'BUTTON'.
Note that the setPos values is overwritten by the position parameter if set in the instantiation of the object.
Caution 2: Once a page in inserted in a DFrame the size of the page in the DFrame is no longer reevaluated if the size of Bars change: this can cause problem with task Bars: The size of the Bar can change when the first Button is created on the Bar. In order to avoid this problem set a height to task Bars so that the height of task Bars do not change with the creation of Buttons.