Different page style for Mobile , tab and laptop

0
Hello Team. I am new to Mendix and was implementing the LearnNow Training project example mentioned in the Rapid developer tutorial. Question 1 : My question is after adding all fields and Data Grid in overview screen option, it looks good in Computer mode, but in Mobile and Tab mode the screen gets complete distorted. Can any one guide how to keep different setting for each mode. Refer screenshot. Question 2:  How to move or arrange data grid elements manually ? Like changing the position of data navigator ?  Question 3: There are multiple search button one via data grid and one via search bar toggle. I am not able to search bar toggle “Search” button as it give error “A grid with the 'Show search bar' property set to 'With button' requires a search bar toggle button. Either add the button to control or change the property. But I need the row as I have added button like Add, Delete and Edit.  I have not done any manual coding, it all based on drag-drop features of Mendix. Screenshot for Question 1   Laptop View    Question 2: Alignment inside Data Grid   Kindly guide.
asked
2 answers
1

> Question 1 : My question is after adding all fields and Data Grid in overview screen option, it looks good in Computer mode, but in Mobile and Tab mode the screen gets complete distorted. Can any one guide how to keep different setting for each mode. Refer screenshot.

How did you test this? Did you use your developer tools in your browser to select a tablet? If so, be sure to refresh the screen for the other layout to be activated.

> Question 2:  How to move or arrange data grid elements manually ? Like changing the position of data navigator ? 

You can restyle data grids using css or sass. If what you want to do with them is too complex, you can also try using widgets that allow for more flexibility such as the Listview Controls widget.

> Question 3: There are multiple search button one via data grid and one via search bar toggle. I am not able to search bar toggle “Search” button as it give error “A grid with the 'Show search bar' property set to 'With button' requires a search bar toggle button. Either add the button to control or change the property. But I need the row as I have added button like Add, Delete and Edit. 

The names of those search buttons may be a little confusing, but both search buttons do something different. The search button next to “reset” is the one that executes the search. The other search button is only used to expand or collapse the search fields. This means that you always need both of those buttons if you want the search fields to be expandable and collapsible. If you are okay with the search fields always showing, be sure to change that property in the data grid properties:

 

answered
0

 

First of all thanks for lots for your answer. Really appreciate the guidance.

  1. How did you test this? Did you use your developer tools in your browser to select a tablet? If so, be sure to refresh the screen for the other layout to be activated.

         Ans : I am developing and testing it in browser.  Refreshing or changing to Mobile etc does not works

 

  1. You can restyle data grids using css or sass. If what you want to do with them is too complex, you can also try using widgets that allow for more flexibility such as the Listview Controls widget.

 Ans: Can this be done in Browser development also or only in Studio pro

  Looking for your guidance.

 

answered