This is a migrated thread and some comments may be shown as answers.

Table in Tabstrip going off screen in IE using mvc

7 Answers 174 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
bally
Top achievements
Rank 1
bally asked on 13 Sep 2013, 09:39 AM
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>);

7 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 13 Sep 2013, 10:00 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
ajith
Top achievements
Rank 1
answered on 14 May 2015, 07:05 AM

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

0
Dimo
Telerik team
answered on 14 May 2015, 09:08 AM
Hello Аjith,

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

Regards,
Dimo
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
ajith
Top achievements
Rank 1
answered on 14 May 2015, 11:28 AM

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?

 

0
Dimo
Telerik team
answered on 18 May 2015, 06:39 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
ajith
Top achievements
Rank 1
answered on 18 May 2015, 06:56 AM

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

0
Dimo
Telerik team
answered on 20 May 2015, 04:48 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
TabStrip
Asked by
bally
Top achievements
Rank 1
Answers by
Dimo
Telerik team
ajith
Top achievements
Rank 1
Share this question
or