Parent | Child | Previous | Next
 

Window height

Description

Specifies the height of the on-page window where the object will be shown. Leave blank to auto-size based on the object's height. Use CSS syntax (e.g. 5in, 200px)

Adjusting Window Height

  1. In the UX Builder, open the UX Controls page. Go to the Other Controls Menu and scroll down to [Embedded Object].

    images/height.png

  2. Click on [Embedded Object] to add an existing object to a control. A list of your predefined objects to choose from will appear. Select an object.

    images/height2.png
    Use whatever predefined component you have. In this case I am using a component that is a simple ButtonList control titled 'entomology'.

  3. View the component in Live View to see how the object looks inside the new component.

    images/height3.png
    A simple embedded UX component in Live View

  4. Go back to the UX Controls page. On the right hand side of the page in the control properties menu there should be an On-page Window Properties section.

    images/height4.png

  5. Find the Window height property in this section and change the height to something smaller that your embedded object. Use CSS syntax to define the height (e.g. 3in)

    images/height6.png

  6. Run the component in Live View. The component should now appear inside a borderless window set to the height you specified. To add styling and a border to this window see the "Window style" property.

    images/height5.png
    Because a window width has not yet been defined the vertical scroll bar will appear at the edge of the screen