In the process of updating a website, we are required to support IE in compatibility mode so as to not break existing functionality.
There is a new side menu, which uses Kendo UI's PanelBar. However if the content overflows and we have to scroll, the kendo controls do not scroll correctly - the items float on top in a fixed position.
IE Compatibility Mode vs IE Edge: (please ignore size difference)
I've created a fiddle here to replicate:
<!DOCTYPE html>
<html class="k-webkit k-webkit40">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Kendo UI - jsFiddle demo by paulcoghill</title>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.js"></script>
<style type="text/css"></style>
<link rel="stylesheet" type="text/css" href="/css/normalize.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<link rel="stylesheet" type="text/css" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.common.min.css">
<link rel="stylesheet" type="text/css" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.blueopal.min.css">
<script type="text/javascript" src="http://cdn.kendostatic.com/2014.3.1316/js/kendo.all.min.js"></script>
<style type="text/css">
h1{
margin-bottom: 30px;
}
#container{
height: 200px;
width: 200px;
padding 5px;
background-color: red;
overflow: auto;
}
</style>
<script type="text/javascript">//<![CDATA[
$(window).load(function(){
$(document).ready(function() {
$("#panelbar").kendoPanelBar({
expandMode: "single"
});
});
});//]]>
</script>
</head>
<body hola-ext-player="1">
<div id="container">
<h1>Header</h1>
<ul id="panelbar" data-role="panelbar" class="k-widget k-reset k-header k-panelbar" tabindex="0" role="menu">
<li class="k-item k-state-default k-first" role="menuitem"><span class="k-link k-header">Menu Item</span></li>
<li class="k-item k-state-default" role="menuitem"><span class="k-link k-header">Menu Item</span></li>
<li class="k-item k-state-default" role="menuitem"><span class="k-link k-header">Menu Item</span></li>
<li class="k-item k-state-default" role="menuitem"><span class="k-link k-header">Menu Item</span></li>
<li class="k-item k-state-default" role="menuitem"><span class="k-link k-header">Menu Item</span></li>
<li class="k-item k-state-default k-last" role="menuitem"><span class="k-link k-header">Menu Item</span></li>
</ul>
<div>
</div>
</div>
</body>
</html>
http://jsfiddle.net/paulcoghill/k4gqq2dk/7/
You can view the result in compatibility mode to test:
http://jsfiddle.net/paulcoghill/k4gqq2dk/7/embedded/result/
Can anyone find a workaround or resolve this?
I've tried messing about with difference overflows and z-indexes, updating kendo, but I can't figure out what's going on.
Paul, try adding "position: relative;" to the container. Found this on another question: IE7 CSS Scrolling Div Bug
Related
my web app has an ng-animate transition applied to it in the style.css:
.ng-enter, .ng-leave {
position: absolute;
top: 8em;
left: -100%;
width: 100%;
transition: left .5s;
}
.ng-enter.ng-enter-active {
left: 0%;
}
.ng-leave {
left: 0%;
}
.ng-leave-active {
transition: left .5s;
left: 100%;
}
Unfortunately, this has resulted in it being applied to my navigation bar as well, which results in it causing a weird glitch where, whenever I log in or out, the links slide across the view for a half a second before appearing in the proper place:
index.html
<!DOCTYPE html>
<html lang="en" ng-app="mainApp" ng-cloak>
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=UnifrakturMaguntia" />
<link href="https://fonts.googleapis.com/css?family=Prociono" rel="stylesheet">
<link href="style.css" rel="stylesheet">
<script src="http://tappedout.net/tappedout.js"></script>
<!-- Latest compiled and minified CSS -->
</head>
<body id="background" ng-controller="mainController">
<div class="ourNav no-animate">
<div class="logo">Deckster</div>
<div>
<i class="fa fa-bars fa-3x" aria-hidden="true"></i>
</div>
<ul id="links">
<li ng-if="loginStatus !== true">
<div>
<a class="active" ui-sref="home" ui-sref-active="active">Home</a>
</div>
</li>
<li>
<div>
<a class="active" ui-sref="cardSearch" ui-sref-active="active">Card Search</a>
</div>
</li>
<li ng-if="loginStatus == true">
<div>
<a class="active" ui-sref="deckBuilder" ui-sref-active="active">Deck Builder</a>
</div>
</li>
<li ng-if="loginStatus == true">
<div>
<a class="active" ui-sref="deckCollection" ui-sref-active="active">Deck Collection</a>
</div>
</li>
<li ng-if="loginStatus == true">
<div class="logout">
<a class="active" ng-click="logout()" ui-sref-active="active">Log Out</a>
</div>
</li>
</ul>
</div>
<div ui-view class="view-container" ></div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin="anonymous"></script>
<script src="./node_modules/angular/angular.js"></script>
<script src="./node_modules/#uirouter/angularjs/release/angular-ui-router.js"></script>
<script src="node_modules/angular-animate/angular-animate.js"></script>
<script src="./dropDownMenu.js"></script>
<script src="./app.js"></script>
<script src="./service.js"></script>
<script src="./controller.js"></script>
<script src="./cardSearchController.js"></script>
<script src="./deckBuilderController.js"></script>
<script src="./deckCollectionController.js"></script>
<script src="./homeController.js"></script>
<script src="./loginSuccessController.js"></script>
<script src="http://tappedout.net/tappedout.js"></script>
</body>
</html>
I've tried to add the class "no-animate" in hopes of having the links not slide around, but it hasn't helped despite being important.
.no-animate {
-webkit-transition: none !important;
transition: none !important;
}
what do I need to do to make my "ourNav" class not be effected by transitions? Note that I'm using bootstrap, so I don't know if that could be causing it.
edit: I don't know if the z-index might make a difference, but the styling has the navigation bar at z-index: 1, so it can drop down as a hamburger menu when viewed on tablet or mobile:
.ourNav {
background-color: black;
display: flex;
flex-direction: row;
justify-content: space-between;
margin-bottom: 5em;
align-items: center;
z-index: 1;
}
You can use :not(.no-animate) in your css to exclude those element wich have no-animate class. Like this:
.ng-leave:not(.no-animate) {
transition: left .5s
}
In this case the .ng-leave.no-animate wont have the transition effect
Edit:
window.onclick = () => {
const elements = document.getElementsByClassName("element");
for (let i = 0; i < elements.length; i++) {
const element = elements[i];
element.classList.add("black");
}
}
.element {
background-color: blue;
}
.element:not(.not-me) {
transition: background-color 2s;
}
.element.black {
background-color: black;
}
<div class="element" > me </div>
<div class="element not-me" > not-me </div>
<div class="element" > me </div>
Look what happens on click. The elements with the not-me class don't get a transition. There is no need to use !important, just watch for the specifity. Hope it helps
I have a collapsable list that works perfectly fine in Chrome, but when I open up FireFox and view it, it looks all wonky. I opened up the debugger and there were no declaration errors, is there something I'm missing?
(Cant post images yet!)
How it looks in Firefox ->
(http://i.imgur.com/SbcTnGU.png)
How it looks in Chrome ->
(http://i.imgur.com/ofYp755.png)
.collapsibleList li>input+* {
display: none
}
.collapsibleList li>input:checked+* {
display: block
}
.collapsibleList li>input {
display: none
}
.collapsibleList li list-group-item>.badge {
float: right
}
.collapsibleList label {
position: relative;
display: block;
padding: 10px 15px;
margin-bottom: 0px;
background-color: #fff;
border: 1px solid #ddd;
cursor: pointer
}
Using Firefox 49 with the snippets below, the code you pasted above worked flawlessly with some minor HTML parsing tweak.
<html data-ember-extension="1" class="fa-events-icons-ready" lang="en"><head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<link href="https://use.fontawesome.com/b703330c8c.css" media="all" rel="stylesheet"></head>
<body>
<style>
.collapsibleList li>input+* {
display: none
}
.collapsibleList li>input:checked+* {
display: block
}
.collapsibleList li>input {
display: none
}
.collapsibleList li list-group-item>.badge {
float: right
}
.collapsibleList label {
position: relative;
display: block;
padding: 10px 15px;
margin-bottom: 0px;
background-color: #fff;
border: 1px solid #ddd;
cursor: pointer
}
</style>
<h1>Hello, world!</h1>
<ul class="collapsibleList">
<li><label class="list-group-item" for="mylist-node6">Highest Win Ratio<span class="badge">Click Me!</span></label>
<input id="mylist-node6" type="checkbox">
<ul>
<li class="list-group-item">
<img src="avatar”"> #1 Name <span class="badge">61.76% </span>
</li>
<li class="list-group-item">
<img src="avatar"> #2 Name <span class="badge">50.75% </span>
</li>
<li class="list-group-item">
<img src="avatar"> #3 Name <span class="badge"> 44.59%</span>
</li>
</ul>
</li>
<li class="list-group-item ">
<i class="fa fa-gamepad"></i> ClassicHG Leaderboards
</li>
</ul>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://use.fontawesome.com/b703330c8c.js"></script>
</body></html>
I am working on jQuery mobile on intel-xdk and trying to set navbar in footer with custom icons. I have tried so many codes and tried to change the icons. With jquery.mobile-1.4.1 i am unable to find and set custom properties for nav bar icons. Now i tried my code with different versions which are not the latest ones:
1)1.2.1 and 1.8.1 these are working and allowing custom nav bar icons. When i used latest jQuery which is 1.4.1 I find ui-icon attribute in css but I found that it is applying through 1.4.1.js. I am stuck with that and want to use jQuery also for the slider. For this I have to use jQuery1.4.1 but with that I am unable to get custom nav bar icons. Any solution?
My code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--First try with it(its not working)-->
<!-- <link rel="stylesheet" href="jquery.mobile-1.4.1.min.css" />
<script src="js/jquery-1.8.0.min.js"></script>
<script src="js/jquery.mobile-1.4.1.min.js"></script> -->
<!--Second try with it(its working)-->
<!-- <link rel="stylesheet" href="css/jquery.mobile-1.2.0.min.css" />
<script src="js/jquery-1.8.0.min.js"></script>
<script src="js/jquery.mobile-1.2.0.min.js"></script> -->
<!--third try with it(its not working)-->
<!-- <link rel="stylesheet" href="jquery.mobile-1.4.1.min.css" />
<script src="js/jquery.js"></script>
<script src="js/jquery.mobile-1.4.1.min.js"></script> -->
<style>
.ui-icon-taifun {
background-image: url("taifun.png");
}
.nav .ui-btn .ui-btn-inner {
padding-top: 40px !important;
}
.nav .ui-btn .ui-icon-taifun {
width: 45px!important;
height: 35px!important;
margin-left: -24px !important;
box-shadow: none!important;
-moz-box-shadow: none!important;
-webkit-box-shadow: none!important;
-webkit-border-radius: none !important;
border-radius: none !important;
}
#programas .ui-icon {
background-image: url(taifun.png);
background-position: 0 0;
background-repeat: no-repeat;
}
</style>
<title>Test</title>
</head>
<body>
<div data-role="page">
<div data-role="content">
<div data-role="collapsible" data-collapsed-icon="taifun" data-expanded-icon="taifun" data-inset="false">
<h2><img src="favicon.ico"> Pets</h2>
<ul data-role="listview">
<li>Canary</li>
<li>Cat</li>
<li>Dog</li>
</ul>
</div><!-- /collapsible -->
<div data-role="collapsible" data-collapsed-icon="taifun" data-expanded-icon="taifun" data-inset="false">
<h2><img src="favicon.ico"> Farm animals</h2>
<ul data-role="listview">
<li>Chicken</li>
<li>Cow</li>
<li>Duck</li>
</ul>
</div><!-- /collapsible -->
</div>
<div data-role="footer">
<div data-role="navbar" class="nav" data-grid="d">
<ul>
<li>Programas</li>
<li>Noticias</li>
<li>Radio</li>
<li>Eventos</li>
<li>More</li>
</ul>
</div>
</div>
</div>
</body>
</html>
For 1.4.x, custom icon background is assigned to the :after css selector:
.ui-icon-taifun:after {
background-image: url("taifun.png");
}
Then to use this icon in your buttons, data-icon should be set to "taifun" or whatever text you use after ui-icon-
<li>Programas</li>
<li>Noticias</li>
<li>Radio</li>
<li>Eventos</li>
<li>More</li>
Here is a DEMO
i have a page containing css menu.
I want to position it where i want. if i do {margin-top: 30pt;} it works but it shift other things or get shifted itself. is there anyway to position it ignoring other elements.
Ignore my bad english.
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' type='text/css' href='styles.css' />
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10./jquery.min.js'> </script>
</head>
<body>
<h1>HELLPO!</h1>
<div id="cssmenu" style = "position: relative; margin-top: 100pt; overflow: hidden;">
<ul>
<li class='active'><a href='index.html'><span>Home</span></a></li>
<li><a href='#'><span>Products</span></a></li>
<li><a href='#'><span>About</span></a></li>
<li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
</div>
</body>
</html>
Yes , by using position: absolute. Position absolute does not effect the other elements, and does not care about where they are located.
Adjust the px according to what works best.
<div id="cssmenu" style = "position: absolute; top: 100px; left: 100px; overflow: hidden;">
I've inserted an image below showing were I currently stand (css version) and where I want to be (tabled based version).
I originally created this layout with tables and I would like to move to a css based version. I have a long way to go.
I'm using Blueprint CSS.
Current issues:
There is a gap between the tabs that I'd like to get rid of. How do I get rid of this gap?
I would like to put more padding inside each tab. How do I do this without pushing the tabs onto the next line?
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Heatmap using BluePrint</title>
<!-- Framework CSS -->
<link rel="stylesheet" href="/heatmap/styles/blueprint/screen.css" type="text/css"
media="screen, projection">
<link rel="stylesheet" href="/heatmap/styles/blueprint/print.css" type="text/css"
media="print">
<!--[if IE]><link rel="stylesheet" href="/heatmap/styles/blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->
<style type="text/css">
body{font-size:70%;font-family:Verdana, "Helvetica Neue", Arial, Helvetica, sans-serif;padding:5px;}
table.heatmap td {border: 1px solid black;}
table.heatmap{border-collapse:collapse;}
a {color:black;text-decoration: none;}
a:hover {text-decoration: underline;}
.list-as-tabs
{
margin-left:0px;
}
.list-as-tabs, .list-as-tabs li
{
display: inline;
}
.hover-links
{
background-color:#fffdbf;
}
.hover-links li a:hover
{
background-color:yellow;
}
table.heatmap tr td {text-align:center;}
</style>
</head>
<body>
<div class="container">
<div class="span-20">
<div class="prepend-5 span-10">
<h3>
Issuer Heatmap</h3>
</div>
<div class="span-5 last">
<ul class="list-as-tabs">
<li>Legend</li>
<li><img src="/heatmap/images/lightbulb.gif" alt="Send Feedback about Heatmap." /></li>
<li><input type="image" src="/heatmap/images/excel-mini.gif" alt="Export Heatmap to Excel." /></li>
<li><img src="/heatmap/images/printer.gif" alt="Print this page." /></li>
</ul>
</div>
<div class="prepend-5 span-15 last">
<ul class="list-as-tabs hover-links">
<li>View Draft Heatmap</li>
<li>Manage Security</li>
<li>Edit Heatmap and Platforms</li>
<li>View Revision History</li>
</ul>
</div>
</div>
</div>
</body>
</html>
There's no gap between tabs in the screenshot you posted.
As for adding padding to the tabs, you can do this:
.list-as-tabs li a {
padding: 3px 5px;
}
That gives the link top and bottom padding of 3px and left and right padding of 5px. This is nice because it gives you a bigger click target.
You state that you don't want to wrap but from what I can tell on the screenshot, there simply isn't enough room. You'll either have to make the font smaller or use shorter phrases for the tabs. Maybe this?
<ul class="list-as-tabs hover-links">
<li>Draft Heatmap</li>
<li>Security</li>
<li>Edit Heatmap/Platforms</li>
<li>Revision History</li>
</ul>