print preview not showing correct format

Question

i have a form that is formatted into 2 columns. i impelemented printing on my app using this plugin: https://github.com/katzer/cordova-plugin-printer and the print preview is showing. however it does not follow the 2-column format of my form. how do i print 2 columns?

here is my form's html code:

<form id="myFormMain">
  <div class="row">
      <div class="col-xs-6">
        <input type="text" style="background-color:#d3d3d3" readonly ng-model="mmid" class="form-control">
      </div>
      <div class="col-xs-6">
        <input type="text" style="background-color:#d3d3d3" readonly  ng-model="cardNumber" class="form-control">
      </div>
  </div>

  <div class="row">
    <div class="col-xs-6">
        <input type="text" style="background-color:#d3d3d3"  readonly  ng-model="fname" class="form-control" >
    </div>
    <div class="col-xs-6">
        <input type="text" style="background-color:#d3d3d3"   readonly ng-model="gender" class="form-control">
    </div>
  </div>

  <div class="row">
    <div class="col-xs-6">
         <input type="text" style="background-color:#d3d3d3"  readonly  ng-model="mname" class="form-control">
    </div>
    <div class="col-xs-6">
        <input type="text" style="background-color:#d3d3d3"  readonly ng-model="birthplace" class="form-control">
    </div>
  </div>

   <div class="row">
    <div class="col-xs-6">
          <input type="text" style="background-color:#d3d3d3" readonly   ng-model="lname" class="form-control">
    </div>
    <div class="col-xs-6">
        <input type="text" style="background-color:#d3d3d3" readonly  ng-model="citizenship" class="form-control">
    </div>
  </div>

  <div class="row">
    <div class="col-xs-6">
          <input type="text" style="background-color:#d3d3d3" readonly  ng-model="bday" class="form-control" >
    </div>
    <div class="col-xs-6">
        <input type="text" style="background-color:#d3d3d3" readonly  ng-model="sssTinID" class="form-control">
    </div>
  </div>

  <div class="row">
    <div class="col-xs-6">
        <input  type="email" style="background-color:#d3d3d3" readonly  ng-model="email" class="form-control">
    </div>
    <div class="col-xs-6">
        <input type="text" style="background-color:#d3d3d3" readonly ng-model="companyName" class="form-control">
    </div>
  </div>

  <div class="row">
    <div class="col-xs-6">
         <input type="text" style="background-color:#d3d3d3" readonly ng-model="mobile" class="form-control">
    </div>
    <div class="col-xs-6">
        <input type="text" style="background-color:#d3d3d3" readonly  ng-model="companyAddress" class="form-control" >
    </div>
  </div>

  <div class="row">
    <div class="col-xs-6">
          <!--<input type="text" style="background-color:#d3d3d3" readonly ng-model="address" class="form-control">-->
          <textarea readonly ng-model="address" class="form-control" ></textarea>
    </div>
    <div class="col-xs-6">
        <input type="text" style="background-color:#d3d3d3" readonly ng-model="workTitle" class="form-control">
    </div>
  </div>

  <div class="row">
    <div class="col-xs-6">
         <input type="text" style="background-color:#d3d3d3" readonly  ng-model="city" class="form-control" >
    </div>
    <div class="col-xs-6">
         <input type="text" style="background-color:#d3d3d3" readonly ng-model="srcFunds" class="form-control">
    </div>
  </div>

  <div class="row">
    <div class="col-xs-6">
        <input type="text" style="background-color:#d3d3d3" readonly ng-model="zipcode" class="form-control" >
    </div>
    <div class="col-xs-6">
        <input type="text" style="background-color:#d3d3d3" readonly ng-model="otherSrcFunds" class="form-control" >
    </div>
  </div>
  </form>

and this is my print function in controller.js:

$scope.goPrint = function(divName)
{
  var divEl = document.getElementById('myFormMain');
  var allInputs = divEl.querySelectorAll("input,textarea");
  for( var counter = 0; counter < allInputs.length; counter++)
  {
   var input = allInputs.item(counter);
   input.setAttribute("value", input.value);
  }

  var page = document.getElementById('myFormMain').innerHTML;
  cordova.plugins.printer.print('<html><head><link rel="stylesheet" type="text/css" href="style.css" /></head><body><div><img src="img/kYYXJ9o0Qk6yNSgx8ZLb_imgpsh_fullsize.jpg" style="display: block; width: 100%; height: auto; margin-left: auto; margin-right: auto;"></div><div align="center">' + page + '</body></html>', 'review2.html');

}

Answer 1

I am not sure but where is grid library (e.g. ionic, or bootstrap)

  cordova.plugins.printer.print(
 '<html>
    <head>
        <link rel="stylesheet" type="text/css" href="bootstrap.css" /> // or ionic.css or something is missing
        <link rel="stylesheet" type="text/css" href="style.css" />
     </head>
     <body> ... </body>
 </html>', 'review2.html');`