Table in Tabstrip going off screen in IE using mvc

[bally]

Hi

I have added a table into the tabstrip.  the table aligns nicely in Forefox and Chrome, however in Internet Explorer the table width goes out of the tabstrip boundary and off the screen.

Is there a way to get IE to realign the table.  This happens across all versions of IE. I have attached the HTMl part of the code below

      tabstrip.Add().Text("Dispensary")
                  .Content(@<text>
            <table>
                <tr>
                <th></th>
                 <th>S</th>
                     <th>S</th>
                    <th>A</th>
                    <th>Prism</th>
                     <th>Add</th>
                      <th>Lens</th>
                    <th>OC</th>
                     <th>Height Above Lower Tangent</th>
                    </tr>
                <tr>
                    <th>R</th>
                <td>
                  <div class="editor-field">
                @Html.EditorFor(model => model.DispenseSRight)
                @Html.ValidationMessageFor(model => model.DispenseSRight)
            </div>
                    </td>
                                    <td>
                  <div class="editor-field">
                @Html.EditorFor(model => model.DispenseCRight)
                @Html.ValidationMessageFor(model => model.DispenseCRight)
            </div>
                                        </td>
                                                                            <td>
                  <div class="editor-field">
                @Html.EditorFor(model => model.DispenseARight)
                @Html.ValidationMessageFor(model => model.DispenseARight)
            </div>
                    </td>
                                                                                           <td>
                  <div class="editor-field">
                @Html.EditorFor(model => model.DispensePrismRight)
                @Html.ValidationMessageFor(model => model.DispensePrismRight)
            </div>
                    </td>
                                                                                                               <td>
                  <div class="editor-field">
                @Html.EditorFor(model => model.DispenseAddRight)
                @Html.ValidationMessageFor(model => model.DispenseAddRight)
            </div>
                    </td>
                               <td>                                                                                         

           
                  <div class="editor-field">
                @Html.EditorFor(model => model.DispenseLensRight)
                @Html.ValidationMessageFor(model => model.DispenseLensRight)
            </div>
                    </td>
                                                                    <td>                                                    

                                                <td>
                  <div class="editor-field"> 
                @Html.EditorFor(model => model.DispenseOCRight)
                @Html.ValidationMessageFor(model => model.DispenseOCRight)
            </div>
                    </td>
                                                   <td>                                                                     

                               <td>
                  <div class="editor-field">
                @Html.EditorFor(model => model.DispenseHeightAboveRight)
                @Html.ValidationMessageFor(model => model.DispenseHeightAboveRight)
            </div>
                    </td>
                    </tr>
                <tr>
                    <th>L</th>
                                                                       <td>                                                 

                                                   <td>
                  <div class="editor-field">
                @Html.EditorFor(model => model.DispenseSLeft)
                @Html.ValidationMessageFor(model => model.DispenseSLeft)
            </div>
                    </td>
                                                                                           <td>                             

                                                                       <td>
                  <div class="editor-field">
                @Html.EditorFor(model => model.DispenseCLeft)
                @Html.ValidationMessageFor(model => model.DispenseCLeft)
            </div>
                    </td>
                                                                                                               <td>         

                                                                                           <td>
                  <div class="editor-field">
                @Html.EditorFor(model => model.DispenseALeft)
                @Html.ValidationMessageFor(model => model.DispenseALeft)
            </div>
                    </td>
                                                                                                                            

       <td>                                                                                                    <td>
                  <div class="editor-field">
                @Html.EditorFor(model => model.DispensePrismLeft)
                @Html.ValidationMessageFor(model => model.DispensePrismLeft)
            </div>
                    </td>
                           <td>                                                                                             

       <td>
                  <div class="editor-field">
                @Html.EditorFor(model => model.DispenseAddLeft)
                @Html.ValidationMessageFor(model => model.DispenseAddLeft)
            </div>
                    </td>
                                               <td>                                                                         

                           <td>
                  <div class="editor-field">
                @Html.EditorFor(model => model.DispenseLensLeft)
                @Html.ValidationMessageFor(model => model.DispenseLensLeft)
            </div>
                    </td>
                                                                   <td>                                                     

                                               <td>
                  <div class="editor-field">
                @Html.EditorFor(model => model.DispenseOCLeft)
                @Html.ValidationMessageFor(model => model.DispenseOCLeft)
            </div>
                    </td>
                                                                                       <td>                                 

                                                                   <td>
                  <div class="editor-field">
                @Html.EditorFor(model => model.DispenseHeightAboveLeft)
                @Html.ValidationMessageFor(model => model.DispenseHeightAboveLeft)
            </div>
                    </td>
                </tr>
                  </table>
            </text>);

[Dimo]

Hi Bally,

Normally, if the table (or any other content) cannot fit inside the TabStrip container, it will overlow in all browsers, not just IE. 

You can enable TabStrip container scrolling via

tabstrip.Add().Text("Dispensary")
    .ContentHtmlAttributes(new { style = "overflow: auto;" })
    .Content(...)

or via

.k-tabstrip > .k-content
{
    overflow: auto;
}

Vertical scrolling always requires explicit height style.

Regards,
Dimo
Telerik

[ajith]

Hi Dimo,

     Thank you, its work for me!. I have one doubt is it possible to increase the width of tab strip. I tried with style, and  width is increased. but only the container width was increased and outer body still on its default width.Please Hep me

[Dimo]

Hello Аjith,

Increase the width of the TabStrip and not the width of the content containers.

Regards,
Dimo
Telerik

 

 

[ajith]

Hi dimo,

my code:

.k-reset .k-tabstrip-items {
         width:100%;
        top: inherit;
        bottom: 0;
    }
  .k-tabstrip .k-content {
       
       width:100%;
        top: inherit;
        bottom: 0;
    }

   Can u post correct Code here?

 

[Dimo]

Hi Ajith,

Setting width:100% for block elements is unnecessary, as they expand horizontally by default.

In order to set the TabStrip width, you have two options:

- use HtmlAttributes() in the TabStrip declaration

Html.Kendo().TabStrip().HtmlAttributes(new { style = "width: 3000px" })

- use an external width style for the TabStrip ID (Name)

#YourTabStripID
{
   width: 3000px;
}

- use an external width style for the TabStrip CSS class, which will influence all TabStrips on the page.

.k-tabstrip
{
   width: 3000px;
}

Regards,
Dimo
Telerik

 

[ajith]

Hi Dimo,

  Thank you so much. 

        I loaded  partial view in tab strip successfully. How can i include button to submit details.(call to controller)? . help me please

[Dimo]

Hello Ajith,

I am not sure how is the question related to Kendo UI. How would you implement the button and the call to the controller if the TabStrip was not present? How does the TabStrip prevent you from using the same approach? Please clarify and let me know if I am missing something.

Regards,
Dimo
Telerik