问:
DIV overlaps and anything below that div keeps showing on the div
I am having a DIV which renders fine. Anything below this DIV keeps showing on the DIV (not below the DIV). Need help to resolve this issue. I tried solution provided in other answers related to this but it did resolve my issue.
Issue 1: The TEXT Cham Cham Recipe Description should come after the table ends
Issue 2: The grey div should be on the right in desktop view and below the table in mobile view.I am not able to include complete HTML and CSS due to character limit.

html,body {
  margin: 0;
  font-family: Helvetica, sans-serif;
  background-color: #ffe2ad;
  height: 100%;
}

a {
  color: #000;
}

/* header */

/*mobile*/
@media (min-width: 48em)
{

  .header li {
    float: left;
  }
  .header li a {
    padding: 15px 15px;
  }
  .header .menu {
    clear: none;
    float: right;
    max-height: none;
  }
  .header .menu-icon {
    display: none;
  }
}
/* 48em = 768px @ 16pt font */
/*menu ends here*/

/* Create three unequal columns that floats next to each other for equip*/
* {
  box-sizing: border-box;
}

/* Create three unequal columns that floats next to each other */
.maincolumn {
  float: left;
  padding: 10px;

}

.mainleft, .mainright {
  width: 10%;
}

.mainmiddle {
  width: 80%;

}

/* Clear floats after the columns */
.mainrow:after {
  content: "";
  display: table;
  clear: both;
}

/* disclosure, print and share buttons*/

.discloseshareprintcolumn {
  float: left;
}

.discloseshareprintleft, .discloseshareprintright {
  width: 50%;
}

/* Clear floats after the columns */
.discloseprintrow:after {
  content: "";
  display: table;
  clear: both;
}

.discloseprintcolumn {
  float: left;
  height: 50px; /* Should be removed. Only for demonstration */
}

.discloseprintleft, .discloseprintright {
  width: 50%;
}

