Spacing between forms does not comply to max width in cofigurator

DLJonsson

Well-known member
Spacing between forms does not comply to max width in cofigurator.

If placing fields on the same row in a form such as

County [ ] State [ ] Region [ ]

There is no control of spacing between the display of the input fields, even though
to settings in the forms configurator Width (chars): says it controls the width of
input box.

It does change the width of the input box but has no impact or control over the trailing spaces between
each of the input boxes.

* How do I get control of the spacing between the input boxes when input boxes are displayed in a row?



Please advise
 

eugenio

Administrator
Staff member
Hello,
what do you want to control, exactly? The width is controlled in the form configurator, as you said, while the space between two fields is something different and there isn't a way to control it in form configurator.

Best,
 

DLJonsson

Well-known member
I would like to see
County [ ] State [ ] Region [ ]


Instead of
County [ ] State [ ] Region [ ]

The space that appears between county label and the field is longer than that between State or region.

In General the trailing spaces between both the labels-fields & fields-labels appears too wide.

Put a set of fields into row and you will see what I mean.
Compare that to the elegant space that occurs between


[ Save>> ] [ Go back ] [ Save + Go back ] [ Insert as new ]



Then
County [ ] State [ ] Region [ ]


Another example is situations for entering legacy measurments such as


Inches Fraction
[ 10 ] [1 / 2]

Or other data entry in a row made more coherent by proximity such as

Name Middle Name Last Name
[ ] [ ] [ ]
 

DLJonsson

Well-known member
The interface strips out spaces when I attempt to explain the situation, I'm placing X as blank space in the following as an ilustration.


I would like to see
County [xxxxxxxxxx ] State [xx ] Region [xxxxxxxx ]


Instead of
Countyxxxxxxx [xxxxxxx ]xxxxxxx State xxxxx[x]xxxx Region [xxxxxxxxxxxxxxxxx ]

The space that appears between county label and the field is longer than that between State or region.

In General the trailing spaces between both the labels-fields & fields-labels appears too wide.

Put a set of fields into row and you will see what I mean.
Compare that to the elegant space that occurs between


