globaladmin home page responsive buttons idea

[nc07]

the admin buttons will be responsive in their own tabs with this following code.

chrome-capture-2022-4-24.gif

the below code goes in the forms custom JS.

Code: Select all

$('.input_text,.nuNone,iframe,select,.nuLookupCode,.nuLookupButton, .nuLookupDescription, .input_checkbox,.input_button,.input_nuDate,.input_number,.input_nuNumber, .input_nuAutoNumber,.input_nuScroll,.nuButton').css({'top':'','left':'','width':'','position':'','height':''});

        $(".nuSection").contents().not("#nuDelete").wrapAll("<div class='form-element-wrapper' />");
$(".form-element-wrapper").wrapAll('<form class="container"></form>');

below css goes un forms custom CSS.

Code: Select all

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

  
}


.form-element-wrapper{
   
     display: flex;
    flex-direction: row;
     justify-content:space-between !important;
     align-content:space-between;
     padding: 10px;
     row-gap: 10px;
    column-gap: 20px;
    flex-wrap: wrap;
     /*flex-grow: 4;*/
     /*flex-basis:25%;*/
}


  .form-element-wrapper .nuButton {
  /*flex: 1;*/
  /*width: 100%;*/
  width: 100%;
 flex: 1 1 20% ;
  /*margin: 5px;*/
}




@media (max-width: 700px) {
  .container {
     -ms-grid-columns: 1fr   ;
    grid-template-columns: 1fr ;
    width:97vw;
    padding:10px;
  }
  
  .form-element-wrapper{
   flex-basis:auto;
   
    flex-direction: column;
    
  }
 
  
.form-element-wrapper .nuButton {
  flex: 1;
  width: 100%;
  
   
}

}

This can of course be modified to suit NB as this is just an idea of responsive possibilities.

[kev1n]

IMO, all buttons should have the same width. And on a large/wide screen, the buttons get really wide. There should be a max-width.

2022-05-24_092845.png

[nc07]

IMO, all buttons should have the same width. And on a large/wide screen, the buttons get really wide. There should be a max-width.
2022-05-24_092845.png

yes i agree with you Kevin. Changes to flex property will take care of this.

chrome-capture-2022-4-25.gif

css code

Code: Select all

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


.form-element-wrapper{
   
     display: flex;
    flex-direction: row;
     /*justify-content:space-between !important;*/
     /*align-content:space-between;*/
     padding: 10px;
     row-gap: 10px;
    column-gap: 20px;
    flex-wrap: wrap;
     /*flex-grow: 4;*/
     /*flex-basis:25%;*/
}


  .form-element-wrapper .nuButton {
  /*flex: 1;*/
  /*width: 100%;*/
 /*min-width: 195px;*/
 /*flex: 1 1 33%;*/

 /*flex-basis: 0*/
 flex-basis: 25%;
flex-grow: 0;
  /*margin: 5px;*/
}
.nuButton {

  max-width: 200px;
}




@media (max-width: 700px) {
  .container {
     -ms-grid-columns: 1fr   ;
    grid-template-columns: 1fr ;
    width:95vw;
    padding:10px;
    justify-content: center;
   align-items: center;
  }
  
  .form-element-wrapper{
   /*flex-basis:auto;*/
     display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    /*padding: 10px;*/
    /*row-gap: 10px;*/
    /*column-gap: 20px;*/
  }
 
  
.form-element-wrapper .nuButton {
  flex:1;
  width: 100vw;
  
   /*margin: 5px;*/
}
.nuButton {
    width:100%;
  height:40px;
}

}