Table in Tabstrip going off screen in IE using mvc

8 posts, 0 answers
  1. bally
    bally avatar
    4 posts
    Member since:
    Sep 2013

    Posted 13 Sep 2013 Link to this post

    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>);
  2. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 13 Sep 2013 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. ajith
    ajith avatar
    21 posts
    Member since:
    Apr 2015

    Posted 14 May 2015 in reply to Dimo Link to this post

    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

  5. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 14 May 2015 Link to this post

    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!
     
  6. ajith
    ajith avatar
    21 posts
    Member since:
    Apr 2015

    Posted 14 May 2015 in reply to Dimo Link to this post

    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?

     

  7. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 18 May 2015 Link to this post

    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!
  8. ajith
    ajith avatar
    21 posts
    Member since:
    Apr 2015

    Posted 18 May 2015 in reply to Dimo Link to this post

    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

  9. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 19 May 2015 Link to this post

    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!
Back to Top
Kendo UI is VS 2017 Ready