responsive edit form with grid css

nc07 · Unread post by **nc07** » Mon May 16, 2022 4:32 am

CPT2205161428-1177x160.gif

place this in the edit form's custom js.

$(document).ready(function(){


  $(".nuRECORD  [data-nu-label]").each(function(index) {
 
  		$(this).next("label").addBack().wrapAll("<div class='form-element-wrapper' />");
  		$('.input_text,.nuNone,iframe,select,.nuLookupCode,.nuLookupButton, .nuLookupDescription, .input_checkbox,.input_button,.input_nuDate,.input_number,.input_nuNumber').css({'top':'','left':'','width':'','position':'','height':''});


  });

 $(".form-element-wrapper").wrapAll('<form class="container"></form>');

	});

place this under form style.

Code: Select all

.container {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 1fr 1fr ;
    grid-template-columns: 1fr 1fr 1fr;
    width:97vw;
  border-radius: 5px;
 background-color: #f2f2f9;
  padding:10px;
  height:100%;
  
}


.form-element-wrapper{
     flex-direction: column;
     padding: 10px;
}

.form-element-wrapper label {
  
   width: 40px;
   padding:5px;
    float: left;
    clear: both;
    text-align: right;
   
 
   
}
.form-element-wrapper input {
  flex: 1;
  width: 80%;
  float:right;
  
}


@media (max-width: 900px) {
  .form-element-wrapper, .container {
     -ms-grid-columns: 1fr 1fr  ;
    grid-template-columns: 1fr 1fr;
    padding:5px;
  }
  .form-element-wrapper label {
  
   width: 50px;
  
}
.form-element-wrapper input {
  /*flex: 1;*/
  width: 80%;
  
  
}
}

@media (max-width: 700px) {
  .container {
     -ms-grid-columns: 1fr   ;
    grid-template-columns: 1fr ;
    padding:10px;
  }
  .form-element-wrapper label {
  
   width: 60px;
  
}
.form-element-wrapper input {
  /*flex: 1;*/
  width: 80%;
}

This currently works with text fields, date, number, and checkbox only. still working on other fields to work properly. Contribution and improvements are welcomed.

Unread post by **kev1n** » Mon May 16, 2022 7:52 am

Thanks nc07, I'll check it out soon.

Unread post by **kev1n** » Tue May 17, 2022 9:46 am

In the user form, these 3 labels stay at a fixed position. Do you have a clue why?

Name
Access Level
Login Name

2022-05-17_094415.png

nc07 · Unread post by **nc07** » Wed May 18, 2022 12:37 am

this should fix that issue.

Code: Select all

$(".nuRECORD  [data-nu-label]:not('#sus_zzzzsys_access_id,#label_sus_zzzzsys_access_id,#sus_zzzzsys_access_id_open_button')").each(function(index) {
 
  		$(this).next("label").addBack().wrapAll("<div class='form-element-wrapper' />");
  		$('.nuHiddenLookup,.input_text,.nuNone,iframe,select,.nuLookupCode,.nuLookupButton, .nuLookupDescription, .input_checkbox,.input_button,.input_nuDate,.input_number,.input_nuNumber,.nuDuplicateOrBlank,.nuBlank,.input_password').css({'top':'','left':'','width':'','position':'','height':''});
  		

  });
  $("#label_f_lookup,#f_lookup,#f_lookupcode,#f_lookupbutton,#f_lookupdescription  ").wrapAll('<div class="form-element-wrapper"></div>');
 $("#label_sus_language,#sus_language").wrapAll('<div class="form-element-wrapper"></div>');
$("#sus_zzzzsys_access_idcode,#sus_zzzzsys_access_idbutton,#sus_zzzzsys_access_iddescription,#sus_zzzzsys_access_id, #label_sus_zzzzsys_access_id,#sus_zzzzsys_access_id_open_button").wrapAll('<div id= "lookup" class="form-element-wrapper"></div>');
$(".form-element-wrapper").wrapAll('<form class="container"></form>');
	



});

the only issue now is the lookup, still working on it.

nc07 · Unread post by **nc07** » Wed May 25, 2022 4:15 am

kev1n wrote: ↑Tue May 17, 2022 9:46 am In the user form, these 3 labels stay at a fixed position. Do you have a clue why?

Name

Access Level

Login Name
2022-05-17_094415.png

