Two col layout for Edit / View / Add

This public forum is for user-to-user discussions of PHPMaker. Note that this is not support forum.
Post Reply
hugi
User
Posts: 22

Two col layout for Edit / View / Add

Post by hugi »

how can we setup the templates so the data entered for a specific table is in 2 cols.
we have a table with a description and a value for many entries.
so best would be 2 col layout like this:

description 1 value1
description 2 value2
description 3 value3

and not by default like this:
description 1
value1
description 2
value2
description 3
value3


kirondedshem
User
Posts: 642

Post by kirondedshem »

try to enable "Generate Tabular form for Desktop" in advanced settings and regenerate files


hugi
User
Posts: 22

Post by hugi »

thank you for the idea, you missunderstood the problem i think.

our database Fields for a table looks like this:

Description 1 varchar(40)
Value 1 int
Description 2 varchar(40)
Value 2 int
Description 3 varchar(40)
Value 4 int

when editing we have to enter data like this:
description 1
value1
description 2
value2
description 3
value3

but we like the edit/add page to be shown in two cols:
description 1 value1
description 2 value2
description 3 value3


kirondedshem
User
Posts: 642

Post by kirondedshem »

You customize how each page is drawn in the custom template read about it in the help menu as it has some examples on how to customize a form for add/edit/view/list pages. If the example is not enough for you you can search about this on the forum their are a lot of examples on how to do it.

for example, for a given table to customise how the fields on the add page are organised I can do this I can paste this in custom templates->add/copy page->custom template

<div class="row form-group">

<div class="col-lg-4">
{{{caption field_1}}}<?php echo $Language->Phrase("FieldRequiredIndicator") ?>
{{{value field_1}}}
</div>
<div class="col-lg-4">
{{{caption field_2}}}<?php echo $Language->Phrase("FieldRequiredIndicator") ?>
{{{value field_2}}}
</div>
<div class="col-lg-4">
{{{caption field_3}}}<?php echo $Language->Phrase("FieldRequiredIndicator") ?>
{{{value field_3}}}
</div>

</div>

HINT:You basically draw your own HTML and tell it where to render a specific controll, Although I advise you to always use divs as to mantain mobile responsiveness

BUT BUT, If you are looking for some kind of magic setting which can tell the fields to draw them selves 2,3,4 per line depending on the setting. THEN its not there yet so for now you have to customise each form you want yourself.


arbei
User
Posts: 9256

Post by arbei »

hugi wrote:
how can we setup the templates so the data entered for a specific table is
in 2 cols.
we have a table with a description and a value for many entries.
so best would be 2 col layout like this:

description 1 value1
description 2 value2
description 3 value3

and not by default like this:
description 1
value1
description 2
value2
description 3
value3

You can use the custom template for the Add/Edit/View page to re-arrange the controls into two column.

Read help file topic: "Project Setup" -> "Custom Templates" for more information.


hugi
User
Posts: 22

Post by hugi »

I found how to do it, i used Field caption instead of field name. now it works.
however in your example, the * (for required) ist after the field entry box. it should be after the label of the field.
can you help there?


hugi
User
Posts: 22

Post by hugi »

Mobile view error: on mobile view, the values then get seperated again (because it's 2 divs, how to do that the two values "stay" together)


kirondedshem
User
Posts: 642

Post by kirondedshem »

the * (for required) ist after the field entry box. it should be after the label of the field.
I coped this custom template from an existing project and the * is after the label, so youve probabaly drawn something different.

Mobile view error: on mobile view, the values then get separated again (because it's 2 divs, how to do that the two values "stay" together)
Mobile view is meant to make poeple having mobile devices looks at forms in a more user friendly way, so using divs by default is a good way to maintain mobile responsiveness, as For example if on a laptop the form has 3 input fields per row (thats ok since its a laptop and has alot of display space). But when you go into mobile view, it will show one input filed per row (this is also ok be default since a mobile device has very small screen so its more user friendly to display one field per row instead of trying to display all the three on such small space.)

HINT: mobile users can always tell thier browsers to request desktop view of the site to see all the three fields on one row. But if users plan to do data entry on mobile device then its better if the form displays one field per row as its easier to enter info that way rather than 3 per row and they have to first zoom in and out while entering data

NOTE: if you want to show more than one input filed on one row in mobile view then.

  1. Ensure the fields are of very small size, like 5, such that by default even if divs are used they still fit small area.
  2. You can tell your users to flip mobile devices into landscape mode, as it creat abit more space
  3. NOT ADVISED:Instead of divs, you can use tables to arrange your layout and its will stay the same in mobile view, although it wont really look nice sometimes.

NOTE: USE a table from the demo project, so others can be able to paste your code in thier demo projects to simulate. after you can copy and paste into your actual project.

Also prepare a drafted layout, maybe in paint or something of how you want to arrange your form so maybe others can advise on what css classes to use to achive the same.

So try the above and paste your custom template code for discussions.


hugi
User
Posts: 22

Post by hugi »

I worked with tables, this solved it.


sangnandar
User
Posts: 980

Post by sangnandar »

You could also work with div's:
<div></div><div></div>
Use css width/min-width/max-width on first div to have consistent width against all (caption) length.
On the second div you need css display:inline-block, so it will go side-by-side in a single line with the first div .
Set css min-width on the second div. so if the screen is just too narrow, below the min-width value, then the second div will "wrap" below the first div. Yes, here you get 1 col layout instead, but in the case that the screen is just too narrow 2 cols layout might goes ugly.

The result would be:

  1. On "normal" (desktop/tablet) screen it will layout 2 cols.
  2. On mobile device, screen 5" and below, it will layout 1 cols.

In this responsive world div can go further to the screen that table simply can't.


hugi
User
Posts: 22

Post by hugi »

thank you sangnandar.
I used a table to div convertor (found online), worked well.


Post Reply