Sometimes there is a requirement to overlay a group of fields over other controls. One example is layering some controls such as anchors, images or buttons (e.g. Add, Update, Delete), over a BorderedGroup Heading bar.
This is possible by using some advanced CSS techniques.
Within a BorderedGroup you could add another Layout Group with the controls you wish to float over the top of the Bordered Group title bar.
On the Field Details screen, we would recomend two steps for the Layout Group:
For the CSS Override field, three elements are required:
An example could be: position:absolute; top: 3px; right:3px;
This would move the Layout Group to the top of the Bordered Group. It then moves it down slightly, and places it on the right hand edge of the bar.
It is important to remember that the positioning is based on the Bordered Group container as a whole. So, if you wanted the group to appear somewhere after the Bordered Group title text, then you would set the left value appropriately e.g. left: 100px;
It is possible to layer a number of groups in this manner if required.
This is possible by using some advanced CSS techniques.
Within a BorderedGroup you could add another Layout Group with the controls you wish to float over the top of the Bordered Group title bar.
On the Field Details screen, we would recomend two steps for the Layout Group:
- Set the Force Table Layout checkbox (this is useful to ensure IE6 - IE8 layout is consistent)[/*]
- Add values mentioned below to the CSS override field [/*]
For the CSS Override field, three elements are required:
- position:absolute - This ensures that the Layout Group is repositioned to start from the top of the Bordered Groups container. [/*]
- left or right - This positions the group from the left or right of the container. Typically, only one is used. [/*]
- top - This will decide if the Layout Group is to start slightly lower than the top of the Bordered Group container or not. If it should appear at the very top then set it to . [/*]
An example could be: position:absolute; top: 3px; right:3px;
This would move the Layout Group to the top of the Bordered Group. It then moves it down slightly, and places it on the right hand edge of the bar.
It is important to remember that the positioning is based on the Bordered Group container as a whole. So, if you wanted the group to appear somewhere after the Bordered Group title text, then you would set the left value appropriately e.g. left: 100px;
It is possible to layer a number of groups in this manner if required.