Hi Kevin, The user form issues are fixed now and fully responsive.

chrome-capture-2022-4-25 (1).gif

js code;

Code: Select all

$(document).ready(function(){

$(".nuRECORD  [data-nu-label]").not("#sus_zzzzsys_access_id").each(function(index) {
 
  		$(this).next("label").addBack().wrapAll("<div class='form-element-wrapper' />");
  		$('.nuHiddenLookup,.input_text,.nuNone,iframe,select,.nuLookupCode,.nuLookupButton, .nuLookupDescription, .input_checkbox,.input_button,.input_nuDate,.input_number,.input_nuNumber,.nuDuplicateOrBlank,.nuBlank,.input_password').css({'top':'','left':'','width':'','position':'','height':''});
  		

  });
 $("#label_f_fee2,#f_fee2 ").wrapAll('<div class="form-element-wrapper"></div>');
 
$("#label_sus_language,#sus_language").wrapAll('<div class="form-element-wrapper"></div>');
 $("#sus_zzzzsys_access_id_open_button,#sus_zzzzsys_access_idcode,#sus_zzzzsys_access_idbutton,#sus_zzzzsys_access_iddescription").wrapAll('<div class="lookup"></div>');
$("#label_sus_zzzzsys_access_id,.lookup").wrapAll('<div id="lu" class="form-element-wrapper"></div>');
$(".form-element-wrapper").wrapAll('<form class="container"></form>');
$(".nuContentBoxContainer").hide();	
 $('div:empty').remove();	



});

CSS;

Code: Select all

.container {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr;
    width: 97vw;
    border-radius: 5px;
    background-color: #f2f2f9;
    padding: 10px;
    height: 100%;
    justify-content: flex-start;
    align-items: flex-start;

}
label {
    order: 2;

}

.form-element-wrapper {
    display: flex;
    flex-direction: row-reverse;

}
.form-element-wrapper > * {
    display: flex;
    position: relative;
   
}

.form-element-wrapper label {
    flex: 1;
    align-items: flex-end;
    justify-content: flex-end;
}
.form-element-wrapper input {
    flex: 3;
}

.form-element-wrapper .lookup {
    display: flex;
    position: relative;
    flex: 3;
     flex-shrink:1;
    height: 25px;
}
.form-element-wrapper select {
    flex: 3;
}
#lu > label {
    flex-flow: nowrap;
}
.lookup {
    width: 70%;



}
.lookup> * {
    position: relative;
    flex: 1 ;
    flex: 0 1 auto
}
.nuLookupCode{
  width:35px !important;  
    
}

@media (max-width: 900px) {
    .container {
        display: -ms-grid;
        display: grid;
        -ms-grid-columns: 1fr 1fr;
        grid-template-columns: 1fr 1fr;
        width: 97vw;
        border-radius: 5px;
        background-color: #f2f2f9;
        padding: 10px 20px;
        height: 100%;
         column-gap: 20px;
    }
   
    .form-element-wrapper >* {
        width: 100%;
    }

    .form-element-wrapper {
        width: 100%;
        
        flex-direction: column-reverse;
   }
    
    .form-element-wrapper label {
    flex: 1;
    align-items: flex-start;
    justify-content: flex-start;
}
    .lookup {
        width: 100%;
    }

    .form-element-wrapper.lookup {
        width: 100%;
        height: 30px;
    }
    
    .lookup> * {
    position: relative;
    flex: 1 ;
    flex: 0 1 auto
}
.nuLookupCode{
  width:35px !important;  
    
}

}
@media (max-width: 700px) {
    .container {
        display: -ms-grid;
        display: grid;
        -ms-grid-columns: 1fr ;
        grid-template-columns: 1fr;
        width: 97vw;
        border-radius: 5px;
        background-color: #f2f2f9;
        padding: 10px 20px;
        height: 100%;
        

    }
    
    .form-element-wrapper >* {
        width: 100%;
    }

    .form-element-wrapper {
        width: 100%;
       
        flex-direction: column-reverse;

    }
    
    .form-element-wrapper label {
    flex: 1;
    align-items: flex-start;
    justify-content: flex-start;
}
    .lookup {
        width: 100%;
    }

    .form-element-wrapper.lookup {
        width: 100%;
        height: 30px;
    }
    

}

Unread post by **kev1n** » Wed May 25, 2022 7:20 am