/* Clear floats after the columns */
.discloseprintrow:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
/* For mobile*/
@media only screen and (max-width: 768px) {

  .discloseshareprintcolumn {
    width: 100%;
  }
  .discloseshareprintleft, .discloseshareprintright {
  height: 7%;
}
  .maincolumn {
    width: 100%;
  }
  .mainleft, .mainright {
  height: 20%;
}
}
/* For tablet(IPAD) portrait & landscape*/
@media only screen
  and (min-device-width: 768px)
  and (max-device-width: 1024px)

  {
   .maincolumn {
    width: 100%;
  }

  .discloseshareprintcolumn
  {
    width: 100%;
  }
  .mainleft, .mainright {
  height: 50%;
  width:100%;
}
/*.header li {
    float: left;
  }*/

}

 ```
<pre class="snippet-code-html lang-html prettyprint-override"><code><h2>Three Unequal Columns</h2>

<div class="mainrow">
  <div class="maincolumn mainleft" style="background-color:#aaa;">
   <div class="RecipeTitle" style="text-align:left">
  <h2>Column 3</h2>
    <p>Some text..</p>
</div>
  </div>

  <div class="maincolumn mainmiddle" style="background-color:white;">
   <h1>Cham Cham Recipe|Indian Sweets Recipe|Dessert Recipe</h1>
     <div class="discloseshareprintrow">
     <div class="discloseshareprintcolumn discloseshareprintleft">

     <div class="discloseshareprintcolumn discloseshareprintright">
      <div class="discloseprintrow">
       <div class="discloseprintcolumn discloseprintleft">

        <!--<b>Disclosure:</b> Puchase made via affliate link(s) on this site will earn us commission.-->
        <!--<span style="text-align: left; font-size:x-small;">Advertisement disclosure</span>-->
        </div>
        <div class="discloseprintcolumn discloseprintright">
        <?php include_once("NEWprinter.php");?>
        </div>
        <br>
     </div>

     </div>
   </div>
      </div><h2>Utensils/Items used for cooking</h2>
<div class="toolequip" style="width: 30%; height: 130px; background-color:#ED5E13; float:left; text-align:center; border-bottom: 1px dotted;border-left: 1px dotted;border-color: #BFBFBF; padding-top:15px;"><h3 style="color: white;"> Item name </h3>
 <div style=" height: 30px; background-color:#ED5E13; padding-top: 1px; border-top: 1px dotted;border-bottom: 1px dotted;border-left: 1px dotted;border-color: #BFBFBF; text-align:center; padding-top:5px;font-size:small;"> Wooden spetula </div>
 <div style="height: 30px; background-color:#ED5E13; border-bottom: 1px dotted;border-left: 1px dotted;border-color: #BFBFBF; text-align:center;padding-top:5px;font-size:small;"> Pot </div>
 <div style="height: 30px; background-color:#ED5E13; border-bottom: 1px dotted;border-left: 1px dotted;border-color: #BFBFBF; text-align:center;padding-top:5px; font-size:small;"> Pressure cooker </div>
 <div style="height: 30px; background-color:#ED5E13; border-bottom: 1px dotted;border-left: 1px dotted;border-color: #BFBFBF; text-align:center;padding-top:5px; font-size:small;"> Stainless steel bowl </div>
 <div style="height: 30px; background-color:#ED5E13; border-bottom: 1px dotted;border-left: 1px dotted;border-color: #BFBFBF; text-align:center;padding-top:5px; font-size:small;"> Butter knife </div>
 <div style="height: 30px; background-color:#ED5E13; border-bottom: 1px dotted;border-left: 1px dotted;border-color: #BFBFBF; text-align:center;padding-top:5px; font-size:small;"> Measuring cup </div>
 <div style="height: 30px; background-color:#ED5E13; border-bottom: 1px dotted;border-left: 1px dotted;border-color: #BFBFBF; text-align:center;padding-top:5px; font-size:small;"> Long serving plate </div>
 <div style="height: 30px; background-color:#ED5E13; border-bottom: 1px dotted;border-left: 1px dotted;border-color: #BFBFBF; text-align:center;padding-top:5px; font-size:small;"> Pestel & Mortar </div>
 <div style="height: 30px; background-color:#ED5E13; border-bottom: 1px dotted;border-left: 1px dotted;border-color: #BFBFBF; text-align:center;padding-top:5px; font-size:small;"> Knife </div>
 <div style="height: 30px; background-color:#ED5E13; border-bottom: 1px dotted;border-left: 1px dotted;border-color: #BFBFBF; text-align:center;padding-top:5px; font-size:small;"> Spoon </div>
 <div style="height: 30px; background-color:#ED5E13; border-bottom: 1px dotted;border-left: 1px dotted;border-color: #BFBFBF; text-align:center;padding-top:5px; font-size:small;"> Small bowl </div>
 <div style="height: 30px; background-color:#ED5E13; border-bottom: 1px dotted;border-left: 1px dotted;border-color: #BFBFBF; text-align:center;padding-top:5px; font-size:small;"> Strainer </div>
 <div style="height: 30px; background-color:#ED5E13; border-bottom: 1px dotted;border-left: 1px dotted;border-color: #BFBFBF; text-align:center;padding-top:5px; font-size:small;clear:both;"> Muslin cloth </div>
 </div>
    <div class="toolequip" style="width: 70%; height: 130px; background-color:#ED5E13; float:right; text-align:center; border-bottom: 1px dotted;border-left: 1px dotted; dotted;border-right: 1px dotted; border-color: #BFBFBF;  padding-top:15px;"><h3 style="color: white;"> See options, price & availability </h3>
 <div style="background-color:#ED5E13; border-top: 1px dotted;border-bottom: 1px dotted;border-left: 1px dotted;border-color: #BFBFBF; text-align:center; ">
     <div id="vendors">
      <div id="left" class="col" style="box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); transition: background-color 0.3s ease-in-out;height: 30px;background-color:white; color: black;border-right: 1px dotted; border-bottom: 1px dotted;border-color: #BFBFBF; padding-top:5px;cursor:pointer;"><i class="fab fa-amazon"></i><b>Amazon</b></div>
      <div id="center" class="col" style="box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); transition: background-color 0.3s ease-in-out;height: 30px;background-color:red; color: white;border-right: 1px dotted;border-bottom: 1px dotted;border-color: #BFBFBF;padding-top:5px;cursor:pointer;"><i class="fas fa-bullseye"></i> <b>Target</b></div>
      <div id="right" class="col" style="box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); transition: background-color 0.3s ease-in-out;height: 30px;background-color:#041E42; color: white;border-bottom: 1px dotted;border-color: #BFBFBF;padding-top:5px;cursor:pointer;"><b>Walmart</b></div>
     </div>

 </div>
 <div style="background-color:#ED5E13; border-bottom: 1px dotted;border-left: 1px dotted;border-color: #BFBFBF; text-align:center;">
   <div id="vendors">
      <div id="left" class="col" style=" box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); transition: background-color 0.3s ease-in-out;height: 30px;background-color:white; color: black;border-right: 1px dotted; border-bottom: 1px dotted;border-color: #BFBFBF;cursor:pointer;padding-top:5px;"><i class="fab fa-amazon"></i><b>Amazon</b></div>
      <div id="center" class="col" style="box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); transition: background-color 0.3s ease-in-out;height: 30px;background-color:red; color: white; border-bottom: 1px dotted;border-right: 1px dotted;border-color: #BFBFBF;cursor:pointer;padding-top:5px;"><i class="fas fa-bullseye"></i> <b>Target</b></div>
      <div id="right" class="col" style="box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); transition: background-color 0.3s ease-in-out;height: 30px;background-color:#041E42; color: white; border-bottom: 1px dotted;border-color: #BFBFBF;cursor:pointer;padding-top:5px;"><b>Walmart</b></div>
     </div></div>
 <div style="background-color:#ED5E13; border-bottom: 1px dotted;border-left: 1px dotted;border-color: #BFBFBF; text-align:center;">
   <div id="vendors">
      <div id="left" class="col" style=" box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); transition: background-color 0.3s ease-in-out;height: 30px;background-color:white; color: black;border-right: 1px dotted; border-bottom: 1px dotted; border-color: #BFBFBF;cursor:pointer;padding-top:5px;"><i class="fab fa-amazon"></i><b>Amazon</b></div>
      <div id="center" class="col" style="box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); transition: background-color 0.3s ease-in-out;height: 30px;background-color:red; color: white;white;border-right: 1px dotted;  border-bottom: 1px dotted;border-color: #BFBFBF;cursor:pointer;padding-top:5px;"><i class="fas fa-bullseye"></i> <b>Target</b></div>
      <div id="right" class="col" style="box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); transition: background-color 0.3s ease-in-out;height: 30px;background-color:#041E42; color: white;border-bottom: 1px dotted;border-color: #BFBFBF;cursor:pointer;padding-top:5px;"><b>Walmart</b></div>
     </div></div>
     <div style="background-color:#ED5E13; border-bottom: 1px dotted;border-left: 1px dotted;border-color: #BFBFBF; text-align:center;">
   <div id="vendors">
      <div id="left" class="col" style=" box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); transition: background-color 0.3s ease-in-out;height: 30px;background-color:white; color: black;border-right: 1px dotted; border-bottom: 1px dotted; border-color: #BFBFBF;cursor:pointer;padding-top:5px;"><i class="fab fa-amazon"></i><b>Amazon</b></div>
      <div id="center" class="col" style="box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); transition: background-color 0.3s ease-in-out;height: 30px;background-color:red; color: white;white;border-right: 1px dotted;  border-bottom: 1px dotted;border-color: #BFBFBF;cursor:pointer;padding-top:5px;"><i class="fas fa-bullseye"></i> <b>Target</b></div>
      <div id="right" class="col" style="box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); transition: background-color 0.3s ease-in-out;height: 30px;background-color:#041E42; color: white;border-bottom: 1px dotted;border-color: #BFBFBF;cursor:pointer;padding-top:5px;"><b>Walmart</b></div>
     </div></div>
     <div style="background-color:#ED5E13; border-bottom: 1px dotted;border-left: 1px dotted;border-color: #BFBFBF; text-align:center;">
   <div id="vendors">
      <div id="left" class="col" style=" box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); transition: background-color 0.3s ease-in-out;height: 30px;background-color:white; color: black;border-right: 1px dotted; border-bottom: 1px dotted; border-color: #BFBFBF;cursor:pointer;padding-top:5px;"><i class="fab fa-amazon"></i><b>Amazon</b></div>
      <div id="center" class="col" style="box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); transition: background-color 0.3s ease-in-out;height: 30px;background-color:red; color: white;white;border-right: 1px dotted;  border-bottom: 1px dotted;border-color: #BFBFBF;cursor:pointer;padding-top:5px;"><i class="fas fa-bullseye"></i> <b>Target</b></div>
      <div id="right" class="col" style="box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); transition: background-color 0.3s ease-in-out;height: 30px;background-color:#041E42; color: white;border-bottom: 1px dotted;border-color: #BFBFBF;cursor:pointer;padding-top:5px;"><b>Walmart</b></div>
     </div></div>
     <div style="background-color:#ED5E13; border-bottom: 1px dotted;border-left: 1px dotted;border-color: #BFBFBF; text-align:center;">
   <div id="vendors">
      <div id="left" class="col" style=" box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); transition: background-color 0.3s ease-in-out;height: 30px;background-color:white; color: black;border-right: 1px dotted; border-bottom: 1px dotted; border-color: #BFBFBF;cursor:pointer;padding-top:5px;"><i class="fab fa-amazon"></i><b>Amazon</b></div>
      <div id="center" class="col" style="box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); transition: background-color 0.3s ease-in-out;height: 30px;background-color:red; color: white;white;border-right: 1px dotted;  border-bottom: 1px dotted;border-color: #BFBFBF;cursor:pointer;padding-top:5px;"><i class="fas fa-bullseye"></i> <b>Target</b></div>
      <div id="right" class="col" style="box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); transition: background-color 0.3s ease-in-out;height: 30px;background-color:#041E42; color: white;border-bottom: 1px dotted;border-color: #BFBFBF;cursor:pointer;padding-top:5px;"><b>Walmart</b></div>
     </div></div>
     <div style="background-color:#ED5E13; border-bottom: 1px dotted;border-left: 1px dotted;border-color: #BFBFBF; text-align:center;">
   <div id="vendors">
      <div id="left" class="col" style=" box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); transition: background-color 0.3s ease-in-out;height: 30px;background-color:white; color: black;border-right: 1px dotted; border-bottom: 1px dotted; border-color: #BFBFBF;cursor:pointer;padding-top:5px;"><i class="fab fa-amazon"></i><b>Amazon</b></div>
      <div id="center" class="col" style="box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); transition: background-color 0.3s ease-in-out;height: 30px;background-color:red; color: white;white;border-right: 1px dotted;  border-bottom: 1px dotted;border-color: #BFBFBF;cursor:pointer;padding-top:5px;"><i class="fas fa-bullseye"></i> <b>Target</b></div>
      <div id="right" class="col" style="box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); transition: background-color 0.3s ease-in-out;height: 30px;background-color:#041E42; color: white;border-bottom: 1px dotted;border-color: #BFBFBF;cursor:pointer;padding-top:5px;"><b>Walmart</b></div>
     </div></div>
     <div style="background-color:#ED5E13; border-bottom: 1px dotted;border-left: 1px dotted;border-color: #BFBFBF; text-align:center;">
   <div id="vendors">
      <div id="left" class="col" style=" box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); transition: background-color 0.3s ease-in-out;height: 30px;background-color:white; color: black;border-right: 1px dotted; border-bottom: 1px dotted; border-color: #BFBFBF;cursor:pointer;padding-top:5px;"><i class="fab fa-amazon"></i><b>Amazon</b></div>
      <div id="center" class="col" style="box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); transition: background-color 0.3s ease-in-out;height: 30px;background-color:red; color: white;white;border-right: 1px dotted;  border-bottom: 1px dotted;border-color: #BFBFBF;cursor:pointer;padding-top:5px;"><i class="fas fa-bullseye"></i> <b>Target</b></div>
      <div id="right" class="col" style="box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); transition: background-color 0.3s ease-in-out;height: 30px;background-color:#041E42; color: white;border-bottom: 1px dotted;border-color: #BFBFBF;cursor:pointer;padding-top:5px;"><b>Walmart</b></div>
     </div></div>
     <div style="background-color:#ED5E13; border-bottom: 1px dotted;border-left: 1px dotted;border-color: #BFBFBF; text-align:center;">
   <div id="vendors">
      <div id="left" class="col" style=" box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); transition: background-color 0.3s ease-in-out;height: 30px;background-color:white; color: black;border-right: 1px dotted; border-bottom: 1px dotted; border-color: #BFBFBF;cursor:pointer;padding-top:5px;"><i class="fab fa-amazon"></i><b>Amazon</b></div>
      <div id="center" class="col" style="box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); transition: background-color 0.3s ease-in-out;height: 30px;background-color:red; color: white;white;border-right: 1px dotted;  border-bottom: 1px dotted;border-color: #BFBFBF;cursor:pointer;padding-top:5px;"><i class="fas fa-bullseye"></i> <b>Target</b></div>
      <div id="right" class="col" style="box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); transition: background-color 0.3s ease-in-out;height: 30px;background-color:#041E42; color: white;border-bottom: 1px dotted;border-color: #BFBFBF;cursor:pointer;padding-top:5px;"><b>Walmart</b></div>
     </div></div>
     <div style="background-color:#ED5E13; border-bottom: 1px dotted;border-left: 1px dotted;border-color: #BFBFBF; text-align:center;">
   <div id="vendors">
      <div id="left" class="col" style=" box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); transition: background-color 0.3s ease-in-out;height: 30px;background-color:white; color: black;border-right: 1px dotted; border-bottom: 1px dotted; border-color: #BFBFBF;cursor:pointer;padding-top:5px;"><i class="fab fa-amazon"></i><b>Amazon</b></div>
      <div id="center" class="col" style="box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); transition: background-color 0.3s ease-in-out;height: 30px;background-color:red; color: white;white;border-right: 1px dotted;  border-bottom: 1px dotted;border-color: #BFBFBF;cursor:pointer;padding-top:5px;"><i class="fas fa-bullseye"></i> <b>Target</b></div>
      <div id="right" class="col" style="box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); transition: background-color 0.3s ease-in-out;height: 30px;background-color:#041E42; color: white;border-bottom: 1px dotted;border-color: #BFBFBF;cursor:pointer;padding-top:5px;"><b>Walmart</b></div>
     </div></div>
     <div style="background-color:#ED5E13; border-bottom: 1px dotted;border-left: 1px dotted;border-color: #BFBFBF; text-align:center;">
   <div id="vendors">
      <div id="left" class="col" style=" box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); transition: background-color 0.3s ease-in-out;height: 30px;background-color:white; color: black;border-right: 1px dotted; border-bottom: 1px dotted; border-color: #BFBFBF;cursor:pointer;padding-top:5px;"><i class="fab fa-amazon"></i><b>Amazon</b></div>
      <div id="center" class="col" style="box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); transition: background-color 0.3s ease-in-out;height: 30px;background-color:red; color: white;white;border-right: 1px dotted;  border-bottom: 1px dotted;border-color: #BFBFBF;cursor:pointer;padding-top:5px;"><i class="fas fa-bullseye"></i> <b>Target</b></div>
      <div id="right" class="col" style="box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); transition: background-color 0.3s ease-in-out;height: 30px;background-color:#041E42; color: white;border-bottom: 1px dotted;border-color: #BFBFBF;cursor:pointer;padding-top:5px;"><b>Walmart</b></div>
     </div></div>
     <div style="background-color:#ED5E13; border-bottom: 1px dotted;border-left: 1px dotted;border-color: #BFBFBF; text-align:center;">
   <div id="vendors">
      <div id="left" class="col" style=" box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); transition: background-color 0.3s ease-in-out;height: 30px;background-color:white; color: black;border-right: 1px dotted; border-bottom: 1px dotted; border-color: #BFBFBF;cursor:pointer;padding-top:5px;"><i class="fab fa-amazon"></i><b>Amazon</b></div>
      <div id="center" class="col" style="box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); transition: background-color 0.3s ease-in-out;height: 30px;background-color:red; color: white;white;border-right: 1px dotted;  border-bottom: 1px dotted;border-color: #BFBFBF;cursor:pointer;padding-top:5px;"><i class="fas fa-bullseye"></i> <b>Target</b></div>
      <div id="right" class="col" style="box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); transition: background-color 0.3s ease-in-out;height: 30px;background-color:#041E42; color: white;border-bottom: 1px dotted;border-color: #BFBFBF;cursor:pointer;padding-top:5px;"><b>Walmart</b></div>
     </div></div>
     <div style="background-color:#ED5E13; border-bottom: 1px dotted;border-left: 1px dotted;border-color: #BFBFBF; text-align:center;">
   <div id="vendors">
      <div id="left" class="col" style=" box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); transition: background-color 0.3s ease-in-out;height: 30px;background-color:white; color: black;border-right: 1px dotted; border-bottom: 1px dotted; border-color: #BFBFBF;cursor:pointer;padding-top:5px;"><i class="fab fa-amazon"></i><b>Amazon</b></div>
      <div id="center" class="col" style="box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); transition: background-color 0.3s ease-in-out;height: 30px;background-color:red; color: white;white;border-right: 1px dotted;  border-bottom: 1px dotted;border-color: #BFBFBF;cursor:pointer;padding-top:5px;"><i class="fas fa-bullseye"></i> <b>Target</b></div>
      <div id="right" class="col" style="box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); transition: background-color 0.3s ease-in-out;height: 30px;background-color:#041E42; color: white;border-bottom: 1px dotted;border-color: #BFBFBF;cursor:pointer;padding-top:5px;"><b>Walmart</b></div>
     </div></div>
 </div>

  <h2 style="text-align:left">Cham Cham Recipe Description</h2>
  </div> <!--end of maincolumn mainmiddle-->
  <div class="maincolumn mainright" style="background-color:#ccc;">
    <h2>Column 3</h2>
    <p>Some text..</p>
  </div>
</div></code>```

答: I found the issue. I had to increase the height of the parent div to accommodate all the child divs. </p>

Body:
I am having a DIV which renders fine. Anything below this DIV keeps showing on the DIV (not below the DIV). Need help to resolve this issue. I tried solution provided in other answers related to this but it did resolve my issue.
Issue 1: The TEXT Cham Cham Recipe Description should come after the table ends
Issue 2: The grey div should be on the right in desktop view and below the table in mobile view.I am not able to include complete HTML and CSS due to character limit.

html,body {
  margin: 0;
  font-family: Helvetica, sans-serif;
  background-color: #ffe2ad;
  height: 100%;
}

a {
  color: #000;
}

/* header */

/*mobile*/
@media (min-width: 48em)
{

  .header li {
    float: left;
  }
  .header li a {
    padding: 15px 15px;
  }
  .header .menu {
    clear: none;
    float: right;
    max-height: none;
  }
  .header .menu-icon {
    display: none;
  }
}
/* 48em = 768px @ 16pt font */
/*menu ends here*/

/* Create three unequal columns that floats next to each other for equip*/
* {
  box-sizing: border-box;
}

/* Create three unequal columns that floats next to each other */
.maincolumn {
  float: left;
  padding: 10px;

}

.mainleft, .mainright {
  width: 10%;
}

.mainmiddle {
  width: 80%;

}

/* Clear floats after the columns */
.mainrow:after {
  content: "";
  display: table;
  clear: both;
}

/* disclosure, print and share buttons*/

.discloseshareprintcolumn {
  float: left;
}

