title: covert div to img with kendo ui
body: <p>Im trying to create image from div content, by using kendo.drawing.drawDOM.
  When I run it all elements in my div confusined,
  Here is my html code using bootsrap:</p>
  
  <pre><code>&lt;div id="mytryapp" name="mytryapp" data-ng-init="init()" class="buttonprint content-wrapper "&gt;
      &lt;style&gt;
          * {
              font-family: "Open Sans Hebrew", Alef !important;
          }
      &lt;/style&gt;
      &lt;div class="clearfix"&gt;
          &lt;div ng-show="userNum!=null" class="inputfieldwrapper buttonprint right col-sm-6  col-sm-push-6   horizontalinputfieldwrapper "&gt;
              &lt;label id="userNumLbl" for="disForUserNum" class="font-bold col-lg-4 col-lg-push-7 col-md-10 col-md-push-2 col-xs-push-8" ng-bind="'מספר משלם:'"&gt;&lt;/label&gt;
              &lt;div class="inputContainer col-lg-7 col-lg-pull-4 col-sm-7 col-sm-pull-5 col-xs-pull-0 col-xs-pull-1 col-xs-3"&gt;
                  &lt;label ng-model="userNum" class="col-lg-6 col-lg-push-5 col-md-5 col-md-push-7 col-xs-push-8 ng-binding ng-pristine ng-valid" ng-bind="userNum"&gt;&lt;/label&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="inputfieldwrapper buttonprint right col-sm-6   col-sm-pull-6    horizontalinputfieldwrapper"&gt;
              &lt;label id="userNumTax" class="font-bold col-sm-4 col-sm-push-8 col-xs-push-8" for="disForUserNumTax" ng-bind="'מספר נכס:'" &gt;&lt;/label&gt;
              &lt;div class="inputContainer col-lg-7 col-lg-pull-4 col-sm-7 col-sm-pull-5  col-xs-pull-0 col-xs-pull-1 col-xs-3"&gt;
                  &lt;label ng-model="userNumTax" class="col-lg-6 col-lg-push-7 col-md-5 col-md-push-7 col-xs-push-8" ng-bind="userNumTax"&gt;&lt;/label&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="clearfix"&gt;
          &lt;div class="inputfieldwrapper buttonprint right col-sm-6  col-sm-push-6   horizontalinputfieldwrapper "&gt;
              &lt;label id="userEmail" for="disForUserEmail" class="font-bold col-lg-4 col-lg-push-7 col-md-10 col-md-push-2 col-xs-push-8" ng-bind="'דואר אלקטרוני:'"&gt;&lt;/label&gt;
              &lt;div class="inputContainer col-lg-7 col-lg-pull-4 col-sm-7 col-sm-pull-5 col-xs-pull-0 col-xs-pull-1 col-xs-3"&gt;
                  &lt;label ng-model="userEmail" class="col-lg-6 col-lg-push-5 col-md-5 col-md-push-7 col-xs-push-8" ng-bind="userEmail"&gt;&lt;/label&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div  class="inputfieldwrapper buttonprint right col-sm-6   col-sm-pull-6    horizontalinputfieldwrapper"&gt;
              &lt;label id="cellUserlbl" for="cellUsertxt" class="font-bold col-sm-4 col-sm-push-8 col-xs-push-8" ng-bind="'טלפון נייד:'"&gt;&lt;/label&gt;
              &lt;div class="inputContainer col-lg-7 col-lg-pull-4 col-sm-7 col-sm-pull-5  col-xs-pull-0 col-xs-pull-1 col-xs-3" &gt;
                  &lt;label class="col-lg-6 col-lg-push-7 col-md-5 col-md-push-7 col-xs-push-8 " ng-model="tel" ng-bind="lDetailsUser[2].data" &gt;&lt;/label&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is the display in browser:
  <a href="https://i.stack.imgur.com/FvXu0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FvXu0.png" alt="enter image description here"></a></p>
  
  <p>This is the image:
  <a href="https://i.stack.imgur.com/fuJfS.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fuJfS.png" alt="enter image description here"></a></p>
  
  <p>Someone have any idea how can I resolve this issue?
  Maybe the kendo doesn't support bootstrap calsses?</p>
  
  <p>Thank you a lot!!!</p>