Skip to main content
Announcements
Qlik Introduces a New Era of Visualization! READ ALL ABOUT IT
cancel
Showing results for 
Search instead for 
Did you mean: 
singhcv123
Contributor
Contributor

Qliksense Widget gotcha

<!DOCTYPE html>
<html>
<head>
<style>
* {
  box-sizingborder-box;
}

.flex-container {
  displayflex;
  flex-directionrow;
  font-size30px;
  text-aligncenter;
}

.flex-item-left {
  background-colorWhite;
  padding10px;
  flex10%;
  border1px solid black;
  text-aligncenter;
  font-size10px;
  font-family'Times New Roman'Timesserif;
}

.flex-item-center {
  background-colorWhite;
  padding10px;
  flex60%;
  border1px solid black;
  border-left-stylenone;
  text-alignleft;
  font-size10px;
  
}

.flex-item-right {
  background-colorWhite;
  padding10px;
  flex30%;
  border1px solid black;
  border-left-stylenone;
  text-alignleft;
}

.flex-item-center-content {
  background-colorWhite;
  padding10px;
  flex50%;
  bordernone;
  border-left-stylenone;
  text-alignleft;
  font-size10px;
  
}

.flex-item-right-content {
  background-colorWhite;
  padding10px;
  flex30%;
  bordernone;
  border-left-stylenone;
  text-alignleft;
  font-size10px;
}

/* Responsive layout - makes a one column-layout instead of two-column layout */
@media (max-width800px) {
  .flex-container {
    flex-directionrow;
  }
}
</style>
</head>
<body>

<div class="flex-container">
  <div class="flex-item-left">
      <b>Thresold:</b><br>1233

  </div>
  <div class="flex-item-center">
    <div class="flex-item-center-content">
        <b>Info1:</b>
    </div>
    <div class="flex-item-center-content">
        <b>Info2:</b>
    </div>
    <div class="flex-item-center-content">
        <b>Info3:</b>
    </div>
    <div class="flex-item-center-content">
        <b>Info4:</b>
    </div>
    <div class="flex-item-center-content">
        <b>Info5:</b>
    </div>
    <div class="flex-item-center-content">
        <b>Info6:</b>
    </div>
    <div class="flex-item-center-content">
        <b>Info7:</b>
    </div>
    <div class="flex-item-center-content">
        <b>Info8:</b>
    </div>
    <div class="flex-item-center-content">
        <b>Info9:</b>
    </div>

  </div>
  <div class="flex-item-right">
    <div class="flex-item-right-content">
        <b>Info1:</b>
    </div> 
    <div class="flex-item-right-content">
        <b>Info1:</b>
    </div>  
    <div class="flex-item-right-content">
        <b>Info1:</b>
    </div>  
    <div class="flex-item-right-content">
        <b>Info1:</b>
    </div>  
    <div class="flex-item-right-content">
        <b>Info1:</b>
    </div>  
    <div class="flex-item-right-content">
        <b>Info1:</b>
    </div>  
    <div class="flex-item-right-content">
        <b>Info1:</b>
    </div>   
    <div class="flex-item-right-content">
        <b>Info1:</b>
    </div>  
    <div class="flex-item-right-content">
        <b>Info1:</b>
    </div>  
  </div>
</div>

</body>
</html>
0 Replies