There are no curved borders. IE9 and above works fine.
http://cscsu.org.uk/WiltshireMedicinesManagement/csu.htm is a very stripped down version of what I have
<!DOCTYPE html>
<html lang="en-US">
<head>
<style type="text/css">
.wpdm-metro {
behavior:url(/border-radius.htc);
-moz-border-radius:8px;
-webkit-border-radius:8px;
-khtml-border-radius:8px;
border-radius:8px;
margin-bottom:2px;
margin: 0 5px 7px 0;
height:120px;
width:45%;
background:#66cc33 !important;
color:white !important;
}
</style>
</head>
<body>
<div class="wpdm-metro">
</div>
</body>
</html>
Am I doing anything obviously wrong? The file exists (border-radius.htc) and I've even added AddType text/x-component .htc to .htacccess
For whatever reason, PIE won't work unless you remove !important from the background rule.
Though I haven't seen this mentioned in the documentation it worked for me when faced with an almost identical issue.
.wpdm-metro {
behavior:url(/border-radius.htc);
-moz-border-radius:8px;
-webkit-border-radius:8px;
-khtml-border-radius:8px;
border-radius:8px;
margin: 0 5px 7px 0;
height:120px;
width:45%;
background:#66cc33;
color:white;
}
Related
I want to add footer in react which is tuck to the bottom of the page(not position: fixed ) when content is more I should see footer after scrolling till end and if content is less then it should display at the bottom. How to do it in React.js?
This can be done by making your footer a component and giving it the class as described here
You can use CSS do the trick with the power of flexbox and min-height.
Basically, a .wrapper for your container having minimum height of 100% of the vertical height, ie: 100vh, then the children components or elements (eg. .navbar, .content and .footer) sharing the height, you can make the .content assume the remaining height of the .wrapper while the other components assume the size of themselves, see below snippet for solution.
.wrapper {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.content {
flex: 1 1 0%;
background-color: whitesmoke;
}
/* You can ignore the styling below */
.app {
font-family: sans-serif;
}
.footer, .navbar, .content {
padding: 20px;
text-align: center;
border: 1px solid rgba(0,0,0,0.1);
}
<!DOCTYPE html>
<html 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.0">
<title>Simple Landing Page Flexbox Layout With Navbar Full Height Content And Footer Sticky To The Bottom</title>
</head>
<body>
<div class="app wrapper">
<div class="navbar">
Navbar
</div>
<div class="content">
<h1>Content</h1>
<h2>Takes remaining height and grows if needed!</h2>
</div>
<footer class="footer">
Footer
</footer>
</div>
</body>
</html>
You can read more about flexbox here: W3schools CSS Flexbox
You can also play around with this sandbox I created for ReactJS applying the above styles: Codesandbox
The behaviour you need looks exactly like the sticky position in css.I recommend using pure css here:
footer{
position: sticky;
}
See more here
I want to create a button with a ripple effect on clicked.Is it necessary to achieve it through a directive. How do i handle the javascript required to handle the click and propagate the ripple away from the point it was clicked.
I have done it using javascript and css but it is not the angular way.
<!doctype html>
<head>
<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import"/>
<link href="paper-ripple/paper-ripple.html" rel="import"/>
</head>
<body>
<test-elem></test-elem>
<dom-module id="test-elem">
<template>
<style>
div {
width: 150px;
position: relative;
padding: 15px;
border: 1px solid black;
}
button { color: green; border: 1px solid green; }
</style>
<div>
<paper-ripple></paper-ripple>
<button id="btn">Button</button>
</div>
</template>
<script>
Polymer({ is: 'test-elem',
listeners: {'btn.down': 'onDown'},
onDown: function(e) {
e.stopPropagation();
}
});
</script>
</dom-module>
</body>
I have just uploaded my website onto a hosted server with 1&1. The problem I am having is I cannot seem to find out why the media query rules I have set are now not working / are ignorned.
I have tested on my iphone 5 but my website does not scale as it should. However when I resize my browser (Google Chrome) on my desktop to tablet and mobile sizes it does scale correctly.
Is there any reason why when I resize my browser it works perfectly but when I test it on a mobile device it does not work / scale properly?
Just for extra info I am using wordpress and I include my css files in the right way through the functions.php file.
My website is www.jamieclague.com, please feel free to look at the source code.
Thanks for any help, much apprciated.
header.php
<!DOCTYPE html>
<html>
<head>
<title><?php bloginfo('title'); ?>Jamie Clague - Freelance</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!----- CSS Stylesheet Link ------>
<link href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet" type="text/css" media="all" />
<?php wp_head(); ?>
</head>
<body>
CSS - styles.php (snippet of the code)
#media only screen
and (min-device-width:401px)
and (max-device-width:480px){
.header{
min-height:520px;
}
.banner-matter {
top: 22%;
width:100%;
}
.banner-matter p {
overflow: hidden;
width: 100%;
}
}
#media only screen
and (min-device-width:321px)
and (max-device-width:400px) {
.banner-matter h2 {
font-size: 27px;
}
.banner-matter p {
font-size: 20px;
}
a.more span {
left: 30%;
}
}
#media only screen
and (min-device-width:220px)
and (max-device-width:320px) {
img.scroll {
margin-top: -0.7em;
}
a.more {
background-size: 92%;
width: 180px;
height: 64px;
font-size: 1.15em;
}
.view {
padding: 0.3em 0 0;
}
a.more span {
left: 27%;
top: 27%;
}
}
Update
A couple of suggestions.
If you use web inspector you'll see a number of 404s, including
http://www.jamieclague.com/js/jquery.contentcarousel.js
http://www.jamieclague.com/js/jquery.mousewheel.js
http://www.jamieclague.com/wp-content/themes/portfolio/style.css
and a jQuery error from line 113
$ is not a function. (In '$(document)', '$' is undefined)
As a starting point it would be good to fix these.
Also, if I look in http://www.jamieclague.com/wp-content/themes/portfolio/css/style.css?ver=4.6, I'm not sure if you have a closing curly bracket for the statement that starts at line 1813
#media only screen and (max-width:993px){
...
You need a viewport meta tag in the head of your document, without this the default behaviour for mobile devices will be to scale the page to fit your screen.
Something like the following will get you started.
<head>
...
<meta name="viewport" content="width=device-width, initial-scale=1.0">
...
</head>
Find out more about settings you can use: http://www.w3schools.com/css/css_rwd_viewport.asp
Good luck!
Alright, so this might either be an Angular thing (in which case I might also be doing things completely wrong), but it could also be a browser / CSS thing.
"As simple as possible" plunker: https://plnkr.co/edit/t3woLDwynHYgbRDGNZDK
Also, full code (runnable as code snippet) attached to this post.
The example should be pretty clear, though certainly not pretty or designed in any way. If you don't feel like reading the ~20 lines of code, the following is what should happen:
There is a "button", the area with the paste icon in it. When you click it, an operation starts. With it, a spinner (controlled by a variable on the scope) is shown inside the button. When the operation finishes (simulated by the $timeout in the example), a message is set on the scope (imagine a result info message) and the spinner-controlling variable is turned off.
The intent is of course that the spinner should always be rendered inside (position: relative) the box, but during a brief moment while elements are being re-compiled / re-evaluated, it's instead rendered just above the box (or somewhere in between the middle and above).
If you don't see the effect I am describing straightaway, click the "Clear state..." button and try again. Also, you can try different values for the $timeout. For me, a $timeout of ~ 20 ms pretty much always gives me a spinner above the box in Chrome. Firefox seems to require a slightly higher timeout, or it won't even render the spinner half the time.
I initially assumed this to be an effect of Angular re-evaluating the two elements one at a time (re-rendering them), which gave the browser a rendering tick or two to actually draw the spinner incorrectly while it was still showing. However:
What confuses me a bit is that by turning up the $timeout time to something like 200 ms, the problem goes away (or at least my eyes make me believe that), leading me to believe it might not be an Angular problem after all, but a rendering timing one? Perhaps the browser (Chrome in this case, but reproducable in at least Firefox as well) doesn't like hiding the element again after just a tick?
ng-show / ng-if doesn't make a difference here.
Changing the spinner icon for other icons (and removing the spin) doesn't make a difference.
Full code, since it seems to be required now:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope, $timeout) {
$scope.message = undefined;
$scope.loading = false;
$scope.perform = function(event) {
event.stopImmediatePropagation();
$scope.loading = true;
$timeout(function() {
$scope.message = "Some message...";
$scope.loading = false;
}, 35);
};
$scope.clear = function() {
$scope.loading = false;
delete $scope.message;
};
});
#element .resource {
position: relative;
width: 120px;
margin: 0;
padding: 10px;
float: left;
box-sizing: border-box;
-moz-box-sizing: border-box;
font-size: 14px;
text-align: center;
}
#element .resource .shadow {
height: 124px;
box-sizing: border-box;
-moz-box-sizing: border-box;
border-radius: 4px;
border: 1px dashed #ccc;
padding-top: 32px;
color: #bbb;
cursor: pointer;
}
#element .resource .shadow:hover {
color: #888;
border-color: #999;
}
#element .resource .shadow.inactive {
color: #bbb;
border-color: #999;
cursor: default;
padding-top: 48px;
}
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link data-require="bootstrap-css#3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
<link data-require="font-awesome#*" data-semver="4.5.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.css" />
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.3.x" src="https://code.angularjs.org/1.3.20/angular.js" data-semver="1.3.20"></script>
<script data-require="jquery#*" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script data-require="bootstrap#*" data-semver="3.3.6" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div class="alert alert-info" ng-show="message">{{message}}</div>
<div id="element">
<div class="resource">
<div x-ng-show="!loading" class="shadow" x-ng-click="perform($event);">
<i class="fa fa-paste fa-2x"></i>
</div>
<div x-ng-show="loading" class="shadow inactive">
<i class="fa fa-spinner fa-spin fa-stack-2x text-info"></i>
</div>
</div>
</div>
<button ng-click="clear();">Clear state...</button>
</body>
</html>
I've had to apply hasLayout to the <i> element to avoid an IE7 bug in which sentences with italics obscured images that those sentences were on the same horizontal line as.
I've done so using either the zoom property or the display: inline-block property.
But now, any phrase in italics causes the italic portion to behave as if it were it's own block... kinda... or, it just doesn't break or wrap like a normal sentence would, in IE7 only. IE8 and FF work normally.
Example code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
<style>
i {zoom: 1;}
p {font-size: 20px;}
div {width: 200px; border: 2px solid red;}
</style>
</head>
<body>
<div>
<p>Here is a sentence. <i>Here is an italic sentence.</i> Here is another sentence.</p>
</div>
</body>
</html>
Renders like this:
alt text http://img193.imageshack.us/img193/968/haslayoutitalics.png
How can I get normal functionality back to my <i> elements?
You could stack the <img>s above offending <i>s. The code below removes the hasLayout fix, but stacks the images above the white bars you were seeing before:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<style type="text/css">
img {
position: relative;
z-index: 1;
}
p {font-size: 20px; background-color:#FFF;}
div {width: 200px; border: 2px solid red;}
</style>
</head>
<body>
<img src="http://www.google.com/intl/en_ALL/images/logo.gif" style='float:left;'>
<p><i>This is an italic sentence.</i></p>
<p><strong>This is a bold sentence.</strong></p>
<p>This is a normal sentence.</p>
<div>
<p>Here is a sentence. <i>Here is an italic sentence.</i> Here is another sentence.</p>
</div>
</body>
</html>