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>
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
This is derived from my question here: Changing style on <body> element where the suggestion was to style a top level DIV. Having tried that I find that I get a different output using React compared to direct HTML. I am at a loss to understand why.
Consider a very simple react app consisting of a basic index.html file:
<!DOCTYPE HTML>
<html>
<head>
<style>
html { min-height: 100%; }
body { height: 100%; background-color: blue; margin: 0; }
</style>
</head>
<body>
<div id='root'></div>
<script src="https://fb . me / react-15.0.1.js"></script>
<script src="https://fb . me / react-dom-15.0.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script src="main.js" type="text/babel"></script>
</body>
</html>
and a corresponding main.js file
var TestDiv = React.createClass({
render: function () {
const style = {
divStyle: {
height: "100%",
background: "red"
}
}
return (
<div style={style.divStyle}>
<h1>Hello World</h1>
</div>
)
}
});
ReactDOM.render(<TestDiv/>, document.getElementById('root'));
Rendering this produces a blue screen with a red bar at the top with the text on. With the DIV set to a height of 100% I had expected the red background to fill the viewport.
Now, take the output from that React app (as given by Chrome Inspector) and create a simple html file from it.
<html>
<head>
<style>
html { min-height: 100%; }
body { height: 100%; background-color: blue; margin: 0; }
</style>
</head>
<body>
<div id="root">
<div data-reactroot="" style="height: 100%; background: red;">
<h1>Hello World</h1>
</div>
</div>
<script src="https://fb . me/react-15.0.1.js"></script>
<script src="https://fb . me/react-dom-15.0.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script src="main.js" type="text/babel"></script>
</body>
</html>
The code is essentially the same but this renders with the whole viewport in red and no blue at all.
Why?
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>
could you please tell me how to make button of same size (or same height).Actually I have four buttons and a toggle button in one row I need their height should same as shown in image .I need to decrease height of toggle button .can we make same like that as show in image
here is my code
.margin_button_bar{
margin-left: -0.5em!important;
padding:0.5em!important;
}
.button_tab{
position: relative;
}
.toggle_button{
position: absolute!important; right: 0px!important;
display: inline;
border: none;
background: transparent;
paddig:0.5em!important;
}
can we reduce toggle button height ?
you can change the height of the toggle track (the part the toggle slides along) by chaning the .toggle .track {} class and you can change the handle (the part that moves) in the .toggle .handle {} class: or in your ion toggle you can just apply toggle-small as a class so it looks like <ion-toggle class="toggle-small">
see this play ground and play with the css http://play.ionic.io/app/46f56cb9e30d
code:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<link href="http://code.ionicframework.com/1.0.0/css/ionic.min.css" rel="stylesheet">
<script src="http://code.ionicframework.com/1.0.0/js/ionic.bundle.js"></script>
</head>
<body ng-app="app">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Awesome App</h1>
</ion-header-bar>
<ion-content class="padding">
<ion-toggle ng-model="airplaneMode" toggle-class="toggle-calm">Airplane Mode</ion-toggle>
</ion-content>
</ion-pane>
</body>
</html>
CSS:
/* Styles here */
.toggle .track {
height: 20px;
}
.toggle .handle {
height: 20px;
}
JS:
angular.module('app', ['ionic']);
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;
}