X

The Mobile & Digital Assistant Blog covers the latest in mobile and conversational AI development and engagement

Stretching AMX components with amx-fitParent and amx-filmStrip-stretchItems styles

Stretching AMX components with amx-fitParent style

If you want any AMX component (that is stretchable, i.e. one that responds to width and height dimensions like a listView or deck) to stretch and take up the size of it's parent component (assuming the parent component is allocating space for children vs. one that is as tall or wide as its children), you can use the amx-fitParent style on that component.

Example 1:

In the example shown below, an amx:deck component is placed within the center facet of a panelStretchLayout. On setting the styleClass attribute to amx-fitParent , the deck component takes up the available width , available height, and stretches to fill up the center facet. You can find this example implementation in the LayoutDemo public sample. Look at tabsTopWithFilmStrip.amx page within the LayoutDemo sample for more details.

<amx:deck displayedChild="item1" styleClass="amx-fitParent" id="d1"/>



Example 2:

In the example shown below, an amx:commandLink component is placed within an amx:filmStripItem component. On setting the styleClass attribute to amx-fitParent, the commandLink component takes up the size of it's parent filmStripItem component.  You can find this implementation in the WorkBetter sample application. Look at login.amx page for more details.

<amx:filmStripItem id="fsi3">

<amx:commandLink id="cl3"
styleClass="amx-fitParent" shortDesc="Login Karen Link">
</amx:commandLink>

</amx:filmStripItem>

Stretching AMX components with amx-filmStrip-stretchItems style 

If you want the filmStripItem component to stretch and take up the size of the filmStrip component, you can set the attribute itemSizing="stretched" on the filmStrip component. Alternatively you can also set the styleClass attribute on the filmStrip component to amx-filmStrip-stretchItems. The former option (setting itemSizing attribute to 'stretched') is the recommended approach.

Example :

In the example shown below, the section highlighted in the red represents a filmStripItem component which is taking up the entire available width and available height of the it's parent (filmStrip) component. You can find this implementation in the LayoutDemo sample application. Look at filmStripWithFlex.amx page for more details.

<amx:filmStrip id="fs1" styleClass="amx-fitParent" itemSizing="stretched">

<amx:filmStripItem id="fsi1">


</amx:filmStripItem>


</amx:filmStrip>

Be the first to comment

Comments ( 0 )
Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.