.discloseshareprintleft, .discloseshareprintright {
  width: 50%;
}

/* Clear floats after the columns */
.discloseprintrow:after {
  content: "";
  display: table;
  clear: both;
}

.discloseprintcolumn {
  float: left;
  height: 50px; /* Should be removed. Only for demonstration */
}

.discloseprintleft, .discloseprintright {
  width: 50%;
}

/* Clear floats after the columns */
.discloseprintrow:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
/* For mobile*/
@media only screen and (max-width: 768px) {

  .discloseshareprintcolumn {
    width: 100%;
  }
  .discloseshareprintleft, .discloseshareprintright {
  height: 7%;
}
  .maincolumn {
    width: 100%;
  }
  .mainleft, .mainright {
  height: 20%;
}
}
/* For tablet(IPAD) portrait & landscape*/
@media only screen
  and (min-device-width: 768px)
  and (max-device-width: 1024px)

  {
   .maincolumn {
    width: 100%;
  }

  .discloseshareprintcolumn
  {
    width: 100%;
  }
  .mainleft, .mainright {
  height: 50%;
  width:100%;
}
/*.header li {
    float: left;
  }*/

}

Three Unequal Columns

Column 3

Some text..

Cham Cham Recipe|Indian Sweets Recipe|Dessert Recipe

        <?php include_once("NEWprinter.php");?>

Utensils/Items used for cooking

 Item name

 Wooden spetula

 Pot

 Pressure cooker

 Stainless steel bowl

 Butter knife

 Measuring cup

 Long serving plate

 Pestel & Mortar

 Knife

 Spoon

 Small bowl

 Strainer

 Muslin cloth

 See options, price & availability

Amazon

 Target

Walmart

Amazon

 Target

Walmart

Amazon

 Target

Walmart

Amazon

 Target

Walmart

Amazon

 Target

Walmart

Amazon

 Target

Walmart

Amazon

 Target

Walmart

Amazon

 Target

Walmart

Amazon

 Target

Walmart

Amazon

 Target

Walmart

Amazon

 Target

Walmart

Amazon

 Target

Walmart

Amazon

 Target

Walmart

Cham Cham Recipe Description

Column 3

Some text..


来源: stackexchange

问:
The term 'newman' is not recognized as the name of a cmdlet,
I'm able to execute newman commands from regular powershell without issue:

However, when I have Jenkins run the same script, I get the following output:

```<code>Checkinig prerequisites
   Chocolatey is already installed
   NodeJS is already installed
   NPM is already installed
Starting collection tests

  Testing  C:\Program Files (x86)\Jenkins\workspace\GenericServiceWithPostman\Collections\Account Recv Microservice.postman_collection.json
newman : The term 'newman' is not recognized as the name of a cmdlet,
function, script file, or operable program. Check the spelling of the name, or
if a path was included, verify that the path is correct and try again.
At C:\Program Files
(x86)\Jenkins\workspace\GenericServiceWithPostman\RunColletionTests.ps1:47
char:1
+ newman run $test.FullName --environment .\Environments\DEV01.postman_ ...
+ ~~~~~~
    + CategoryInfo          : ObjectNotFound: (newman:String) [], CommandNotFo
   undException
    + FullyQualifiedErrorId : CommandNotFoundException
</code>```

The script that I run:

```<code>$tests = gci .\Collections\*postman_collection.json| Select-Object -Property FullName

foreach ($test in $tests)
 {
 Write-Host ""
Write-Host "  Testing " $test.FullName
Start-Sleep -s 5
newman run $test.FullName --environment .\Environments\DEV01.postman_environment.json
}
</code>```

The term 'newman' is not recognized as the name of a cmdlet

What am I doing wrong? How do I get it to see newman?

答:
You should to install https://www.npmjs.com/package/newman

npm install -g newman

call your collection: newman run examples/sample-collection.json

or use newman as library:

const newman = require('newman'); // require newman in your project

```<code>// call newman.run to pass `options` object and wait for callback
newman.run({
    collection: require('./sample-collection.json'),
    reporters: 'cli'
}, function (err) {
    if (err) { throw err; }
    console.log('collection run complete!');
});
</code>```

ContentLicense: CC BY-SA 3.0

Body:
I'm able to execute newman commands from regular powershell without issue:

However, when I have Jenkins run the same script, I get the following output:

Checkinig prerequisites
   Chocolatey is already installed
   NodeJS is already installed
   NPM is already installed
Starting collection tests

  Testing  C:\Program Files (x86)\Jenkins\workspace\GenericServiceWithPostman\Collections\Account Recv Microservice.postman_collection.json
newman : The term 'newman' is not recognized as the name of a cmdlet,
function, script file, or operable program. Check the spelling of the name, or
if a path was included, verify that the path is correct and try again.
At C:\Program Files
(x86)\Jenkins\workspace\GenericServiceWithPostman\RunColletionTests.ps1:47
char:1
+ newman run $test.FullName --environment .\Environments\DEV01.postman_ ...
+ ~~~~~~
    + CategoryInfo          : ObjectNotFound: (newman:String) [], CommandNotFo
   undException
    + FullyQualifiedErrorId : CommandNotFoundException

The script that I run:

$tests = gci .\Collections\*postman_collection.json| Select-Object -Property FullName

foreach ($test in $tests)
 {
 Write-Host ""
Write-Host "  Testing " $test.FullName
Start-Sleep -s 5
newman run $test.FullName --environment .\Environments\DEV01.postman_environment.json
}

The term 'newman' is not recognized as the name of a cmdlet

What am I doing wrong? How do I get it to see newman?

Body:
You should to install https://www.npmjs.com/package/newman

npm install -g newman

call your collection: newman run examples/sample-collection.json

or use newman as library:

const newman = require('newman'); // require newman in your project

// call newman.run to pass `options` object and wait for callback
newman.run({
    collection: require('./sample-collection.json'),
    reporters: 'cli'
}, function (err) {
    if (err) { throw err; }
    console.log('collection run complete!');
});

ContentLicense: CC BY-SA 4.0


问:
How do I do css transition delays in reverse other than for hover?
I've got a vue.js application in which I'm trying to figure out how to reverse a delayed css transition. I have a div whose width contracts when the user clicks the close button. Then the height contracts. The height has the delay on it because I want to wait for the width to contract before contracting the height.

BEFORE:

AFTER:

When the user clicks the question mark icon, I want the reverse to happen. The height should expand immediately and then the width expands after a delay.

