Changing the detail view form layout

Please report bugs and any annoyances here. Kindly include all possible details: steps to reproduce, expected result, actual result, screenshots, ... etc.
Post Reply
User avatar
baudwalker
Veteran Member
Posts: 188
Joined: 2015-02-03 08:08
Location: Bellingen NSW Australia

Changing the detail view form layout

Post by baudwalker » 2018-04-16 07:47

Hi I followed the tutorial "Changing the detail view form layout" and made 2 columns in the detailed view. I now have 2 columns but the text fields are all different widths depending on the type. See attached

the date picker takes up the full 48%
the dropdowns lists (from the parent tables) are about 5%
multiple selection the full 48%

the blank fields are autofill

is there a way to make the form even, or have I missed something
Attachments
Capture.PNG
Capture.PNG (23.29 KiB) Viewed 3217 times

pbottcher
AppGini Super Hero
AppGini Super Hero
Posts: 1635
Joined: 2018-04-01 10:12

Re: Changing the detail view form layout

Post by pbottcher » 2018-04-16 15:36

Hi,

see the code I used, it works fine for me.

ob_start(); ?>

<script>
$j(function(){
$j('fieldset.form-horizontal').removeClass('form-horizontal').addClass('form-inline');

/* Fix for a bug with lookup drop-downs to set their correct width */
// $j('.select2-container').addClass('option_list').css({ 'max-width': 'unset', 'width': 'unset' }).parents('.row').css({ 'width': '200%' });
})
</script>

<style>
@media (min-width: 768px){
/* new code*/
.form-inline .form-control {
width: 95%; /* !important; */
} /*end new code*/
.form-inline .form-control-static {
width: 100%; /* !important; */
} /*end new code*/

.form-inline .form-group{
width: 48%;
margin-bottom: 0.75em;
vertical-align: top;
}
}
</style>

<?php
$new_layout = ob_get_contents();
ob_end_clean();

$html .= $new_layout;
Any help offered comes with the best of intentions. Use it at your own risk. In any case, please make a backup of your existing environment before applying any changes.

User avatar
baudwalker
Veteran Member
Posts: 188
Joined: 2015-02-03 08:08
Location: Bellingen NSW Australia

Re: Changing the detail view form layout

Post by baudwalker » 2018-04-17 00:52

Thank you for your reply.

I applied you code and it fixed the dropdowns but the other textboxes remain the same as if the are taking 48% 0f the 48%, if you know what I mean. See attached
Attachments
Capture.PNG
Capture.PNG (57.09 KiB) Viewed 3198 times

pbottcher
AppGini Super Hero
AppGini Super Hero
Posts: 1635
Joined: 2018-04-01 10:12

Re: Changing the detail view form layout

Post by pbottcher » 2018-04-17 11:44

Hi,

sorry, you need to change the dynamic.css.php.

Replace
.form-inline .form-control{ width: auto !important; }
with
.form-inline .form-control{ width: auto }

that should do the trick.
Any help offered comes with the best of intentions. Use it at your own risk. In any case, please make a backup of your existing environment before applying any changes.

tminh
Posts: 28
Joined: 2019-05-23 02:26

Re: Changing the detail view form layout

Post by tminh » 2022-07-21 15:47

Hi, where is the tutorial ? i cannot find it
please help

User avatar
baudwalker
Veteran Member
Posts: 188
Joined: 2015-02-03 08:08
Location: Bellingen NSW Australia

Re: Changing the detail view form layout

Post by baudwalker » 2022-07-21 22:55

Appgini has a ydeme.com section you have to pay a one off payment to join.

https://www.udemy.com/course/customizin ... lications/

Post Reply