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

Internet Explorer

1 Answer 120 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Leonel
Top achievements
Rank 1
Leonel asked on 21 Feb 2012, 04:29 PM
Problem internet explorer tab in the title concerns me a width of 100%:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Interfaz</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/i18n/jquery-ui-i18n.min.js" type="text/javascript"></script>
<script src="js/kendo.all.min.js" type="text/javascript"></script>
<link href="Styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="Styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<link href="Styles/Site_Master.css" rel="stylesheet" type="text/css" />
<style>
.close {
background-image:url('images/close1.png');
background-repeat: no-repeat;
width:16px;
height:16px;
float:right;
}
.close:hover  {
background-image:url('images/close2.png');
background-repeat: no-repeat;
cursor:pointer;
width:16px;
height:16px;
float:right;
}
</style>
</head>
<body>
<meta charset="utf-8">


<button class="k-button" id="btnagregar">Agregar</button>
</br>


            <div id="tabstrip">
                <ul>
                    <li class="k-state-active">
DashBoard
                    </li>
                </ul>
            </div>

            <script>
 
String.prototype.trim = function() {
return this.replace(/^\s+|\s+$/g,"");
}
                $(document).ready(function() {
$("#menu").kendoMenu({select:  function (e) {
alert($(e.item).children(".k-link").text().trim());
}});

$("#btnagregar").click(function (){
open_tab ("Opcion 15", "conten3.html", "prioridad.png");
});
                });


function open_tab (Opcion, Url, Icono) {
tabStrip.append({
                                    text: Opcion  + "&nbsp;&nbsp;<div class='close' src='images/close1.png' title='Close Tab'  onclick='tabStrip.remove($(this).closest(\"li\"))'/>",
// imageUrl: "images/" + Icono,
contentUrl: Url,
encoded: false
});
}


                var tabStrip = $("#tabstrip").kendoTabStrip({contentUrls: ['DashBoard.html']}).css({ marginRight: "0px;", width:"100%" }).data("kendoTabStrip");


            </script>
        
</body>
</html>

1 Answer, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 21 Feb 2012, 04:52 PM
Hi Leonel,

I do not reproduce the described problem with your test page. Probably there are some other styles that influence the TabStrip. For example, inspect the tab and make sure its borders are not removed.

Regards,
Dimo
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
TabStrip
Asked by
Leonel
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Share this question
or