[ Save>> ] [ Go back ] [ Save + Go back ] [ Insert as new ]
Then (using underscore to simulate the spacing irregularities.
County __ [__________ ] _____ State_____ [ ]____ Region ________ [ ]


Another example is situations for entering legacy measurments such as


Inches Fraction
[ 10 ] [1 / 2]

Or other data entry in a row made more coherent by proximity such as

Name Middle Name Last Name
[ Samuel] [Lukas...........] [Sillimani ]

Is any of the above adjustment for neater usage of fields in rows possible.
 

eugenio

Administrator
Staff member
Hello,
if you can post somewhere a screenshot I can be more precise but most probably it is related to the fact that one of the following or precious row has wider fields and this affect the row you are considering. If you add separators (from form configurator) you should be able to avoid this.
Maybe I am missing something but what I don't understand from your post is how this is related to max width, max width doesn't impact on that, why should it impact?

Best,
 

DLJonsson

Well-known member
If form_separator

* Did not insert a <BR> or line feed into the display,

* Responded to newline after this field setting = No.
(currently using a form separator ignores this setting assumes a new line)

* And had a variable width rather than the default 60 characters.

That would be a solution.

Now form separator apparently assumes a line separation rather that a column separation.

IE.
(*) Newline after this field setting = No
(*) Separator before this field (edit form): /


An expected result would be like this date entry spread across 3 fields divided by a single slash on the same row.
MM/DD/YY [ 01 ]/[28]/[19]

As it is I get MM/DD/YY spread across 3 lines divided by a long 60 car bar even though set
the separator to be a single character ie...

MM /---------------60 chars seperator---------------------
DD/
---------------60 chars seperator---------------------YY


Form separator in Dadabik apparently assumes a 60 character bar followed by a line return in the resulting form.

My application is of course not a date field,
It is for other naturally connected strings such as
Feet Inches Fractions which similar to date appear more coherent tightly spaced on the same row,
rather than spread apart on the same like or presented on separate lines.

Please advise
 

eugenio

Administrator
Staff member
Hello,
I am sorry but I am lost, if you can post somewhere a screenshot or if the application is public I can understand better.
Still, I can't understand why this should be related to "max width" (title of your post).

Best,
 

DLJonsson

Well-known member
Here are pictures better than 1000 words.

Here is the best I can do using separators with the current Dadabik settings I've tried using separator.
https://ibb.co/gPFSZsN

Here are classic examples and scenarios of coherent ergonomic data entry of row formated data, that seem possible in Dadabik
still using the current interface and form configurator options am unable to make work.

None of these scenarios are possible yet seem possible given current form configurator settings.
https://ibb.co/9bqSJ0t
 

eugenio

Administrator
Staff member
Hello,
separators are used to create sections and to "reset" the arrangement of the fields, to see an example, login in the online demo 3 and then visit this URL

https://dadabik.com/erp_demo/index.php?tablename=customers&function=edit&where_field=id_customer&where_value=302

as you can see, we have a separator before country which is useful not only to group together related info but also because, without separator, we would have the city field moved more on the right side, because the pic field above is longer than country.
What is happening in your form is that you probably set " New line after this field " NO for the field before the separator, which is not the correct way to use the separator.

To make the field input closer to the label you can add this ad the end of the css/styles_screen.css file

.search_operator{
padding:0px;
}

Best,
 

DLJonsson

Well-known member
I've applied your suggestion to the css with minimal results.
.search_operator{
padding:0px;
}

Still I have wide gaps between label and field and visa versa (see image attached in this message)

https://ibb.co/9bqSJ0t

I know narrower gaps are possible because I see it in video you list above at 23:05 in your sales form
where you have field label neatly separated by a colon as they should be. In my forms excessive gaps
appear between Field Label and Input Label as illustrated in the attached images.

[Field Label] : [Input Field]
 

eugenio

Administrator
Staff member
The suggestion should decrease the space by 10px (not much but the change is visible); if this not happened, it means you have the old css still in cache.

Which video are you referring to? Since you are referring to a demo, which demo and form you are referring to? Please paste the exact URL of the form.

Best,
 

DLJonsson

Well-known member
As tested on Opera, Firefox and Chrome - field & label spacing does not display on forms as demonstrated in
the instructional video at 23:05 -- instead the gaps are extraordinarily wide.

A simplified illustration of the issue is here.

https://ibb.co/nwcPDcK
 

eugenio

Administrator
Staff member
I don't understand which video you are referring to, if you are referring to this:
https://www.youtube.com/watch?list=PLyWUHBXAWIOSnisg9o_mESquTFgGQSpJo&v=TXraN_5extw

at 23:05 there isn't an edit/insert/search form, there is the graph generation page.

Anyway, at the moment the only official way to reduce the space between label and text field is the one I suggested. If you see in our demo:

https://dadabik.com/index.php?function=show_company_demo

an insert/edit/search where the spacing works differently respect to your case, let me know how to access your application and we'll see if there is a specific problem in your application, but I doubt there is.

Best,
 

DLJonsson

Well-known member
>> The suggestion should decrease the space by 10px (not much but the change is visible); if this not happened, it means you have the old >> css still in cache.

10px in this instance does decrease the space
But since there are spaces of 76 pixels between the fields and labels that 10px not have much impact.

Data entry in my experience on rows is formatted as follows

Country : |Germany| Province/State : |Bavaria|
With out extraneous gaps between field<->label and label<->field.

Also as can be seen in your video

https://youtu.be/TXraN_5extw?list=PLyWUHBXAWIOSnisg9o_mESquTFgGQSpJo
at 23:05 and other places where data entry is displayed in rows.

In your video row data appears per the standard as I've illustrated in above.

Maybe this is a bug, maybe there is something I need to set in forms configurator.

Please advise.
 

DLJonsson

Well-known member
Here is the screen shot from the Dadabik tutorial video
Notice how perfectly the fields are spaced where it displays says 400 X 400 Pixels.

https://ibb.co/hRN27sw

How can that be done.

Compare that to the form results in this image
https://ibb.co/nwcPDcK


Please advise
 

taubes

Member
Hi DLJonsson,

Maybe this helps:

The distance between fields is linked to the size of the other fields visible fields.

Have you tried to include a Separator to separate this line from the other fields (before and after as needed). I often use just a space which results in this thick black line, which you can style in the custom css file:

css/styles_screen_custom.css:

.form_separator {
background: transparent;
border-bottom: 1px solid black;
color: black;
}

Best

ST
 

DLJonsson

Well-known member
"The distance between fields is linked to the size of the other fields visible fields."

I don't see this occurring in my forms at all. What I see is a default 76 to 80 pixel gap
irregardless of visible field width.

While I appreciate your suggestions and have tried many of them to no effect,
unless you can show me somewhere in your demo where this is currently being done,
I suspect that the capacity to display labels and fields with standard data entry row
spacing is a depreciated feature from the time your tutorial videos were made.

After hours of attempting every permutation I can imagine, including changing the length of
fields by altering fields in SQL, and resetting field width settings in forms configurator
I see no way of getting any control over gaps between fields to produce the sort of elegant
standard display as seen in your tutorial video.

https://youtu.be/TXraN_5extw?list=PLyWUHBXAWIOSnisg9o_mESquTFgGQSpJo
at 23:05 and other places where data entry is displayed in rows.
 

DLJonsson

Well-known member
.form_separator {
background: transparent;
border-bottom: 1px solid black;
color: black;
}

This suggestion simply turns what was 200+ pixel wide bar into a 200+pixel wide black line separator,
irregardless if the separator text is simply ':' or '|' [1 char] or a longer line of text.

I still see no relation between the width of text or field length in the front end determining
width of Separator Length, Label or Field Gap.

Please advise
 

eugenio

Administrator
Staff member
Hello,
as I said, the page you are referring to is not an insert/edit/search form.

Insert/edit/search forms are rendered in DaDaBIK as showed in the demo, for example here:

https://dadabik.com/dadasales_demo/index.php?tablename=customers&function=edit&where_field=id_account&where_value=520

which I guess is exactly what you get (in terms of spacing between labels and fields) in your application, if this is not the case let me know.

There isn't any built-in way to reduce such amount of space; you can play with the CSS if you want and you can use the search_operator suggestion I gave you.

The other thing you can do, as Stefan and I suggested, is to use the separator to make one section of the form independent (in terms of layout) from the other ones, but this doesn't reduce the amount of space under the limit that you can see here:

https://dadabik.com/dadasales_demo/index.php?tablename=customers&function=edit&where_field=id_account&where_value=520




Best,
 

DLJonsson

Well-known member
>> ...the page you are referring to is not an insert/edit/search form.

The image in the following appears to me to be a dadabik form, or at least it has dadabik
edit form features of dropdown, check boxes and data entry fields otherwise --
what kind of form am I looking at in the picture below?

How can I an Edit form make the same sensible and readable sort of
field label formatting as this form seen on your tutorial?

https://drive.google.com/open?id=1nfExZ9tPGGowdOLapzSQ36z5-1EcgZHv

Please advise
 
Top