I am attempting to use CSS3PIE to round the edges of a select element. I am using the below code and running in IE7. The behaviour I get looks as though there are two rounded nodules in the bottom right of the select element. I would assume somehow the element is attempting to round the edges, but the proportions and/or position are not being passed for the created outer-element correctly. Anyone else have this issue or know how to fix it?
CSS
select
{
behavior: url(http:\\pc-653336\APTEIT\HTC\PIE.htc);
}
select
{
border:1px solid black;
border-radius: 10px;
}
HTML
<html>
<head>
<link rel="Stylesheet" href="test.css" />
</head>
<body>
<div id="divy"><select></select></div>
</body>
</html>
Related
How to override class of ionic directive? I tried the code below:
<div class="card">
<ion-item class="item item-avatar item-text-wrap teamA" ng-repeat="chat in chats">
<p>{{chat.message}}</p>
</ion-item>
</div>
.teamA{
border: 1px solid red !important;
background-color: #EBA32F !important;
color: black;
}
The border did change to red but its background-color didn't change.
The background didn't need anything special, that color is actually orange(ish). If you had problems with the font color, just add a class to your element and change it's color, don't forget to add the !important rule.
I tested it and it's working, check the next snippet:
angular.module('myApp', ['ionic'])
.controller('MyCtrl', function ($scope){
$scope.chats = {};
var chats = [],
chat;
for (var i = 0; i< 10; i++) {
chat = {
id: i,
message: "Chat num: " + i
};
chats.push(chat);
}
$scope.chats = chats;
console.log(chats);
});
.teamA{
border: 1px solid red !important;
background-color: #EBA32F !important;
}
.your-color {
color: white !important;
}
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Content color</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>
<body ng-controller="MyCtrl">
<ion-content scrollable="true">
<div class="card">
<ion-item class="item item-avatar item-text-wrap teamA" ng-repeat="chat in chats">
<p class="your-color">{{chat.message}}</p>
</ion-item>
</div>
</ion-content>
</body>
</html>
Inspecting elements with chrome dev tools is actually a good way to learn what CSS's are beign applied to your elements. And then override those CSS.
To inspect an element Right click --> Inspect element.
To open chrome dev tools: Select the Chrome Menu at the top-right corner, then select Tools -> Developer Tools.
More info about Chrome DevTools
Cheers.
I remember having a similar problem working in Ionic...but it had to do with where my styles were defined in the project. The new class (in this case, "teamA") was conflicting with existing styles, and they were being applied at different times at emulation-time.
How I solved it:
I assume you can still access chrome debugger when running this in emulator...
We were defining different styles in different places due to a short controller folder structure...not using the standard ionic generator's location for .css.
Try selecting your items in jQuery and examining them, manually adjusting the background-color property in chrome when you can and see what effects that has.
That might give you clues as to how to fix it.
This might also help:
http://forum.ionicframework.com/t/ion-list-background-color/2774/7
Is there an easy way to disable the styling provided by the Intel XDK? Specifically from af.ui.css.
The styling causes problems, especially when you are using external libraries. It would be nice to do something like jQuery Mobile's data-role='none'
e.g. I am trying to use a CSS style for star rating where the user can rate by touching or clicking on stars. This works fine on a normal HTML JavaScript page but somehow the af.ui.css gives one of the elements a width of 60%. These are the lines from af.ui.css which do that:
#afui input[type="radio"] + label,
#afui input[type="checkbox"] + label {
display: inline-block;
width: 60%;
float: right;
position: relative;
text-align: left;
padding: 10px 0 0 0;
}
This is the HTML it is acting on:
<label for="Ans_1" class="star rb0l" onclick=""></label>
If I comment the width statement in af.ui.css, it messes up other checkboxes. I tried to force a width in the label by using at style="width:.." but that doesn't work either.
Any suggestions?
Without more code structure it is hard to know exactly what could be going wrong.
In general if you use style="width:..." it should override afui.ui.css unless the css is being loaded after your inline styles and clobbers them. You can try to force your css style by using CSS '!important'
.star {
width: 20px !important;
}
either in an external CSS file or in style tags in your html file that load after the afui.ui.css file. You could even try style="width: 20px !important;". Some more info on this: http://www.smashingmagazine.com/2010/11/02/the-important-css-declaration-how-and-when-to-use-it/
In general I would use images or css for a star rating not checkbox or radio buttons. Here is a good example: http://css-tricks.com/star-ratings/
Let me know if that works for you or if you could include a screenshot or more html structure I can try to help.
You should be able to create your own id and then as long as you apply your styles after afui.ui.css is loaded it should keep the app framework styles but only override your star checkbox.
html file:
<head>
<link rel="stylesheet" type="text/css" href="app_framework/2.1/css/af.ui.min.css">
</head>
<body>
<label id="idname"></label>
</body>
<style>
#afui input[type="checkbox"] + label + #idname {
width: 20px;
}
</style>
OR...
html file:
<head>
<link rel="stylesheet" type="text/css" href="app_framework/2.1/css/af.ui.min.css">
<link rel="stylesheet" type="text/css" href="star.css">
</head>
<body>
<label id="idname"></label>
</body>
star css file:
#afui input[type="checkbox"] + label + #idname {
width: 20px;
}
I have a jsfiddle here - http://jsfiddle.net/eYV4n/
Really simple navigation and a hidden div block beneath it.
When you click the second link in the nav the div block slides down with slideToggle.
When the div block slides down I would like the button clicked to be selected.
I can do this when it's clicked by changing the background color.
Is it possible to deselect the link (change it's color back) when the div block slides again.
jquery.hover() handler hover-in and hover-out. Is it possible to do the same thing with slideToggle.
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="robots" content="">
<title>Title of the document</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<style type="text/css">
*{
margin:0;
padding:0;
}
body{
background:#eee;
}
#wrap{
background:#fff;
max-width:800px;
margin:0 auto;
height:1000px;
}
ul{
list-style:none;
overflow:auto;
}
ul li{
display:inline;
}
ul li a {
float:left;
display:block;
color:#222;
padding:10px;
margin:0 5px 0 0;
}
#block{
width:100%;
margin:0 auto;
height:200px;
background:red;
display:none;
}
</style>
</head>
<body>
<div id="wrap">
<nav>
<ul>
<li>One</li>
<li>Two ↓</li>
<li>Three</li>
<li>Four</li>
</ul>
</nav>
<div id="block">
</div>
</div><!-- #wrap -->
<script>
$('#btn').click(function(e){
e.preventDefault();
$('#block').slideToggle('2000')
$('#btn').css('background','red');
})
</script>
</body>
</html>
A better solution is to toggle a class that in turn changes the background. You should make it a best practice to never style elements with Javascript, you should use CSS for that. Adding/removing classes is fine though. This will make the code much easier to maintain in the long run, and it's also more semantic since you're using classes and not inline styling.
Try this:
$('#btn').click(function(e){
e.preventDefault();
$('#block').slideToggle('2000')
$('#btn').toggleClass('active');
})
Then in your CSS.
.active { background: red; }
Edit: Jsfiddle here.
I have a leaflet map in a div that I loa like this:
<script src="http://cdn.leafletjs.com/leaflet-0.4/leaflet.js"></script>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4/leaflet.css" />
<!--[if lte IE 8]>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4/leaflet.ie.css" />
<![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
I then have a div such as this:
Some js that loads the map:
map = L.map($attrs.id,
center: [40.094882122321145, -3.8232421874999996]
zoom: 5
)
L.tileLayer("http://{s}.tile.cloudmade.com/57cbb6ca8cac418dbb1a402586df4528/997/256/{z}/{x}/{y}.png",
maxZoom: 18
).addTo map
Then on page load I have some JS that monitors window height and resizes:
$("#map").height($(window).height())
$(window).resize(_.throttle(->
$("#map").height($(window).height())
, 100
))
However when the map loads it loads with half the tiles in grey. When i resize the map loads fine but the initial load is 1/2 grey
If you don't have a reason to use JS for map sizing its probably better to use CSS:
html, body, #map {
width: 100%;
height: 100%;
}
However you can try using map.invalidateSize() after inserting the map into the DOM (or map resized by $("#map").height($(window).height())).
invalidateSize() is called by default when you resize the window, see the following links:
https://github.com/Leaflet/Leaflet/blob/master/src/map/Map.js#L609 and https://github.com/Leaflet/Leaflet/blob/master/src/map/Map.js#L616.
After a long search on this issue, in my case I had a global css style which was :
<pre>
img {
position: relative;
display: block;
max-width: 100%;
}
</pre>
In my case problem were the "position : relative", so I add a line
<pre>
//Fix personnal bug leaflet
.leaflet-pane{
img{
position: absolute;
}
}
</pre>
My footer is perfectly positioned on every computer screen.
But, when I test it on an Iphone, the footer get stuck in the middle of the page and is not repeating itself in a horizontal way.
What can I do, so the footer also stays on the bottom of an Iphone screen and other smartphones?
This is the CSS of my footer:
#footer {
position:absolute;
bottom:0;
width:100%;
height:270px;
background-image:url(images/footer.png);
}
Change the position to fixed, hope that can solve this question.
#footer {
position:fixed;
bottom:0;
width:100%;
height:270px;
background-image:url(images/footer.png);
}
First, I hope it's for a static page, as dynamic pages could give you even more troubles.
Anyway, it's not a good idea to put the footer at 0 to the bottom, if I had bigger fonts or small resolution (like using a notebook or a smartphone), the content will go below the footer, which is what probably happens to your page. There is a lot of code around the web answering that specific question. And it's called 'sticky footer'.
This is a copy/paste of that page. I hope no one get's offended, there's no need to rewrite it all if it's already out there. If you are not satisfied, just google 'Sticky footer':
How to use the CSS Sticky Footer on your website
Add the following lines of CSS to your stylesheet. The negative value for the margin in .wrapper is the same number as the height of .footer and .push. The negative margin should always equal to the full height of the footer (including any padding or borders you may add).
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
.footer, .push {
height: 4em;
}
Follow this HTML structure. No content can be outside of the .wrapper and .footer div tags unless it is absolutely positioned with CSS. There should also be no content inside the .push div as it is a hidden element that "pushes" down the footer so it doesn't overlap anything.
<html>
<head>
<link rel="stylesheet" href="layout.css" ... />
</head>
<body>
<div class="wrapper">
<p>Your website content here.</p>
<div class="push"></div>
</div>
<div class="footer">
<p>Copyright (c) 2008</p>
</div>
</body>
</html>
EDIT: It has exactly the behavior I stated. If you zoom your page (Control + '+'), you'll see how the content goes below the footer.