Customizing EGL mobile widget appearance

You can redefine the appearance for each mobile widget in your style sheet to meet the layout requirement.

About this task

You can change Figure 1 to Figure 2 using the default base class.
Figure 1. Left aligned mobile buttons inside list items
Left aligned mobile buttons inside list items
Figure 2. Right aligned mobile buttons inside list items
Left aligned mobile buttons inside list items

Procedure

  1. See Table 1, the default base class for list item is eglMblListItem, and the default base class for button is eglMblBtn.
  2. Add the following css rules to the style sheet associated with your RUI handler.

    .eglMblListItem .eglMblBtn{ float: right; margin-right: .3em; }

  3. Refresh the visual editor.

Results

You can find that all the mobile buttons inside of the list items are floated right and buttons outside of the list items are not affected.

Feedback