Thanks, it looks much better now.

The height should also be limited and maybe add some spacing between the label and the object.

height.png

nc07 · Unread post by **nc07** » Thu May 26, 2022 12:59 am

kev1n wrote: ↑Wed May 25, 2022 7:20 am Thanks, it looks much better now.

The height should also be limited and maybe add some spacing between the label and the object.
height.png

have you made any changes to the css? there is space between label and input and also between each row at my end.

chrome-capture-2022-4-25 (1).gif

As for the height, it can be restricted in the container class. The number of columns can also be changed in the container class, currently set to 3.

nc07 · Unread post by **nc07** » Thu May 26, 2022 5:50 am

nc07 wrote: ↑Thu May 26, 2022 12:59 am
kev1n wrote: ↑Wed May 25, 2022 7:20 am Thanks, it looks much better now.

The height should also be limited and maybe add some spacing between the label and the object.
height.png
have you made any changes to the css? there is space between label and input and also between each row at my end.

chrome-capture-2022-4-25 (1).gif
As for the height, it can be restricted in the container class. The number of columns can also be changed in the container class, currently set to 3.

It's strange, I downloaded the latest NB and it behaved like yours so here is a bit improved CSS.

Code: Select all

.container {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr;
    width: 97vw;
    border-radius: 5px;
    background-color: #f2f2f9;
    padding: 10px;
    height: 100%;
    justify-content: flex-start;
    align-items: flex-start;

}
label {
    order: 2;

}

.form-element-wrapper {
    display: flex;
    flex-direction: row-reverse;

}
.form-element-wrapper > * {
    display: flex;
    position: relative;
   
}

.form-element-wrapper label {
    flex: 1;
    align-items: flex-end;
    justify-content: flex-end;
}
.form-element-wrapper input {
    flex: 3;
}

.form-element-wrapper .lookup {
    display: flex;
    position: relative;
    flex: 3;
     flex-shrink:1;
    height: 25px;
}
.form-element-wrapper select {
    flex: 3;
}
#lu > label {
    flex-flow: nowrap;
}
.lookup {
    width: 70%;



}
.lookup> * {
    position: relative;
    flex: 1 ;
    flex: 0 1 auto
}
.nuLookupCode{
  width:35px !important;  
    
}

@media (max-width: 900px) {
    .container {
        display: -ms-grid;
        display: grid;
        -ms-grid-columns: 1fr 1fr;
        grid-template-columns: 1fr 1fr;
        width: 97vw;
        border-radius: 5px;
        background-color: #f2f2f9;
        padding: 10px 20px;
        height: 100%;
         column-gap: 20px;
    }
   
    .form-element-wrapper >* {
        width: 100%;
    }

    .form-element-wrapper {
        width: 100%;
        
        flex-direction: column-reverse;
   }
    
    .form-element-wrapper label {
    flex: 1;
    align-items: flex-start;
    justify-content: flex-start;
}
    .lookup {
        width: 100%;
    }

    .form-element-wrapper.lookup {
        width: 100%;
        height: 30px;
    }
    
    .lookup> * {
    position: relative;
    flex: 1 ;
    flex: 0 1 auto
}
.nuLookupCode{
  width:35px !important;  
    
}

}
@media (max-width: 700px) {
    .container {
        display: -ms-grid;
        display: grid;
        -ms-grid-columns: 1fr ;
        grid-template-columns: 1fr;
        width: 97vw;
        border-radius: 5px;
        background-color: #f2f2f9;
        padding: 10px 20px;
        height: 100%;
        

    }
    
    .form-element-wrapper >* {
        width: 100%;
    }

    .form-element-wrapper {
        width: 100%;
       
        flex-direction: column-reverse;

    }
    
    .form-element-wrapper label {
    flex: 1;
    align-items: flex-start;
    justify-content: flex-start;
}
    .lookup {
        width: 100%;
    }

    .form-element-wrapper.lookup {
        width: 100%;
        height: 30px;
    }
    

}

nuBuilder Forum

responsive edit form with grid css

responsive edit form with grid css

Re: responsive edit form with grid css

Re: responsive edit form with grid css

Re: responsive edit form with grid css

Re: responsive edit form with grid css

Re: responsive edit form with grid css

Re: responsive edit form with grid css

Re: responsive edit form with grid css