MenuStyle: setPos

MenuStyle : setWidth

MenuStyle : setAutoWidth

MenuStyle: setPos. Define the position of the Menu.

MenuStyle.setWidth: Set the width of the Menu if autoWidth is set to empty string, set the width of the Menu to a minimal value is autoWidth is set to 'CONTENT'

MenuStyle.setAutoWidth: Allow to adjust the width of the Menu to the width of its content.

Demo

file: setAutoWidthForMenus.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)

Syntaxes

MenuStyle.setPos(position)

MenuStyle.setWidth(number)

MenuStyle.setAutoWidth(stringKeyword)

Parameters

position

setPos method. Array of 2 or 4 values. Indicates coordinates and dimensions of the Menu on a Bar.

Coordinates are in % of the Bar's size if numbers, in pixels if strings. The '*' value allow a centered position.

See position in Reference documentation for more information.

number

setWidth method. Integer. The width of the Menu in pixels

stringKeyword

setAutoWidth method. String (not case sensitive):

§         '' (empty string). The width of the Menu will be the one defined with the setWidth methods.

§          'CONTENT': (default) Set the width of the menu to the width of its content, or if this content is less than the value set with the setWidth method, to this width.

Comment

The width of a Menu and its items are computed with 3 steps:

§         The width of items are first evaluated. They depend on the width and autoWidth parameters of Buttons Styles. The setAutoWidth method of ButtonStyle accepts the 'IMAGE', 'LABEL' and 'MENU' parameters. In this step the 'MENU' parameter is interpreted as 'LABEL'.

§         The width of the Menu is then computed and set to the width indicated by the setWidth and setAutoWidth methods of the MenuStyle. A value of 'CONTENT' for the setAutoWidth sets the width of the Menu to the width of the largest item / Button of the Menu.

§         The items are then resized:

o        To their width if their autoWidth Style values are set to '' (empty string)

o        To the size of the largest item if the setAutoWidth parameter of the Menu is set to 'LARGEST'.

o        To the width of the Menu if their autoWidth parameters are set to 'MENU.

If a Menu as autoWidth set to 'CONTENT' the result will be the same with the autoWidth parameter of items set to 'LARGEST' or 'MENU'. The interest of 'MENU' as a parameter for items is because the width of a Menu is computed with the width of Buttons of the first level only and items of sub levels may be truncated. In this case the autoWidth parameter of the Menus is to set to empty string, the width has to be set manually and the 'MENU' autoWidth value for items / Buttons will allow to 'fill' the Menu with its items.

Notes:

There is no setAutoHeight method for Menus: Menu are always 'autoHeight'

The setPos values will be overwritten by the position parameter if set in the instantiation of the object.