csskendo-uikendo-tabstrip

Layout not fitting correctly in Kendo UI TabStrip

I have a layout that I made and wanted to put it into a Kendo UI TabStrip, but when I do, the layout goes all out of sorts. I tried removing the 16px padding from the tabstrip content but to no avail...

Here is what the layout looks like before I try adding it to the tabstrip Original Layout Can someone tell my why my layout doesn't want to work inside the tabstrip?

Thanks

$(document).ready(() => {
  $("#SFOETabStrip").kendoTabStrip({
    animation: {
      open: {
        effects: "fadeIn"
      }
    }
  });
});
#SFOEWindow {
  width: 1400px;
  height: 600px;
  border: 0.5px solid black;
  /*background-color: black;*/
}

#SFOEWindow .k-grid {
  border-radius: 0px
}

#SFOEWrapper {
  width: 100%;
  height: calc(100% - 63px);
  /*background-color: yellow;*/
  
}

#TitleBar {
  width: 100%;
  height: 26px;
  /*background-color: cadetblue;*/
  background-color: #036;
  background-image: none, linear-gradient(rgba(255, 255, 255, .6) 0, rgba(255, 255, 255, 0) 100%);
  color: white;
  margin-bottom: 4px;
}

#Left-Panel {
  float: left;
  width: 20%;
  height: 100%;
  /*background-color: yellow;*/
  padding: 2.5px 2.5px 0px 2.5px;
}

#LeftGrid {
  width: 100%;
  height: 100%;
  border: 1px solid gray;
  background-color: white;
}

#Right-Panel {
  float: right;
  width: 80%;
  height: 100%;
  /*background-color: deeppink;*/
  padding: 2.5px 2.5px 0px 0px;
}

#CustGridWrapper {
  width: 80%;
  height: 100%;
  float: left;
  /*padding: 5px 5px 5px 5px;*/
  padding: 2.5px;
}

#CustInfoWrapper {
  width: 20%;
  /*background-color: deeppink;*/
  height: 100%;
  float: right;
  padding: 2.5px;
}

#Cust-Info {
  width: 100%;
  height: 100%;
  border: 0.5px solid gray;
  background-color: white;
}

#CustGrid {
  width: 100%;
  height: 100%;
  border: 1px solid black;
  background-color: white;
}

#Top-Panel {
  width: 100%;
  height: 50%;
  /*background-color: blue;*/
  border: 0.5px solid gray;
}

#Bottom-Panel {
  width: 100%;
  height: 50%;
  /*background-color: green;*/
  padding: 2.5px;
  border: 0.5px solid gray;
  border-top: 0px;
}

#Bottom-Grid {
  width: 100%;
  background-color: white;
  height: 100%;
}

#LeftGridWrapper {
  width: 100%;
  height: 100%;
  border: 0.5px solid gray;
  padding: 2.5px;
}

#TabsWrapper {
  width: 100%;
  height: 30px;
  /*padding: 5px 5px 5px 5px;*/
}

#TabButtons {
  width: 100%;
  height: 100%;
  /*background-color: purple;*/
  padding-left: 2.5px;
  display: inline-flex;
}

#TabButtons div {
  /*width: 60px;*/
  height: 31px;
  background-color: white;
  color: black;
  margin-right: 3px;
  padding: 5px;
  border: 1px solid gray;
  /*border-bottom: 0px;*/
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2022.3.913/js/kendo.all.min.js"></script>
<link href="https://kendo.cdn.telerik.com/themes/7.2.1/default/default-main.css" rel="stylesheet" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.3.913/styles/kendo.default-main.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.3.913/styles/kendo.common-bootstrap.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.3.913/styles/kendo.bootstrap.min.css" />


<div id="SFOEWindow">
  <div id="TitleBar"></div>
  <div id="SFOETabStrip" style="height:100%">
    <ul>
      <li class="k-active">ABC</li>
      <li>123</li>
    </ul>
    <div id="abc">
      <div id="SFOEWrapper">
        <div id="Left-Panel">
          <div id="LeftGridWrapper">
            <div id="LeftGrid"></div>
          </div>
        </div>
        <div id="Right-Panel">
          <div id="Top-Panel">
            <div id="CustGridWrapper">
              <div id="CustGrid"></div>
            </div>
            <div id="CustInfoWrapper">
              <div id="Cust-Info">

              </div>
            </div>
          </div>
          <div id="Bottom-Panel">
            <div id="Bottom-Grid">

            </div>
          </div>
        </div>
      </div>
    </div>
    <div id="123"></div>
  </div>

Solution

  • The TabStrip sets the box-sizing of the content to border-box. So you can set the box-sizing property to the containers to set how the total width and height of the elements are calculated. Here is an updated example.

    Using the flex layout to position the contents in the tab also works, for example.