All the examples of how to do this which I find on google deal with hover transitions. They say to put the reverse transitions in the hover class. All demos I've seen work. But there must be something different about how this works when it comes to transitions that are trigger by something other than hover. In my case, the trigger is a mouse click. And the online solutions don't work. What happens instead is that the reverse transition placed in transitioned-to class seems to override the original transition--which means the original transition contracts the height first (which looks terrible considering the content doesn't fit) then the width.

Here is my code:

```<code>.need-help-container {
    position: absolute;
    right: 0;
    height: 120px;
    ...
    transition: right .5s, height .5s .5s;
}

.need-help-container-closed {
    right: -360px;
    height: 50px;

    transition: right .5s .5s, height .5s; // <-- doesn't work
}
</code>```

```<code><!-- need help box -->
<div class="need-help-container" :class="{'need-help-container-closed': needHelpClosed}">
...
    <!-- close button -->
    <div ...>
        <v-icon @click="needHelpClosed = true" ...>close</v-icon>
    </div>
</div>
</code>```

Should the same solution to the examples involving hover work here? If so, why would it not be working for me? If no, what would be an alternate solution for my case?

Thanks.

答:
Try this:

```<code>.need-help-container-closed:active{
//your code here
}
</code>```

Use :active in place of hover.Did it work?

Body:
I've got a vue.js application in which I'm trying to figure out how to reverse a delayed css transition. I have a div whose width contracts when the user clicks the close button. Then the height contracts. The height has the delay on it because I want to wait for the width to contract before contracting the height.

BEFORE:

AFTER:

When the user clicks the question mark icon, I want the reverse to happen. The height should expand immediately and then the width expands after a delay.

All the examples of how to do this which I find on google deal with hover transitions. They say to put the reverse transitions in the hover class. All demos I've seen work. But there must be something different about how this works when it comes to transitions that are trigger by something other than hover. In my case, the trigger is a mouse click. And the online solutions don't work. What happens instead is that the reverse transition placed in transitioned-to class seems to override the original transition--which means the original transition contracts the height first (which looks terrible considering the content doesn't fit) then the width.

Here is my code:

.need-help-container {
    position: absolute;
    right: 0;
    height: 120px;
    ...
    transition: right .5s, height .5s .5s;
}

.need-help-container-closed {
    right: -360px;
    height: 50px;

    transition: right .5s .5s, height .5s; // <-- doesn't work
}

...

        <v-icon @click="needHelpClosed = true" ...>close</v-icon>

Should the same solution to the examples involving hover work here? If so, why would it not be working for me? If no, what would be an alternate solution for my case?

Thanks.

Body:
Try this:

.need-help-container-closed:active{
//your code here
}

Use :active in place of hover.Did it work?


问:
JavaFX Dynamic TableView
im trying to populate data from DB(using MySQL) into TableView,
the problem i get is, whenever there is a NULL data in some column
there will be an error NullPointerException, before using FX im using SWING component
and there is no problem with my code, its kinda hard for me to porting it. im using NetBeans IDE and Gluon Scene Builder.
the NULL data on DB are used purposedly for some conditional situation to create view in my DB.
i think i know my problem are located in populating data in my HandlerComponent.java but i dont know what to do.

this is the code
TableController.java

```<code>public class TableController implements Initializable {
    Connection CONN;
    Database DB = new Database();
    HandlerComponent COMP_HANDLER;
    @FXML
    private TableView tblView;
    @FXML
    private Button btnLoad;
    @FXML
    private TextField txTable;
    @FXML
    private Label lblKolom1;
    @FXML
    private TextField txKolom1;
    @FXML
    private Label lblKolom2;
    @FXML
    private TextField txKolom2;
    @FXML
    private Button btnTambah;
    @FXML
    private Button btnHapus;
    @FXML
    private Button btnReset;

    @Override
    public void initialize(URL url, ResourceBundle rb) {
        try {
            COMP_HANDLER = new HandlerComponent();
            tblView = COMP_HANDLER.iniTable(tblView, "SELECT * FROM items", DB);

        } catch (Exception ex) {
            ex.printStackTrace();
        }
    }

    @FXML
    public void loadTable() {
        try {
            tblView.getColumns().clear();
            tblView = COMP_HANDLER.iniTable(tblView, "SELECT * FROM "+txTable.getText(), DB);
            tblView.refresh();
        } catch (Exception ex) {
            ex.printStackTrace();
        }
    }

    @FXML
    public void getDataTable(javafx.scene.input.MouseEvent e) {
        if(e.getClickCount() == 2 && !e.isConsumed()) {
            System.out.println("double Clicked");
        }
    }
}
</code>```

Table.fxml

```<code><?xml version="1.0" encoding="UTF-8"?>

<?import java.net.URL?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.TableView?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.FlowPane?>
<?import javafx.scene.layout.Pane?>
<?import javafx.scene.layout.VBox?>

<AnchorPane id="AnchorPane" prefHeight="513.0" prefWidth="600.0" style="-fx-background-color: #123456;" styleClass="mainFxmlClass" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="Controller.TableController">
    <stylesheets>
        <URL value="@designskena.css" />
    </stylesheets>
   <children>
      <VBox prefHeight="497.0" prefWidth="600.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
         <children>
            <FlowPane prefHeight="79.0" prefWidth="600.0">
               <children>
                  <Button fx:id="btnLoad" mnemonicParsing="false" onAction="#loadTable" prefHeight="58.0" prefWidth="92.0" text="Load Data">
                     <FlowPane.margin>
                        <Insets />
                     </FlowPane.margin>
                  </Button>
                  <TextField fx:id="txTable" prefHeight="58.0" prefWidth="431.0" text="Table">
                     <FlowPane.margin>
                        <Insets left="25.0" />
                     </FlowPane.margin>
                  </TextField>
               </children>
               <VBox.margin>
                  <Insets />
               </VBox.margin>
               <padding>
                  <Insets bottom="25.0" left="25.0" right="25.0" top="25.0" />
               </padding></FlowPane>
            <TableView fx:id="tblView" onMouseClicked="#getDataTable" prefHeight="258.0" prefWidth="600.0" style="-fx-background-color: black;" stylesheets="@designskena.css">
               <VBox.margin>
                  <Insets left="25.0" right="25.0" />
               </VBox.margin>
            </TableView>
            <Pane prefHeight="165.0" prefWidth="600.0">
               <children>
                  <Label fx:id="lblKolom1" layoutX="25.0" layoutY="14.0" prefHeight="17.0" prefWidth="58.0" text="Kolom 1" />
                  <TextField fx:id="txKolom1" layoutX="25.0" layoutY="38.0" />
                  <Label fx:id="lblKolom2" layoutX="206.0" layoutY="14.0" prefHeight="17.0" prefWidth="58.0" text="Kolom 2" />
                  <TextField fx:id="txKolom2" layoutX="206.0" layoutY="38.0" />
                  <Button fx:id="btnTambah" layoutX="25.0" layoutY="86.0" mnemonicParsing="false" text="Tambah" />
                  <Button fx:id="btnHapus" layoutX="99.0" layoutY="86.0" mnemonicParsing="false" text="Hapus" />
                  <Button fx:id="btnReset" layoutX="163.0" layoutY="86.0" mnemonicParsing="false" text="Reset" />
               </children>
               <padding>
                  <Insets bottom="25.0" left="25.0" right="25.0" top="25.0" />
               </padding>
            </Pane>
         </children>
      </VBox>
   </children>
</AnchorPane>

</code>```

and this is the HandlerComponent.java

```<code>import java.sql.Connection;
import java.sql.SQLException;
import java.sql.ResultSet;
import javafx.beans.property.SimpleStringProperty;
import javafx.beans.value.ObservableValue;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.scene.control.TableColumn;
import javafx.scene.control.TableColumn.CellDataFeatures;
import javafx.scene.control.TableView;
import javafx.util.Callback;
/**
 * Class untuk membantu konfigurasi setiap COMPONENT JavaFX
 * yang terdapat pada java dengan koneksi Database.
 * @author RHS
 * @version 0.1a
 */
public class HandlerComponent {
    protected Connection H_CONN;
    protected ResultSet H_RESULTSET;
    // Properti yang dibutuhkan untuk Handler Tabel
    public String[] COLUMN_TYPE, COLUMN_NAME;
    public Object[] OBJ_DATA;

    /**
     * <b>Constructor</b> untuk kelas <i>HandlerComponent</i>, akan memanggil metode untuk
     * koneksi driver database pada kelas database, dengan menyimpan
     * koneksi pada variable <i><b>H_CONN</b></i>
     * @throws SQLException
     */
    public HandlerComponent() throws SQLException {
        H_CONN = new Database().inisiasiDB();
    }

    public TableView iniTable(TableView TABLE, String SQL, Database DBClass) {
        ObservableList<ObservableList> DATA = FXCollections.observableArrayList();
        try
        {
            //H_CONN = new DBClass().inisiasiDB();
            H_RESULTSET = DBClass.getSQL(SQL);
            int count = H_RESULTSET.getMetaData().getColumnCount();
            COLUMN_NAME = new String[count];
            COLUMN_TYPE = new String[count];
            OBJ_DATA = new Object[count];

            /**
             * ======================================
             * Pembuatan Kolom tabel secara dinamis *
             * ======================================
             */
            for(int x=0; x<count; x++) {
                final int j = x;
                // pengecekan nama-kolom pada database untuk digenerate pada
                // tabel yang dituju serta pengecekan tipedata pada tiap kolom
                // yang kemudian akan disimpan pada variable String array
                // COLUMN_NAME[] dan COLUMN_TYPE
                COLUMN_NAME[x] = H_RESULTSET.getMetaData().getColumnName(x+1);
                COLUMN_TYPE[x] = H_RESULTSET.getMetaData().getColumnTypeName(x+1);
                System.out.print(COLUMN_TYPE[x]);

                // pembuatan kolom tabel berdasarkan COLUMN_NAME
                // yang telah dibuat
                TableColumn col = new TableColumn(COLUMN_NAME[x]);

                // this is where the NullPointerException are triggered
                col.setCellValueFactory(new Callback<CellDataFeatures<ObservableList, String>, ObservableValue<String>>() {
                    public ObservableValue<String> call(CellDataFeatures<ObservableList, String> param) {
                        return new SimpleStringProperty(param.getValue().get(j).toString());
                    }
                });

                // Menambahkan kolom yang sudah di generate sebelumnya
                // ke dalam tabel tabel tujuan
                TABLE.getColumns().addAll(col);
                System.out.println(" | Column [" + x + "] "+col);
            }

            /**
             * ============================
             * Penambahan Data pada tabel *
             * ============================
             */
            while(H_RESULTSET.next()) {
                // pembuatan tipe data ObservableList untuk digunakan
                // dalam menampung data yang akan dimasukan dalam tabel perbarisnya
                ObservableList<Object> row = FXCollections.observableArrayList();
                for (int x = 1; x <= count; x++) {
                    // pengecekan data pada setiap kolom yang ada di database
                    // pada baris yang sama untuk disesuaikan tipedata yg nantinya
                    // akan disimpan dalam tipedata Object
                    switch(COLUMN_TYPE[x-1]) {
                        case "INT" :
                            OBJ_DATA[x-1] = H_RESULTSET.getInt(x);
                            break;
                        case "DOUBLE" :
                            OBJ_DATA[x-1] = H_RESULTSET.getDouble(x);
                            break;
                        case "FLOAT" :
                            OBJ_DATA[x-1] = H_RESULTSET.getFloat(x);
                            break;
                        case "VARCHAR" :
                            OBJ_DATA[x-1] = H_RESULTSET.getString(x);
                            break;
                        case "CHAR" :
                            OBJ_DATA[x-1] = H_RESULTSET.getString(x);
                            break;
                        case "TEXT" :
                            OBJ_DATA[x-1] = H_RESULTSET.getString(x);
                            break;
                        case "DATE" :
                            OBJ_DATA[x-1] = H_RESULTSET.getString(x);
                            break;
                        default :
                            OBJ_DATA[x-1] = "Unkown Datatype (HandlerComponent.Java)";
                            break;
                    }
                    //
                    row.add(OBJ_DATA[x-1]);
                }
                System.out.println("Row [1] added " + row);
                DATA.add(row);
            }

            TABLE.setItems(DATA);
        } catch (SQLException ex) {
            ex.printStackTrace();
            System.out.println("Error on Building Data");
        }
        return TABLE;
    }
}

</code>```

this is Database.java

```<code>import com.mysql.jdbc.Driver;
import java.sql.Connection; import java.sql.DriverManager;
import java.sql.ResultSet; import java.sql.PreparedStatement;
import java.sql.Statement; import java.sql.SQLException;
import javax.swing.JOptionPane;

public class Database {
    private static Connection config;
    private Connection CONFIG;
    private static Driver DRIVER_MANAGER;
    private static String PARAMETER_CONN;
    public static String DB_HOST, DB_PORT, DB_NAME, DB_USER, DB_PASS, STMT, LOG;
    public ResultSet RES;
    public Statement STM;
    public PreparedStatement PREP;

    public Database() {
        Database.setDB_HOST("localhost");
        Database.setDB_NAME("rab");
        Database.setDB_USER("root");
        Database.setDB_PASS("");
        Database.setDB_PORT("3306");
    }

    public Database(String db_name, String user, String pass) {
        Database.DB_NAME = db_name; Database.DB_USER = user;
        Database.DB_PASS = pass;
    }

    public static void setDB_HOST(String DB_HOST) {
        Database.DB_HOST = DB_HOST;
    }

    public static void setDB_PORT(String DB_PORT) {
        Database.DB_PORT = DB_PORT;
    }

    public static void setDB_NAME(String DB_NAME) {
        Database.DB_NAME = DB_NAME;
    }

    public static void setDB_USER(String DB_USER) {
        Database.DB_USER = DB_USER;
    }

    public static void setDB_PASS(String DB_PASS) {
        Database.DB_PASS = DB_PASS;
    }

    public static void setConfig(Connection config) {
        Database.config = config;
    }

    public void setConfigs(Connection config) {
        CONFIG = config;
    }

    public static void setSTMT(String STMT) {
        Database.STMT = STMT;
    }

    public Connection getConfig() {
        return config;
    }

    protected String getLog() {
        return LOG;
    }
    protected void setLog(String Description)  {
        Database.LOG = ("\nQuery Performed :"+Description+" =========================================\n"
                + Database.STMT
                + "\n========================================================\n");
    }
    protected void setLog(String Description, String SQL)  {
        Database.LOG = ("\nQuery Performed :"+Description+" =========================================\n"
                + SQL
                + "\n========================================================\n");
    }
    /**
     * Query Select untuk SQL
     * dengan syarat harus memberikan query pada property STMT
     * e.g. "<i>SELECT * FROM <b>namaTable</b></i>"<br> atau "<i>SELECT * FROM <b>namaTable</b> WHERE <b>kolom</b> = "<u>kondisi</u>"</i>"
     * @return ResultSet executeQuery();
     * @throws SQLException
     * @see setSTMT();
     */
    public ResultSet getSQL() throws SQLException {
        checkConnection();
        STM = Database.config.createStatement();
        LOG = Database.STMT;
        RES = STM.executeQuery(Database.STMT);
        setLog("Getting Data");
        System.out.println(getLog());
        return RES;
    }

    /**
     * Query Select untuk SQL dengan Custom Parameter
     * @param Query String SQL
     * e.g. "<i>SELECT * FROM <b>namaTable</b></i>"<br> atau "<i>SELECT * FROM <b>namaTable</b> WHERE <b>kolom</b> = "<u>kondisi</u>"</i>"
     * @return ResultSet executeQuery();
     * @throws SQLException
     */
    public ResultSet getSQL(String Query) throws SQLException {
        //checkConnection();
        STM = Database.config.createStatement();;
        setLog("Getting Data", Query);
        System.out.println(getLog());
        return (RES = STM.executeQuery(Query));
    }

    public int insertSQL(Object[] DATA, String TABLE, String PRIMARY_KEY) throws SQLException {
        String[] SQL = Database.STMT.split("\\s");
        int result = 0;
        // pengecualian table cek
        if( (searchIndexDB(DATA[0].toString(),PRIMARY_KEY,TABLE) == -1)
            || (SQL[0].equalsIgnoreCase("UPDATE"))
            || (TABLE.equalsIgnoreCase("orderdetail"))
            || (TABLE.equalsIgnoreCase("recipe"))) {
            //System.out.println("Data ["+DATA[0]+"] belum ada di DB");
            PREP = Database.config.prepareStatement(STMT);
            String typedata = "";
            int pointer = 0;
            if(SQL[0].equalsIgnoreCase("UPDATE")){
                setLog("Update Data");
                result = 2;
            }
            else {
                setLog("Insert Data");
                result = 1;
            }
            System.out.println(getLog());
            for (Object temp : DATA) {
                typedata = temp.getClass().getSimpleName();
                System.out.println(temp.getClass().getSimpleName()+" : "+DATA[pointer]);
                switch (typedata) {
                    case "String" :
                        PREP.setString(pointer+1, DATA[pointer].toString());
                        break;
                    case "Integer" :
                        PREP.setInt(pointer+1, Integer.parseInt(DATA[pointer].toString()));
                        break;
                    case "Float" :
                        PREP.setFloat(pointer+1, Float.parseFloat(DATA[pointer].toString()));
                        break;
                    case "Double" :
                        PREP.setDouble(pointer+1,Double.parseDouble(DATA[pointer].toString()));
                        break;
                }
                pointer++;
            }
            PREP.executeUpdate();
            return result;
        }else{
            System.out.println("Data ["+DATA[0]+"] Sudah ada di DB\n"
                            + "Silahkan Gunakan fitur Update");
            JOptionPane.showMessageDialog(null, "Ooppss!. Data tersebut sudah ada\n"
                    + "Silahkan gunakan Fitur UPDATE","Warning",1);
            return result;
        }
    }

    public int deleteSQL(String KEY) throws SQLException{
        checkConnection();
        PREP = Database.config.prepareStatement(STMT);
        PREP.setString(1, KEY);
        setLog("Delete Data");
        System.out.println(getLog());
        return (PREP.executeUpdate());
    }
    public int deleteSQL(String KEY, String SQL) throws SQLException{
        checkConnection();
        setSTMT(SQL);
        setLog("Delete Data");
        System.out.println(getLog());
        PREP = Database.config.prepareStatement(STMT);
        PREP.setString(1, KEY);
        return (PREP.executeUpdate());
    }

    /**
     * Metode untuk mencari adanya data dalam DB
     * e.g. searchIndexDB(<u>textField.getText(), "kolom", "table"</u>) atau<br>
     * searchIndexDB(<u>txID.getText(), "id", "user"</u>)
     * @param SEARCH data yang ingin dicari
     * @param FIELD kolom field yang dicari
     * @param TABLE table yang dicari
     * @return mengembalikan tipedata Integer, bernilai -1 jika tidak ditemukan,<br>dan akan mengembalikan nilai index jika ditemukan dalam DB;
     * @throws SQLException
     */
    public int searchIndexDB(String SEARCH, String FIELD, String TABLE) throws SQLException {
        int index = -1, i = 0;
        //Database.setSTMT("SELECT "+FIELD+" FROM "+TABLE+" ORDER BY "+FIELD+" ASC");
        RES = getSQL("SELECT "+FIELD+" FROM "+TABLE+" ORDER BY "+FIELD+" ASC");
        while (RES.next()) {
            if(true == RES.getString(1).equalsIgnoreCase(SEARCH)) {
                index = i;
                break;
            }
            i++;
        }
        setLog("Search Index");
        System.out.println(getLog());
        return index;
    }

    public static Connection inisiasiDB() throws SQLException {
        if ((Database.DB_NAME == null) || (Database.DB_USER == null) || (Database.DB_PASS == null) || (Database.DB_PORT == null) || (Database.DB_HOST == null)) {
            JOptionPane.showMessageDialog(null,"Database Belum disetting");
             if (Database.DB_NAME == null) {
                 String DBname = JOptionPane.showInputDialog("Nama Database");
                 Database.DB_NAME = DBname;
             }
             if (Database.DB_USER == null) setDB_USER(JOptionPane.showInputDialog("User"));
             if (Database.DB_PASS == null) Database.DB_PASS = JOptionPane.showInputDialog("Password");
             if (Database.DB_PORT == null) Database.DB_PORT = JOptionPane.showInputDialog("Port");
             if (Database.DB_HOST == null) Database.DB_HOST = JOptionPane.showInputDialog("Host");
             Database.PARAMETER_CONN = "jdbc:mysql://"+Database.DB_HOST+":"+Database.DB_PORT+"/"+Database.DB_NAME;
        }
        try {
            Database.DRIVER_MANAGER = new com.mysql.jdbc.Driver();
            Database.PARAMETER_CONN = "jdbc:mysql://"+Database.DB_HOST+":"+Database.DB_PORT+"/"+Database.DB_NAME;
            DriverManager.registerDriver(DRIVER_MANAGER);
            setConfig(DriverManager.getConnection(Database.PARAMETER_CONN,Database.DB_USER, Database.DB_PASS));
            System.out.println("Koneksi Sukses ========================\n DB_NAME : "+DB_NAME);
        } catch (SQLException ex) {
            ex.printStackTrace();
            JOptionPane.showMessageDialog(null,"Driver untuk Koneksi database tidak ada\nSilahkan nyalakan services MySQL pada XAMPP");
        }
        return config;
    }

    public Connection inisiasiDBnoStatic() throws SQLException {
        if ((Database.DB_NAME == null) || (Database.DB_USER == null) || (Database.DB_PASS == null) || (Database.DB_PORT == null) || (Database.DB_HOST == null)) {
            JOptionPane.showMessageDialog(null,"Database Belum disetting");
             if (Database.DB_NAME == null) {
                 String DBname = JOptionPane.showInputDialog("Nama Database");
                 Database.DB_NAME = DBname;
             }
             if (Database.DB_USER == null) setDB_USER(JOptionPane.showInputDialog("User"));
             if (Database.DB_PASS == null) Database.DB_PASS = JOptionPane.showInputDialog("Password");
             if (Database.DB_PORT == null) Database.DB_PORT = JOptionPane.showInputDialog("Port");
             if (Database.DB_HOST == null) Database.DB_HOST = JOptionPane.showInputDialog("Host");
             Database.PARAMETER_CONN = "jdbc:mysql://"+Database.DB_HOST+":"+Database.DB_PORT+"/"+Database.DB_NAME;
        }
        try {
            Database.DRIVER_MANAGER = new com.mysql.jdbc.Driver();
            Database.PARAMETER_CONN = "jdbc:mysql://"+Database.DB_HOST+":"+Database.DB_PORT+"/"+Database.DB_NAME;
            DriverManager.registerDriver(DRIVER_MANAGER);
            setConfigs(DriverManager.getConnection(Database.PARAMETER_CONN,Database.DB_USER, Database.DB_PASS));
            System.out.println("Koneksi Sukses ========================\n DB_NAME : "+DB_NAME);
        } catch (SQLException ex) {
            ex.printStackTrace();
            JOptionPane.showMessageDialog(null,"Driver untuk Koneksi database tidak ada\nSilahkan nyalakan services MySQL pada XAMPP");
        }
        return CONFIG;
    }

    private void checkConnection() throws SQLException{
        if(getConfig() == null) {
            setConfig(inisiasiDB());
        }
    }

    public int lastInventID(){
        int result= -1;
        try {
            checkConnection();
            setSTMT("SELECT no FROM inventory ORDER BY no ASC");
            RES = getSQL(); RES.last();
            result = RES.getInt(1);
            result++;
        } catch (SQLException ex){
            ex.printStackTrace();
        }
        return result;
    }

    public String generateOrderID() {
        try {
            checkConnection();
            String temp;
            RES = getSQL("SELECT orderID FROM orderhead ORDER BY orderID");
            LOG = STMT;
            RES.last();
            temp = RES.getString("orderID");
            int increase = Integer.parseInt(temp);
            int digit = String.valueOf(increase).length();
            switch (digit) {
                case 1: {increase++;temp = "000"+increase;}
                    break;
                case 2: {increase++;temp = "00"+increase;}
                    break;
                case 3: {increase++;temp = "0"+increase;}
                    break;
                default: {increase++;temp = ""+increase;}
                    break;
            }
            RES.close();
            return temp;
        } catch(SQLException ex) {
            ex.printStackTrace();
        }
        return "";
    }
}

</code>```

Exception Stack

```<code>Exception in thread "JavaFX Application Thread" java.lang.NullPointerException
    at Model.HandlerComponent$1.call(HandlerComponent.java:67)
    at Model.HandlerComponent$1.call(HandlerComponent.java:65)
</code>```

答:
You just need to check for null before attempting to call toString():

```<code>col.setCellValueFactory(new Callback<CellDataFeatures<ObservableList, String>, ObservableValue<String>>() {
    public ObservableValue<String> call(CellDataFeatures<ObservableList, String> param) {
        Object value = param.getValue().get(j) ;
        return new SimpleStringProperty(value == null ? "" : value.toString());
    }
});
</code>```

Title: JavaFX Dynamic TableView

Body:
im trying to populate data from DB(using MySQL) into TableView,
the problem i get is, whenever there is a NULL data in some column
there will be an error NullPointerException, before using FX im using SWING component
and there is no problem with my code, its kinda hard for me to porting it. im using NetBeans IDE and Gluon Scene Builder.
the NULL data on DB are used purposedly for some conditional situation to create view in my DB.
i think i know my problem are located in populating data in my HandlerComponent.java but i dont know what to do.

this is the code
TableController.java

public class TableController implements Initializable {
    Connection CONN;
    Database DB = new Database();
    HandlerComponent COMP_HANDLER;
    @FXML
    private TableView tblView;
    @FXML
    private Button btnLoad;
    @FXML
    private TextField txTable;
    @FXML
    private Label lblKolom1;
    @FXML
    private TextField txKolom1;
    @FXML
    private Label lblKolom2;
    @FXML
    private TextField txKolom2;
    @FXML
    private Button btnTambah;
    @FXML
    private Button btnHapus;
    @FXML
    private Button btnReset;

    @Override
    public void initialize(URL url, ResourceBundle rb) {
        try {
            COMP_HANDLER = new HandlerComponent();
            tblView = COMP_HANDLER.iniTable(tblView, "SELECT * FROM items", DB);

        } catch (Exception ex) {
            ex.printStackTrace();
        }
    }

    @FXML
    public void loadTable() {
        try {
            tblView.getColumns().clear();
            tblView = COMP_HANDLER.iniTable(tblView, "SELECT * FROM "+txTable.getText(), DB);
            tblView.refresh();
        } catch (Exception ex) {
            ex.printStackTrace();
        }
    }

    @FXML
    public void getDataTable(javafx.scene.input.MouseEvent e) {
        if(e.getClickCount() == 2 && !e.isConsumed()) {
            System.out.println("double Clicked");
        }
    }
}

Table.fxml

<?xml version="1.0" encoding="UTF-8"?>

<?import java.net.URL?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.TableView?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.FlowPane?>
<?import javafx.scene.layout.Pane?>
<?import javafx.scene.layout.VBox?>

<AnchorPane id="AnchorPane" prefHeight="513.0" prefWidth="600.0" style="-fx-background-color: #123456;" styleClass="mainFxmlClass" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="Controller.TableController">

   <children>
      <VBox prefHeight="497.0" prefWidth="600.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
         <children>
            <FlowPane prefHeight="79.0" prefWidth="600.0">
               <children>
                  <Button fx:id="btnLoad" mnemonicParsing="false" onAction="#loadTable" prefHeight="58.0" prefWidth="92.0" text="Load Data">
                     <FlowPane.margin>
                        <Insets />
                     </FlowPane.margin>
                  </Button>
                  <TextField fx:id="txTable" prefHeight="58.0" prefWidth="431.0" text="Table">
                     <FlowPane.margin>
                        <Insets left="25.0" />
                     </FlowPane.margin>
                  </TextField>
               </children>
               <VBox.margin>
                  <Insets />
               </VBox.margin>
               <padding>
                  <Insets bottom="25.0" left="25.0" right="25.0" top="25.0" />
               </padding></FlowPane>
            <TableView fx:id="tblView" onMouseClicked="#getDataTable" prefHeight="258.0" prefWidth="600.0" style="-fx-background-color: black;" stylesheets="@designskena.css">
               <VBox.margin>
                  <Insets left="25.0" right="25.0" />
               </VBox.margin>
            </TableView>
            <Pane prefHeight="165.0" prefWidth="600.0">
               <children>

                  <TextField fx:id="txKolom1" layoutX="25.0" layoutY="38.0" />

                  <TextField fx:id="txKolom2" layoutX="206.0" layoutY="38.0" />
                  <Button fx:id="btnTambah" layoutX="25.0" layoutY="86.0" mnemonicParsing="false" text="Tambah" />
                  <Button fx:id="btnHapus" layoutX="99.0" layoutY="86.0" mnemonicParsing="false" text="Hapus" />
                  <Button fx:id="btnReset" layoutX="163.0" layoutY="86.0" mnemonicParsing="false" text="Reset" />
               </children>
               <padding>
                  <Insets bottom="25.0" left="25.0" right="25.0" top="25.0" />
               </padding>
            </Pane>
         </children>
      </VBox>
   </children>
</AnchorPane>

and this is the HandlerComponent.java

import java.sql.Connection;
import java.sql.SQLException;
import java.sql.ResultSet;
import javafx.beans.property.SimpleStringProperty;
import javafx.beans.value.ObservableValue;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.scene.control.TableColumn;
import javafx.scene.control.TableColumn.CellDataFeatures;
import javafx.scene.control.TableView;
import javafx.util.Callback;
/**
 * Class untuk membantu konfigurasi setiap COMPONENT JavaFX
 * yang terdapat pada java dengan koneksi Database.
 * @author RHS
 * @version 0.1a
 */
public class HandlerComponent {
    protected Connection H_CONN;
    protected ResultSet H_RESULTSET;
    // Properti yang dibutuhkan untuk Handler Tabel
    public String[] COLUMN_TYPE, COLUMN_NAME;
    public Object[] OBJ_DATA;

    /**
     * Constructor untuk kelas HandlerComponent, akan memanggil metode untuk
     * koneksi driver database pada kelas database, dengan menyimpan
     * koneksi pada variable H_CONN
     * @throws SQLException
     */
    public HandlerComponent() throws SQLException {
        H_CONN = new Database().inisiasiDB();
    }

    public TableView iniTable(TableView TABLE, String SQL, Database DBClass) {
        ObservableList<ObservableList> DATA = FXCollections.observableArrayList();
        try
        {
            //H_CONN = new DBClass().inisiasiDB();
            H_RESULTSET = DBClass.getSQL(SQL);
            int count = H_RESULTSET.getMetaData().getColumnCount();
            COLUMN_NAME = new String[count];
            COLUMN_TYPE = new String[count];
            OBJ_DATA = new Object[count];

            /**
             * ======================================
             * Pembuatan Kolom tabel secara dinamis *
             * ======================================
             */
            for(int x=0; x<count; x++) {
                final int j = x;
                // pengecekan nama-kolom pada database untuk digenerate pada
                // tabel yang dituju serta pengecekan tipedata pada tiap kolom
                // yang kemudian akan disimpan pada variable String array
                // COLUMN_NAME[] dan COLUMN_TYPE
                COLUMN_NAME[x] = H_RESULTSET.getMetaData().getColumnName(x+1);
                COLUMN_TYPE[x] = H_RESULTSET.getMetaData().getColumnTypeName(x+1);
                System.out.print(COLUMN_TYPE[x]);

                // pembuatan kolom tabel berdasarkan COLUMN_NAME
                // yang telah dibuat
                TableColumn col = new TableColumn(COLUMN_NAME[x]);

                // this is where the NullPointerException are triggered
                col.setCellValueFactory(new Callback<CellDataFeatures<ObservableList, String>, ObservableValue<String>>() {
                    public ObservableValue<String> call(CellDataFeatures<ObservableList, String> param) {
                        return new SimpleStringProperty(param.getValue().get(j).toString());
                    }
                });

                // Menambahkan kolom yang sudah di generate sebelumnya
                // ke dalam tabel tabel tujuan
                TABLE.getColumns().addAll(col);
                System.out.println(" | Column [" + x + "] "+col);
            }

            /**
             * ============================
             * Penambahan Data pada tabel *
             * ============================
             */
            while(H_RESULTSET.next()) {
                // pembuatan tipe data ObservableList untuk digunakan
                // dalam menampung data yang akan dimasukan dalam tabel perbarisnya
                ObservableList<Object> row = FXCollections.observableArrayList();
                for (int x = 1; x <= count; x++) {
                    // pengecekan data pada setiap kolom yang ada di database
                    // pada baris yang sama untuk disesuaikan tipedata yg nantinya
                    // akan disimpan dalam tipedata Object
                    switch(COLUMN_TYPE[x-1]) {
                        case "INT" :
                            OBJ_DATA[x-1] = H_RESULTSET.getInt(x);
                            break;
                        case "DOUBLE" :
                            OBJ_DATA[x-1] = H_RESULTSET.getDouble(x);
                            break;
                        case "FLOAT" :
                            OBJ_DATA[x-1] = H_RESULTSET.getFloat(x);
                            break;
                        case "VARCHAR" :
                            OBJ_DATA[x-1] = H_RESULTSET.getString(x);
                            break;
                        case "CHAR" :
                            OBJ_DATA[x-1] = H_RESULTSET.getString(x);
                            break;
                        case "TEXT" :
                            OBJ_DATA[x-1] = H_RESULTSET.getString(x);
                            break;
                        case "DATE" :
                            OBJ_DATA[x-1] = H_RESULTSET.getString(x);
                            break;
                        default :
                            OBJ_DATA[x-1] = "Unkown Datatype (HandlerComponent.Java)";
                            break;
                    }
                    //
                    row.add(OBJ_DATA[x-1]);
                }
                System.out.println("Row [1] added " + row);
                DATA.add(row);
            }

            TABLE.setItems(DATA);
        } catch (SQLException ex) {
            ex.printStackTrace();
            System.out.println("Error on Building Data");
        }
        return TABLE;
    }
}

this is Database.java

import com.mysql.jdbc.Driver;
import java.sql.Connection; import java.sql.DriverManager;
import java.sql.ResultSet; import java.sql.PreparedStatement;
import java.sql.Statement; import java.sql.SQLException;
import javax.swing.JOptionPane;

public class Database {
    private static Connection config;
    private Connection CONFIG;
    private static Driver DRIVER_MANAGER;
    private static String PARAMETER_CONN;
    public static String DB_HOST, DB_PORT, DB_NAME, DB_USER, DB_PASS, STMT, LOG;
    public ResultSet RES;
    public Statement STM;
    public PreparedStatement PREP;

    public Database() {
        Database.setDB_HOST("localhost");
        Database.setDB_NAME("rab");
        Database.setDB_USER("root");
        Database.setDB_PASS("");
        Database.setDB_PORT("3306");
    }

    public Database(String db_name, String user, String pass) {
        Database.DB_NAME = db_name; Database.DB_USER = user;
        Database.DB_PASS = pass;
    }

    public static void setDB_HOST(String DB_HOST) {
        Database.DB_HOST = DB_HOST;
    }

    public static void setDB_PORT(String DB_PORT) {
        Database.DB_PORT = DB_PORT;
    }

    public static void setDB_NAME(String DB_NAME) {
        Database.DB_NAME = DB_NAME;
    }

    public static void setDB_USER(String DB_USER) {
        Database.DB_USER = DB_USER;
    }

    public static void setDB_PASS(String DB_PASS) {
        Database.DB_PASS = DB_PASS;
    }

    public static void setConfig(Connection config) {
        Database.config = config;
    }

    public void setConfigs(Connection config) {
        CONFIG = config;
    }

    public static void setSTMT(String STMT) {
        Database.STMT = STMT;
    }

    public Connection getConfig() {
        return config;
    }

    protected String getLog() {
        return LOG;
    }
    protected void setLog(String Description)  {
        Database.LOG = ("\nQuery Performed :"+Description+" =========================================\n"
                + Database.STMT
                + "\n========================================================\n");
    }
    protected void setLog(String Description, String SQL)  {
        Database.LOG = ("\nQuery Performed :"+Description+" =========================================\n"
                + SQL
                + "\n========================================================\n");
    }
    /**
     * Query Select untuk SQL
     * dengan syarat harus memberikan query pada property STMT
     * e.g. "SELECT * FROM namaTable"
 atau "SELECT * FROM namaTable WHERE kolom = "kondisi""
     * @return ResultSet executeQuery();
     * @throws SQLException
     * @see setSTMT();
     */
    public ResultSet getSQL() throws SQLException {
        checkConnection();
        STM = Database.config.createStatement();
        LOG = Database.STMT;
        RES = STM.executeQuery(Database.STMT);
        setLog("Getting Data");
        System.out.println(getLog());
        return RES;
    }

    /**
     * Query Select untuk SQL dengan Custom Parameter
     * @param Query String SQL
     * e.g. "SELECT * FROM namaTable"
 atau "SELECT * FROM namaTable WHERE kolom = "kondisi""
     * @return ResultSet executeQuery();
     * @throws SQLException
     */
    public ResultSet getSQL(String Query) throws SQLException {
        //checkConnection();
        STM = Database.config.createStatement();;
        setLog("Getting Data", Query);
        System.out.println(getLog());
        return (RES = STM.executeQuery(Query));
    }

    public int insertSQL(Object[] DATA, String TABLE, String PRIMARY_KEY) throws SQLException {
        String[] SQL = Database.STMT.split("\\s");
        int result = 0;
        // pengecualian table cek
        if( (searchIndexDB(DATA[0].toString(),PRIMARY_KEY,TABLE) == -1)
            || (SQL[0].equalsIgnoreCase("UPDATE"))
            || (TABLE.equalsIgnoreCase("orderdetail"))
            || (TABLE.equalsIgnoreCase("recipe"))) {
            //System.out.println("Data ["+DATA[0]+"] belum ada di DB");
            PREP = Database.config.prepareStatement(STMT);
            String typedata = "";
            int pointer = 0;
            if(SQL[0].equalsIgnoreCase("UPDATE")){
                setLog("Update Data");
                result = 2;
            }
            else {
                setLog("Insert Data");
                result = 1;
            }
            System.out.println(getLog());
            for (Object temp : DATA) {
                typedata = temp.getClass().getSimpleName();
                System.out.println(temp.getClass().getSimpleName()+" : "+DATA[pointer]);
                switch (typedata) {
                    case "String" :
                        PREP.setString(pointer+1, DATA[pointer].toString());
                        break;
                    case "Integer" :
                        PREP.setInt(pointer+1, Integer.parseInt(DATA[pointer].toString()));
                        break;
                    case "Float" :
                        PREP.setFloat(pointer+1, Float.parseFloat(DATA[pointer].toString()));
                        break;
                    case "Double" :
                        PREP.setDouble(pointer+1,Double.parseDouble(DATA[pointer].toString()));
                        break;
                }
                pointer++;
            }
            PREP.executeUpdate();
            return result;
        }else{
            System.out.println("Data ["+DATA[0]+"] Sudah ada di DB\n"
                            + "Silahkan Gunakan fitur Update");
            JOptionPane.showMessageDialog(null, "Ooppss!. Data tersebut sudah ada\n"
                    + "Silahkan gunakan Fitur UPDATE","Warning",1);
            return result;
        }
    }

    public int deleteSQL(String KEY) throws SQLException{
        checkConnection();
        PREP = Database.config.prepareStatement(STMT);
        PREP.setString(1, KEY);
        setLog("Delete Data");
        System.out.println(getLog());
        return (PREP.executeUpdate());
    }
    public int deleteSQL(String KEY, String SQL) throws SQLException{
        checkConnection();
        setSTMT(SQL);
        setLog("Delete Data");
        System.out.println(getLog());
        PREP = Database.config.prepareStatement(STMT);
        PREP.setString(1, KEY);
        return (PREP.executeUpdate());
    }

    /**
     * Metode untuk mencari adanya data dalam DB
     * e.g. searchIndexDB(textField.getText(), "kolom", "table") atau

     * searchIndexDB(txID.getText(), "id", "user")
     * @param SEARCH data yang ingin dicari
     * @param FIELD kolom field yang dicari
     * @param TABLE table yang dicari
     * @return mengembalikan tipedata Integer, bernilai -1 jika tidak ditemukan,
dan akan mengembalikan nilai index jika ditemukan dalam DB;
     * @throws SQLException
     */
    public int searchIndexDB(String SEARCH, String FIELD, String TABLE) throws SQLException {
        int index = -1, i = 0;
        //Database.setSTMT("SELECT "+FIELD+" FROM "+TABLE+" ORDER BY "+FIELD+" ASC");
        RES = getSQL("SELECT "+FIELD+" FROM "+TABLE+" ORDER BY "+FIELD+" ASC");
        while (RES.next()) {
            if(true == RES.getString(1).equalsIgnoreCase(SEARCH)) {
                index = i;
                break;
            }
            i++;
        }
        setLog("Search Index");
        System.out.println(getLog());
        return index;
    }

    public static Connection inisiasiDB() throws SQLException {
        if ((Database.DB_NAME == null) || (Database.DB_USER == null) || (Database.DB_PASS == null) || (Database.DB_PORT == null) || (Database.DB_HOST == null)) {
            JOptionPane.showMessageDialog(null,"Database Belum disetting");
             if (Database.DB_NAME == null) {
                 String DBname = JOptionPane.showInputDialog("Nama Database");
                 Database.DB_NAME = DBname;
             }
             if (Database.DB_USER == null) setDB_USER(JOptionPane.showInputDialog("User"));
             if (Database.DB_PASS == null) Database.DB_PASS = JOptionPane.showInputDialog("Password");
             if (Database.DB_PORT == null) Database.DB_PORT = JOptionPane.showInputDialog("Port");
             if (Database.DB_HOST == null) Database.DB_HOST = JOptionPane.showInputDialog("Host");
             Database.PARAMETER_CONN = "jdbc:mysql://"+Database.DB_HOST+":"+Database.DB_PORT+"/"+Database.DB_NAME;
        }
        try {
            Database.DRIVER_MANAGER = new com.mysql.jdbc.Driver();
            Database.PARAMETER_CONN = "jdbc:mysql://"+Database.DB_HOST+":"+Database.DB_PORT+"/"+Database.DB_NAME;
            DriverManager.registerDriver(DRIVER_MANAGER);
            setConfig(DriverManager.getConnection(Database.PARAMETER_CONN,Database.DB_USER, Database.DB_PASS));
            System.out.println("Koneksi Sukses ========================\n DB_NAME : "+DB_NAME);
        } catch (SQLException ex) {
            ex.printStackTrace();
            JOptionPane.showMessageDialog(null,"Driver untuk Koneksi database tidak ada\nSilahkan nyalakan services MySQL pada XAMPP");
        }
        return config;
    }

    public Connection inisiasiDBnoStatic() throws SQLException {
        if ((Database.DB_NAME == null) || (Database.DB_USER == null) || (Database.DB_PASS == null) || (Database.DB_PORT == null) || (Database.DB_HOST == null)) {
            JOptionPane.showMessageDialog(null,"Database Belum disetting");
             if (Database.DB_NAME == null) {
                 String DBname = JOptionPane.showInputDialog("Nama Database");
                 Database.DB_NAME = DBname;
             }
             if (Database.DB_USER == null) setDB_USER(JOptionPane.showInputDialog("User"));
             if (Database.DB_PASS == null) Database.DB_PASS = JOptionPane.showInputDialog("Password");
             if (Database.DB_PORT == null) Database.DB_PORT = JOptionPane.showInputDialog("Port");
             if (Database.DB_HOST == null) Database.DB_HOST = JOptionPane.showInputDialog("Host");
             Database.PARAMETER_CONN = "jdbc:mysql://"+Database.DB_HOST+":"+Database.DB_PORT+"/"+Database.DB_NAME;
        }
        try {
            Database.DRIVER_MANAGER = new com.mysql.jdbc.Driver();
            Database.PARAMETER_CONN = "jdbc:mysql://"+Database.DB_HOST+":"+Database.DB_PORT+"/"+Database.DB_NAME;
            DriverManager.registerDriver(DRIVER_MANAGER);
            setConfigs(DriverManager.getConnection(Database.PARAMETER_CONN,Database.DB_USER, Database.DB_PASS));
            System.out.println("Koneksi Sukses ========================\n DB_NAME : "+DB_NAME);
        } catch (SQLException ex) {
            ex.printStackTrace();
            JOptionPane.showMessageDialog(null,"Driver untuk Koneksi database tidak ada\nSilahkan nyalakan services MySQL pada XAMPP");
        }
        return CONFIG;
    }

    private void checkConnection() throws SQLException{
        if(getConfig() == null) {
            setConfig(inisiasiDB());
        }
    }

    public int lastInventID(){
        int result= -1;
        try {
            checkConnection();
            setSTMT("SELECT no FROM inventory ORDER BY no ASC");
            RES = getSQL(); RES.last();
            result = RES.getInt(1);
            result++;
        } catch (SQLException ex){
            ex.printStackTrace();
        }
        return result;
    }

    public String generateOrderID() {
        try {
            checkConnection();
            String temp;
            RES = getSQL("SELECT orderID FROM orderhead ORDER BY orderID");
            LOG = STMT;
            RES.last();
            temp = RES.getString("orderID");
            int increase = Integer.parseInt(temp);
            int digit = String.valueOf(increase).length();
            switch (digit) {
                case 1: {increase++;temp = "000"+increase;}
                    break;
                case 2: {increase++;temp = "00"+increase;}
                    break;
                case 3: {increase++;temp = "0"+increase;}
                    break;
                default: {increase++;temp = ""+increase;}
                    break;
            }
            RES.close();
            return temp;
        } catch(SQLException ex) {
            ex.printStackTrace();
        }
        return "";
    }
}

Exception Stack

Exception in thread "JavaFX Application Thread" java.lang.NullPointerException
    at Model.HandlerComponent$1.call(HandlerComponent.java:67)
    at Model.HandlerComponent$1.call(HandlerComponent.java:65)

Body:
You just need to check for null before attempting to call toString():

col.setCellValueFactory(new Callback<CellDataFeatures<ObservableList, String>, ObservableValue<String>>() {
    public ObservableValue<String> call(CellDataFeatures<ObservableList, String> param) {
        Object value = param.getValue().get(j) ;
        return new SimpleStringProperty(value == null ? "" : value.toString());
    }
});


问:
Use Enums across functions and classes in a PowerShell Module
I'm creating a PowerShell module that I would like to use enums across several functions (that will be exported, if that matters) and classes in the module.  The only way I can see to do this is to put all of the code in a single file.  That's not an easy maintenance story, however.  I want a module file structure similar to the following:

As you can see in the code, Class1 has the Enum1 property flagged as "Unable to find type [Enum1]."

Deploy-MyResource:

function Deploy-MyResource {
    [CmdletBinding()]
    Param(
        [Parameter(Mandatory=$true)]
        [Enum1] $EnumParam,

        [Parameter(Mandatory=$true)]
        [Class1] $ClassParam
    )

    $class2 = [Class2]::new()

    if($class2.Prop1 -eq $ClassParam.Prop1) {
        Write-Output "Matches"
    }
    else {
        Write-Output "No match."
    }
}
```

<p>Class1:</p>

<pre class="lang-bsh prettyprint-override"><code>Class Class1 {
    [string] $Prop1
    [int] $Prop2
    [Enum1] $EnumProp

    DoSomething() {
        Write-Output "Did something using $($this.Prop1), $($this.Prop2), & $($this.EnumProp)"
    }
}
</code>```

Enum1:

enum Enum1 {
    ValueOne
    ValueTwo
}
```

<p>Here are my PSD1 and PSM1:</p>

<p><img src="https://i.stack.imgur.com/jic7k.png" alt="enter image description here"></p>

<p>PSD1:</p>

<pre class="lang-bsh prettyprint-override"><code>
@{

    # Script module or binary module file associated with this manifest.
    RootModule         = 'Module1.psm1'

    # Version number of this module.
    # NOTE keep version in sync with Module1.nuspec
    ModuleVersion      = '2.7.2'

    # ID used to uniquely identify this module
    GUID               = '24EC97AC-42B1-4719-9EF2-F49C14F8D148'

    # Author of this module
    Author             = 'Me'

    # Company or vendor of this module
    CompanyName        = 'Me'

    # Description of the functionality provided by this module
    Description        = 'Example module for Stack post'

    # Minimum version of the Windows PowerShell engine required by this module
    PowerShellVersion  = '5.1'

    # Modules that must be imported into the global environment prior to importing this module
    RequiredModules    = @()

    # Assemblies that must be loaded prior to importing this module
    RequiredAssemblies = @('System.Web')

    # Functions to export from this module, for best performance, do not use wildcards and do not delete the entry, use an empty array if there are no functions to export.
    FunctionsToExport  = @('Deploy-MyResource')

    # Cmdlets to export from this module, for best performance, do not use wildcards and do not delete the entry, use an empty array if there are no cmdlets to export.
    CmdletsToExport    = @()

    # Variables to export from this module
    VariablesToExport  = @()

    # Aliases to export from this module, for best performance, do not use wildcards and do not delete the entry, use an empty array if there are no aliases to export.
    AliasesToExport    = @()

    # Private data to pass to the module specified in RootModule/ModuleToProcess. This may also contain a PSData hashtable with additional module metadata used by PowerShell.
    PrivateData        = @{

        PSData = @{
            #region Unused PSData

            # Tags applied to this module. These help with module discovery in online galleries.
            # Tags = @()

            # A URL to the license for this module.
            # LicenseUri = ''

            # A URL to the main website for this project.
            # ProjectUri = ''

            # A URL to an icon representing this module.
            # IconUri = ''

            # ReleaseNotes of this module
            # ReleaseNotes = ''

            #endregion Unused PSData
        } # End of PSData hashtable

    } # End of PrivateData hashtable

    #region Unused Props

    # Copyright statement for this module
    # Copyright = '(c) 2019 appliedis.com. All rights reserved.'

    # Supported PSEditions
    # CompatiblePSEditions = @()

    # Name of the Windows PowerShell host required by this module
    # PowerShellHostName = ''

    # Minimum version of the Windows PowerShell host required by this module
    # PowerShellHostVersion = ''

    # Minimum version of Microsoft .NET Framework required by this module. This prerequisite is valid for the PowerShell Desktop edition only.
    # DotNetFrameworkVersion = ''

    # Minimum version of the common language runtime (CLR) required by this module. This prerequisite is valid for the PowerShell Desktop edition only.
    # CLRVersion = ''

    # Processor architecture (None, X86, Amd64) required by this module
    # ProcessorArchitecture = ''

    # Script files (.ps1) that are run in the caller's environment prior to importing this module.
    # ScriptsToProcess = @()

    # Type files (.ps1xml) to be loaded when importing this module
    # TypesToProcess = @()

    # Format files (.ps1xml) to be loaded when importing this module
    # FormatsToProcess = 'Module1.Format.ps1xml'

    # Modules to import as nested modules of the module specified in RootModule/ModuleToProcess
    # NestedModules = @()

    # DSC resources to export from this module
    # DscResourcesToExport = @()

    # List of all modules packaged with this module
    # ModuleList = @()

    # List of all files packaged with this module
    # FileList = @()

    # HelpInfo URI of this module
    # HelpInfoURI = ''

    # Default prefix for commands exported from this module. Override the default prefix using Import-Module -Prefix.
    # DefaultCommandPrefix = ''

    #endregion Unused Props
}
</code>```

PSM1:

# Get public and private function definition files.
$Private = @( Get-ChildItem -Path $PSScriptRoot\Function\private\*.ps1 -Recurse -ErrorAction SilentlyContinue )
$Public  = @( Get-ChildItem -Path $PSScriptRoot\Functions\public\*.ps1 -Recurse -ErrorAction SilentlyContinue )

# Dot source the files
Foreach($import in @($Private + $Public))
{
    Try
    {
        Set-StrictMode -Version Latest
        . $import.fullname
    }
    Catch
    {
        Write-Error -Message "Failed to import function $($import.fullname): $_"
    }
}

# Export the public functions
Foreach($import in $Public)
{
    Try
    {
        Export-ModuleMember -Function $import.BaseName
    }
    Catch
    {
        Write-Error -Message "Failed to import function $($import.fullname): $_"
    }
}

```

<p>This is what I get when I try to use the module:</p>

<p><img src="https://i.stack.imgur.com/Pg3JB.png" alt="enter image description here"></p>

<p>Use-Module (outside of the Module1 folder):</p>

<pre class="lang-bsh prettyprint-override"><code>Using module .\Module1

$class1 = [Class1]::new()

Deploy-MyResource -EnumParam ValueOne -ClassParam $class1
</code>```

What am I missing?  All of the examples about modules and classes I'm finding are all in a single file.

I've created a repo on GitHub with the code here: https://github.com/SPSamL/PowerShell-Module-With-Classes

答: There's no good solution to this in pure PowerShell right now. If you need class definitions shared across multiple scripts and other modules, then you'll probably want to build a C# class library and include the DLL with one of your PowerShell module projects.</p>

Body:
I'm creating a PowerShell module that I would like to use enums across several functions (that will be exported, if that matters) and classes in the module.  The only way I can see to do this is to put all of the code in a single file.  That's not an easy maintenance story, however.  I want a module file structure similar to the following:

As you can see in the code, Class1 has the Enum1 property flagged as "Unable to find type [Enum1]."

Deploy-MyResource:

function Deploy-MyResource {
    [CmdletBinding()]
    Param(
        [Parameter(Mandatory=$true)]
        [Enum1] $EnumParam,

        [Parameter(Mandatory=$true)]
        [Class1] $ClassParam
    )

    $class2 = [Class2]::new()

    if($class2.Prop1 -eq $ClassParam.Prop1) {
        Write-Output "Matches"
    }
    else {
        Write-Output "No match."
    }
}

Class1:

Class Class1 {
    [string] $Prop1
    [int] $Prop2
    [Enum1] $EnumProp

    DoSomething() {
        Write-Output "Did something using $($this.Prop1), $($this.Prop2), & $($this.EnumProp)"
    }
}

Enum1:

enum Enum1 {
    ValueOne
    ValueTwo
}

Here are my PSD1 and PSM1:

PSD1:

@{

    # Script module or binary module file associated with this manifest.
    RootModule         = 'Module1.psm1'

    # Version number of this module.
    # NOTE keep version in sync with Module1.nuspec
    ModuleVersion      = '2.7.2'

    # ID used to uniquely identify this module
    GUID               = '24EC97AC-42B1-4719-9EF2-F49C14F8D148'

    # Author of this module
    Author             = 'Me'

    # Company or vendor of this module
    CompanyName        = 'Me'

    # Description of the functionality provided by this module
    Description        = 'Example module for Stack post'

    # Minimum version of the Windows PowerShell engine required by this module
    PowerShellVersion  = '5.1'

    # Modules that must be imported into the global environment prior to importing this module
    RequiredModules    = @()

    # Assemblies that must be loaded prior to importing this module
    RequiredAssemblies = @('System.Web')

    # Functions to export from this module, for best performance, do not use wildcards and do not delete the entry, use an empty array if there are no functions to export.
    FunctionsToExport  = @('Deploy-MyResource')

    # Cmdlets to export from this module, for best performance, do not use wildcards and do not delete the entry, use an empty array if there are no cmdlets to export.
    CmdletsToExport    = @()

    # Variables to export from this module
    VariablesToExport  = @()

    # Aliases to export from this module, for best performance, do not use wildcards and do not delete the entry, use an empty array if there are no aliases to export.
    AliasesToExport    = @()

    # Private data to pass to the module specified in RootModule/ModuleToProcess. This may also contain a PSData hashtable with additional module metadata used by PowerShell.
    PrivateData        = @{

        PSData = @{
            #region Unused PSData

            # Tags applied to this module. These help with module discovery in online galleries.
            # Tags = @()

            # A URL to the license for this module.
            # LicenseUri = ''

            # A URL to the main website for this project.
            # ProjectUri = ''

            # A URL to an icon representing this module.
            # IconUri = ''

            # ReleaseNotes of this module
            # ReleaseNotes = ''

            #endregion Unused PSData
        } # End of PSData hashtable

    } # End of PrivateData hashtable

    #region Unused Props

    # Copyright statement for this module
    # Copyright = '(c) 2019 appliedis.com. All rights reserved.'

    # Supported PSEditions
    # CompatiblePSEditions = @()

    # Name of the Windows PowerShell host required by this module
    # PowerShellHostName = ''

    # Minimum version of the Windows PowerShell host required by this module
    # PowerShellHostVersion = ''

    # Minimum version of Microsoft .NET Framework required by this module. This prerequisite is valid for the PowerShell Desktop edition only.
    # DotNetFrameworkVersion = ''

    # Minimum version of the common language runtime (CLR) required by this module. This prerequisite is valid for the PowerShell Desktop edition only.
    # CLRVersion = ''

    # Processor architecture (None, X86, Amd64) required by this module
    # ProcessorArchitecture = ''

    # Script files (.ps1) that are run in the caller's environment prior to importing this module.
    # ScriptsToProcess = @()

    # Type files (.ps1xml) to be loaded when importing this module
    # TypesToProcess = @()

    # Format files (.ps1xml) to be loaded when importing this module
    # FormatsToProcess = 'Module1.Format.ps1xml'

    # Modules to import as nested modules of the module specified in RootModule/ModuleToProcess
    # NestedModules = @()

    # DSC resources to export from this module
    # DscResourcesToExport = @()

    # List of all modules packaged with this module
    # ModuleList = @()

    # List of all files packaged with this module
    # FileList = @()

    # HelpInfo URI of this module
    # HelpInfoURI = ''

    # Default prefix for commands exported from this module. Override the default prefix using Import-Module -Prefix.
    # DefaultCommandPrefix = ''

    #endregion Unused Props
}

PSM1:

# Get public and private function definition files.
$Private = @( Get-ChildItem -Path $PSScriptRoot\Function\private\*.ps1 -Recurse -ErrorAction SilentlyContinue )
$Public  = @( Get-ChildItem -Path $PSScriptRoot\Functions\public\*.ps1 -Recurse -ErrorAction SilentlyContinue )

# Dot source the files
Foreach($import in @($Private + $Public))
{
    Try
    {
        Set-StrictMode -Version Latest
        . $import.fullname
    }
    Catch
    {
        Write-Error -Message "Failed to import function $($import.fullname): $_"
    }
}

# Export the public functions
Foreach($import in $Public)
{
    Try
    {
        Export-ModuleMember -Function $import.BaseName
    }
    Catch
    {
        Write-Error -Message "Failed to import function $($import.fullname): $_"
    }
}

This is what I get when I try to use the module:

Use-Module (outside of the Module1 folder):

Using module .\Module1

$class1 = [Class1]::new()

Deploy-MyResource -EnumParam ValueOne -ClassParam $class1

What am I missing?  All of the examples about modules and classes I'm finding are all in a single file.

I've created a repo on GitHub with the code here: https://github.com/SPSamL/PowerShell-Module-With-Classes


问:
How to create a route from query parameter
How to make a route and a controller to get a value from query parameter.

I want to get a noTicket value from the below link:

https://example.com/api/getdata?noTicket=1

My route:

```<code>Route::get('feedback_getNoTicket/{noTicket?}','FeedbackController@Feedback_APIgetNoTicket')->where('noTicket', '(.*)');
</code>```

My controller, but can't get the noTicket's value

```<code>public function Feedback_APIgetNoTicket(Request $noTicket){

dd($noTicket);

}
</code>```

答:
Try this easy method :

https://example.com/api/getdata/?noTicket=1

Route :

```<code>Route::get('getdata/','FeedbackController@Feedback_APIgetNoTicket')->name('noticket');
</code>```

Controller :

```<code>public function Feedback_APIgetNoTicket(Request $request)
{
     dd($request->noTicket);  // output 1
}
</code>```

Body:
How to make a route and a controller to get a value from query parameter.

I want to get a noTicket value from the below link:

https://example.com/api/getdata?noTicket=1

My route:

Route::get('feedback_getNoTicket/{noTicket?}','FeedbackController@Feedback_APIgetNoTicket')->where('noTicket', '(.*)');

My controller, but can't get the noTicket's value

public function Feedback_APIgetNoTicket(Request $noTicket){

dd($noTicket);

}

Body:
Try this easy method :

https://example.com/api/getdata/?noTicket=1

Route :

Route::get('getdata/','FeedbackController@Feedback_APIgetNoTicket')->name('noticket');

Controller :

public function Feedback_APIgetNoTicket(Request $request)
{
     dd($request->noTicket);  // output 1
}


问:
Take and display the input with structure data type in C language
This is my very simple struct data type code that doesn't work.

What I want my program to do is to read input from the user and insert the digit into the struct. However, I don't know how to do it since I get just garbage value.

My code is :

```<code>#include<stdio.h>
#include<stdlib.h>

struct book {
    char name;
    float price;
    int pages;
};

void main(){
    struct book b1, b2, b3;
    printf("\nEnter neme , prices & pages of 3 books \n");
    scanf("%c %f %d",&b1.name, &b1.price, &b1.pages);
    scanf("%c %f %d",&b2.name, &b2.price, &b2.pages);
    scanf("%c %f %d",&b3.name, &b3.price, &b3.pages);

    printf("\nAnd this is what you entered\n");
    printf("%c %f %d\n",b1.name, b1.price, b1.pages);
    printf("%c %f %d\n",b2.name, b2.price, b2.pages);
    printf("%c %f %d\n",b3.name, b3.price, b3.pages);
}
</code>```

答:
Just enter a space before the placeholder for the character in the scanf statements. Like this. The code should run just fine.

```<code>    scanf(" %c %f %d",&b1.name, &b1.price, &b1.pages);
    scanf(" %c %f %d",&b2.name, &b2.price, &b2.pages);
    scanf(" %c %f %d",&b3.name, &b3.price, &b3.pages);
</code>```

Problem is that when you press enter on the keyboard to move to the next line to provide input to the second scanf statement. "%c" in the second line takes '\n' as the input and this just messes up the order. And remember "%c" or char means name should only consist of 1 character.

Body:
This is my very simple struct data type code that doesn't work.

What I want my program to do is to read input from the user and insert the digit into the struct. However, I don't know how to do it since I get just garbage value.

My code is :

#include<stdio.h>
#include<stdlib.h>

struct book {
    char name;
    float price;
    int pages;
};

void main(){
    struct book b1, b2, b3;
    printf("\nEnter neme , prices & pages of 3 books \n");
    scanf("%c %f %d",&b1.name, &b1.price, &b1.pages);
    scanf("%c %f %d",&b2.name, &b2.price, &b2.pages);
    scanf("%c %f %d",&b3.name, &b3.price, &b3.pages);

    printf("\nAnd this is what you entered\n");
    printf("%c %f %d\n",b1.name, b1.price, b1.pages);
    printf("%c %f %d\n",b2.name, b2.price, b2.pages);
    printf("%c %f %d\n",b3.name, b3.price, b3.pages);
}

Body:
Just enter a space before the placeholder for the character in the scanf statements. Like this. The code should run just fine.

    scanf(" %c %f %d",&b1.name, &b1.price, &b1.pages);
    scanf(" %c %f %d",&b2.name, &b2.price, &b2.pages);
    scanf(" %c %f %d",&b3.name, &b3.price, &b3.pages);

Problem is that when you press enter on the keyboard to move to the next line to provide input to the second scanf statement. "%c" in the second line takes '\n' as the input and this just messes up the order. And remember "%c" or char means name should only consist of 1 character.