Samples / Controls / sap.ui.core
Enforce Width 'auto'
Some controls (for example the IconTabBar) do not have a 'width' property but still have a default width of 100%. We provide css class 'sapUiForceWidthAuto' to overwrite the control's width in such a case.
- Class
z2ui5_cl_smpc_app_484- Repository
- abap2UI5/samples-controls
- Ports
sap.m.sample.StandardMarginsEnforceWidthAuto- UI5 libraries
- sap.m, sap.ui.core, sap.ui.layout
- Lowest UI5 release
- 1.71
- In the browser
- Runs in the playground
- Controls it builds
- sap.m.FeedInput, sap.m.IconTabBar, sap.m.IconTabFilter, sap.m.Label, sap.m.List, sap.m.Text, sap.ui.core.Title, sap.ui.core.mvc.View, sap.ui.layout.form.SimpleForm
The class
" @keywords standardmargins standard margins sap.ui.core standardmarginsenforcewidthauto icontabbar icontabfilter simpleform title label text list
" @summary Some controls (for example the IconTabBar) do not have a 'width' property but still have a default width of 100%. We provide css class 'sapUiForceWidthAuto' to overwrite the control's width in such a case.
" @origin sap.m.sample.StandardMarginsEnforceWidthAuto - https://sdk.openui5.org/entity/sap.ui.core.StandardMargins/sample/sap.m.sample.StandardMarginsEnforceWidthAuto (status: generated - machine-written, not yet reviewed)
CLASS z2ui5_cl_smpc_app_484 DEFINITION PUBLIC.
PUBLIC SECTION.
INTERFACES z2ui5_if_app.
PROTECTED SECTION.
DATA client TYPE REF TO z2ui5_if_client.
METHODS view_display.
PRIVATE SECTION.
ENDCLASS.
CLASS z2ui5_cl_smpc_app_484 IMPLEMENTATION.
METHOD z2ui5_if_app~main.
me->client = client.
IF client->check_on_navigated( ).
view_display( ).
ENDIF.
ENDMETHOD.
METHOD view_display.
DATA(view) = z2ui5_cl_ui5_view_builder=>factory( ).
view->ele( n = `View` ns = `mvc`
)->a( n = `height` v = `100%`
)->a( n = `xmlns:form` v = `sap.ui.layout.form`
)->a( n = `xmlns:core` v = `sap.ui.core`
)->a( n = `xmlns:mvc` v = `sap.ui.core.mvc`
)->a( n = `xmlns` v = `sap.m`
" the original binds expanded to its own device model's isNoPhone flag -
" the framework's raw device> model expresses the same branch
)->ele( `IconTabBar`
)->a( n = `expanded` v = `{= !${device>/system/phone} }`
)->a( n = `class` v = `sapUiForceWidthAuto sapUiSmallMargin`
)->ele( `items`
)->ele( `IconTabFilter`
)->a( n = `key` v = `info`
)->a( n = `text` v = `Info`
)->ele( n = `SimpleForm` ns = `form`
)->a( n = `layout` v = `ResponsiveGridLayout`
)->ele( n = `title` ns = `form`
)->tag( n = `Title` ns = `core`
)->a( n = `text` v = `A Form`
)->end(
)->tag( `Label`
)->a( n = `text` v = `Label`
)->tag( `Text`
)->a( n = `text` v = `Value`
)->end(
)->end(
)->ele( `IconTabFilter`
)->a( n = `key` v = `attachments`
)->a( n = `text` v = `Attachments`
)->tag( `List`
)->a( n = `headerText` v = `A List`
)->a( n = `showSeparators` v = `Inner`
)->end(
)->ele( `IconTabFilter`
)->a( n = `key` v = `notes`
)->a( n = `text` v = `Notes`
)->tag( `FeedInput`
)->end(
)->end(
)->end(
)->tag( `Text`
)->a( n = `text` v = `The IconTabBar above does not have a width property and renders a default width of '100%'. ` &&
`Therefore we use margin class 'sapUiForceWidthAuto' to set its width to 'auto'. To clear a ` &&
`16px (1rem) space all around, we use class 'sapUiSmallMargin'.`
)->a( n = `class` v = `sapUiExploredNoMarginInfo` ).
client->view_display( view->stringify( ) ).
ENDMETHOD.
ENDCLASS.