How to make Add/Edit pages more friendly on mobile phones

Hi, I haven't ried it, but, there is a button for some controls that say 100% on mobile, you might want to uncheck that and see how it behaves.

Thank you abidcastaneda for the suggestion. I cannot find a button (or setting) that says 100% on mobile or says something similar. Could you please give me a little more direction on where this button/setting is. I appreciate your time.

Hello,

I have been reviewing in Phprunner 10.91, the possibilities of adapting screen designs for mobile viewing cases and the truth is that it has improved pleasantly.

It still is not intuitive, but in this version it allows you to have the design of the page for terminal and for mobile.

In interface design it is necessary to control quite CSS, since through it, the aspects that the issues, which by default are set in phprunner are modified.

In order to help you need to define which interface design is the one you are looking for.

Greetings,
fernando

Thanks Fernando. i stil am not certain how to proceed. I want the website to behave more like an app on a phone in portrait mode I tried using CSS based on the examples in this tutorial https://xlinesoft.com/blog/2022/07/03/using-css-grid-for-mobile-screens-a-complete-tutorial/ but it does not seem to work with the add or edit page. i can get it to work with a list page, but not add or edit. for example, I want to have two fields (First_Name and Last_Name) on a phone as two columns in one row (not stacked into two rows) on the edit page. i appreciate any help or guidance. let me know if additional details or information from me are needed.

Hello,

I have made modifications to the example that I had published in: https://fhumanes.com/blog/otros-ejemplos/crear-una-app-web/

You can run the new version in: https://fhumanes.com/compra/login.php
You can use the user "user1"/"user1" or create your own for you.

I have made enough changes to the standard phprunner solution:

• I have configured it so that it can be installed on the mobile and in Windows. A window will be seen with this aspect:

• I have changed the search field so that it is directly visible.

  
  

• I have changed buttons icons (to give it more size and visibility)

  
  

• I have removed the visualization and editing icon (magnifying glass and pencil), because they are very close together. It is read by pressing the record and passes to View.

  
  

On this example, if you indicate to me / you indicate what other changes you require to make a mobile app, you are going to me and I correct it.

Greetings,
fernando

Thanks again for your help. I logged into your example website and will provide an example of what I am tryign to do using your website.

Example: When I select +PRODUCTO button, I want all fields/elements associated with adding an item to be displayed on the phone in one row. Right now, it stacks data into one column, see included image. Is there a way to keep fields/elements on one row with the buttons at the bottom of the page? Your add item page has several fields so it would be difficult to display in one row on a phone, but my site only has 2 or 3 fields and the length of each field is short so there would be enough space on mobile phone to display. Using your website, could you display Grupo and Producto on one row, then underneath it display Cantidad and Unidad in row two.. And under both row, display the buttons.

Hello @JB1K:

I think the example you already have what you asked.

The CSS code is included in the pages (special mobile) that the project has. This is the CSS included:

I will publish the example on my blog with all the explications and complete code, so that everyone can see, study and modify it.

Any additional thing that you and any other developer require, please send me to my email.

Greetings,
fernando

Hi Fernando,

The current example is not what I am looking for. I mocked up one of your screen layouts to represent what I am trying to do (see image below). I understand that my layout my not make sense for your example. For example, there would not be enough space to truly have all four columns fit based on their width. But for my website, my data fields are have short values like a drop down with Yes/No, a dropdown with the numbers 1 through 10 and etc. Is there a way to make your exmaple look like the example image below?

Hello,

Just changing the design of the page to 4 columns.

You must try. For mobile you cannot leave the interaction areas very together, keep in mind that the pointer is a finger.

Greetings,
fernando

Hi Fernando,

Thanks for your help and time with this. I really appreciate it. This looks very promising. I will try it this weekend and provide feedback (either way).

Thanks Again!