nuBuilder Forum


https://forums.nubuilder.cloud/

responsive edit form with grid css

https://forums.nubuilder.cloud/viewtopic.php?t=11599

Page 1 of 1

responsive edit form with grid css

Posted: Mon May 16, 2022 4:32 am
by nc07
CPT2205161428-1177x160.gif
place this in the edit form's custom js.

Code: Select all

$(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.

Re: responsive edit form with grid css

Posted: Mon May 16, 2022 7:52 am
by kev1n
Thanks nc07, I'll check it out soon.

Re: responsive edit form with grid css

Posted: Tue May 17, 2022 9:46 am
by kev1n
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

Re: responsive edit form with grid css

Posted: Wed May 18, 2022 12:37 am
by nc07
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.

Re: responsive edit form with grid css

Posted: Wed May 25, 2022 4:15 am
by nc07
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;
    }
    

}

Re: responsive edit form with grid css

Posted: Wed May 25, 2022 7:20 am
by kev1n
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

Re: responsive edit form with grid css

Posted: Thu May 26, 2022 12:59 am
by nc07
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.

Re: responsive edit form with grid css

Posted: Thu May 26, 2022 5:50 am
by nc07
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;
    }
    

}
All times are UTC+02:00
Page 1 of 1

Powered by phpBB® Forum Software © phpBB Limited