Tuto WEBDEV 25

Part 8: Responsive Web Design 319 • It is also possible to define the behavior of the control when its content is larger than it is. You can: • Enlarge the control and push the other controls. • Truncate the content. • Enable a scrollbar that will always be visible. • Display a scrollbar. ▶ In our example, the edit control and the search buttons are defined as keeping their edit size ("Fixed width" and Fixed height" options). ▶ Run the page test ( among the quick access buttons). • The page appears in test as it was in the editor in Desktop mode. • Reduce the size of your browser. • The edit control and the search button are not resized. ▶ Close the browser and go back to the editor. Order of controls in Responsive Web Design mode We have seen that the pages in Responsive Web Design mode adapt according to the browser size. The override mechanism by slice is used to modify the interface according to the requested slice, especially by modifying the position of the controls. You must pay great attention to this modification of position. Indeed, in a responsive page, you cannot change the order of controls in the page . ▶ To understand the management of order of controls: 1. Open the "WW_Responsive" project if necessary. To do so, in WEBDEV’s home page, click "Tutorial" and select "Responsive Web Design (Exercise)". 2. Open the PAGE_ControlOrder page. ▶ Let’s study this page: 1.  In the Desktop slice, 3 products are presented horizontally.