I am not sure if this is a material related code or not.
But if you see this code, you'll find that the width of the i element is wider than that displayed by the red border. You cannot navigate to the beginning of the text input as it still points to the material icon, help_circle.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" />
<link href='https://fonts.googleapis.com/icon?family=Material+Icons' rel='stylesheet' type='text/css'/>
<style type="text/css">
div.tipped-small
{
margin-top:-10px;
margin-right:10px;
display:inline-block;
width:15px;
height:15px;
padding:5px;
border-radius:50%;
cursor:pointer;
position:relative;
overflow:none;
}
div.tipped-small i
{
width:15px;
color:#4857BA;
font-size:15px;
line-height:15px;
cursor:pointer;
position:absolute;
overflow:none;
}
</style>
</head>
<body>
<div id="container">
<div class="tipped-small">
<i class="material-icons" style="border:1px solid red">help_circle</i>
</div>
<input type="text" style="height:15px;border:1px solid red"/>
</div>
</body>
</html>
https://codepen.io/anjanesh/pen/LqYXZe
How do I get the i tag to be only 15px ?
Related
I need to use the same code for my mobile site as my desktop site (below). How can I enlarge my mobile site's text size so it looks the same as my desktop site?
This is my header info and title:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2//EN">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Title</title>
This is my Cascading Style Sheet data:
<style type="text/css">
<!--
A:link {text-decoration: none;}
A:visited {text-decoration: none;}
A:hover {text-decoration: underline;}
img {
height: auto;
max-width: 100%;
object-fit: contain;
}
table {table-layout: fixed; width: 100%;}
td {word-wrap: break-word;}
-->
</style>
</head>
This is my cream background colour:
<body style="background-color: rgb(255, 239, 227);">
This is the content of my site, where I would insert text between the <p> and </p> tags:
<div style="text-align: center;">
<table width="80%">
<tbody>
<tr>
<td>
<p>
</p>
</td>
</tr>
</tbody>
</table>
<br>
<br>
</body>
</html>
Insert the following code before the </head> tag:
<meta name="viewport" content="width=device-width, initial-scale=1">
This makes the text size appear the same size as your desktop site.
Hopefully I'm just missing something simple, but there is a little too much space between the items ("grid-stack-item" divs). I would like a grid where the items are a little closer together. I was hoping maybe someone had a codepen or fiddle that showed how to decrease the space between the items (shrink the columns).
Relevant code:
<html>
<head>
<!--JQUERY-->
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js" integrity="sha256-xNjb53/rY+WmG+4L6tTl9m6PpqknWZvRt0rO1SRnJzw=" crossorigin="anonymous"></script>
<!--Bootstrap-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<!--Lodash-->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.13.1/lodash.js"></script>
<!--Gridstack-->
<script type="text/javascript" src='//cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.2.5/gridstack.min.js'></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.ui/1.11.4/jquery-ui.min.css">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.2.5/gridstack.min.css" />
<style>
.grid-stack-item{background-color: #00CED1;}
.red {border: 1px solid red;}
.blue {border: 3px solid blue;}
.red-dash {border: 3px dashed red;}
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="col-md-12">
<div class="grid-stack" style="margin-top: 20px;">
<div class="grid-stack-item"
data-gs-x="0" data-gs-y="0"
data-gs-width="1" data-gs-height="1">
<div class="grid-stack-item-content">BOX 1</div>
</div>
<div class="grid-stack-item"
data-gs-x="2" data-gs-y="0"
data-gs-width="1" data-gs-height="1">
<div class="grid-stack-item-content">BOX 2</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
var options = {
cellHeight: 80,
width: 4
};
$('.grid-stack').gridstack(options);
});
</script>
<!-- Scripts -->
</body>
</html>
You need to make the data-gs-x attribute of the second grid-stack-item 1 instead of 2 as the width of each grid-stack-item is only 1. At the moment you have a empty space there because you've told it to leave it empty.
Well this is a four years old quetions. But you can change that gap by adding the margin parameter to the grid options. Default margin value is 10.I can be an integer (px) or a string (ex: '2em', '20px', '2rem')
var options = {
cellHeight: 80,
width: 4,
margin: 5
};
source document
Higuys,
as per the polymer documentation on paper dialog i did this
<paper-card elevation=3 align="center" id="question-ask-card">
<h1 id="got-a-question">
Got a question ?
</h1>
<paper-button data-dialog="Qdialog" id="askit" raised ><p id="ask-it">Write on Blackboard</p></paper-button>
</paper-card>
and the dialog is
<paper-dialog id="Qdialog">
<h1>sdjafadsfasdfjhg</h1>
<p>
aouaouwghsefjgzskdcghizbskk
</p>
</paper-dialog>
So how to link that dialog on click of that button,please help me!!!!!!!!
Thanks in advance.
Assuming your code is just sitting in the main document, this can be as easy as adding onclick="Qdialog.open()" to your button.
<!doctype html>
<head>
<meta name="description" content="Polymer Example">
<meta charset="utf-8">
<base href="http://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="paper-elements/paper-elements.html" rel="import">
<style>
body {
font-family: sans-serif;
}
</style>
</head>
<body>
<paper-card elevation=3 align="center" id="question-ask-card">
<h1 id="got-a-question">Got a question ?</h1>
<paper-button data-dialog="Qdialog" id="askit" raised onclick="Qdialog.open()"><p id="ask-it">Write on Blackboard</p></paper-button>
</paper-card>
<paper-dialog id="Qdialog">
<h1>sdjafadsfasdfjhg</h1>
<p>
aouaouwghsefjgzskdcghizbskk
</p>
</paper-dialog>
</body>
I'm trying to create a simple layout like so
http://www.ttmt.org.uk/forum/col-1.html
http://jsfiddle.net/Y3kvj/
<!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>
<link rel="stylesheet" href="css/master.css" />
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style type="text/css">
*{
margin:0;
padding:0;
}
html, body{
background:#eee;
height:100%;
}
h1{
font-family:sans-serif;
color:#ddd;
}
#wrapper{
min-height:100%;
max-width:1000px;
margin:0 auto;
background:#fff;
overflow:auto;
border-left:30px solid #eee;
border-right:30px solid #eee;
padding:20px 20px 0 20px;
}
#leftCol{
background:yellow;
height:200px;
width:280px;
float:left;
}
#rightCol{
background:red;
height:200px;
margin-left:320px;
}
#media only screen and (max-width:700px){
#leftCol{
float:none;
}
#rightCol{
float:none;
margin:20px 0 0 0;
}
}
</style>
</head>
<body>
<div id="wrapper">
<div id="leftCol">
<h1>Left Col</h1>
</div><!-- #leftCol -->
<div id="rightCol">
<h1>Right Col</h1>
</div><!-- #rightCol -->
</div><!-- #wrapper -->
<!--jQuery -->
</body>
</html>
It's fixed width left column and fluid right column
When the window is resized i would like the left col to drop below the right col - In this example it doesn't
I know this is because the code order.
If I put the left col below the right col when the window resizes it drops below as I would like.
http://www.ttmt.org.uk/forum/col-2.html
http://jsfiddle.net/x8bKD/
<!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>
<link rel="stylesheet" href="css/master.css" />
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style type="text/css">
*{
margin:0;
padding:0;
}
html, body{
background:#eee;
height:100%;
}
h1{
font-family:sans-serif;
color:#ddd;
}
#wrapper{
min-height:100%;
max-width:1000px;
margin:0 auto;
background:#fff;
overflow:auto;
border-left:30px solid #eee;
border-right:30px solid #eee;
padding:20px 20px 0 20px;
}
#leftCol{
background:yellow;
height:200px;
width:280px;
float:left;
}
#rightCol{
background:red;
height:200px;
float:right;
}
#media only screen and (max-width:700px){
#leftCol{
float:none;
}
#rightCol{
float:none;
margin:0 0 20px 0;
}
}
</style>
</head>
<body>
<div id="wrapper">
<div id="rightCol">
<h1>Right Col</h1>
</div>
<div id="leftCol">
<h1>Left Col</h1>
</div>
</div><!-- #wrapper -->
</body>
</html>
My problem now Is how do I make the right col stretch so it fills the space.
Negative Margins
I know I can do this with negative margins like so
http://www.ttmt.org.uk/forum/col-3.html
http://jsfiddle.net/vkZPj/
<!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>
<link rel="stylesheet" href="css/master.css" />
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style type="text/css">
*{
margin:0;
padding:0;
}
html, body{
background:#eee;
height:100%;
}
h1{
font-family:sans-serif;
color:#ddd;
}
#wrapper{
min-height:100%;
max-width:1000px;
margin:0 auto;
background:#fff;
overflow:auto;
border-left:30px solid #eee;
border-right:30px solid #eee;
padding:20px 20px 0 20px;
}
#leftCol{
background:yellow;
height:200px;
width:280px;
float:left;
}
#rightCol{
background:red;
height:200px;
width:100%;
margin-left:-290px;
float:right;
}
#rightCol-inner{
margin-left:290px;
}
#media only screen and (max-width:700px){
#leftCol{
float:none;
}
#rightCol{
float:none;
margin:0 0 20px 0;
}
#rightCol-inner{
margin-left:0;
}
}
</style>
</head>
<body>
<div id="wrapper">
<div id="rightCol">
<div id="rightCol-inner">
<h1>Right Col</h1>
</div><!-- #rightCol-inner -->
</div>
<div id="leftCol">
<h1>Left Col</h1>
</div>
</div>
</body>
</html>
Is the negative margin the only way - it would add a ton of div's to my code
Having a hard time understanding it just what you want with all of the examples you listed, but....
Order your div's this way:
<div id="wrapper">
<div id="leftCol">
<h1>Left Col</h1>
</div>
<div id="rightCol">
<h1>Right Col</h1>
</div>
</div>
Put an overflow:hidden in #wrapper:
#wrapper{
min-height:100%;
max-width:1000px;
margin:0 auto;
background:#fff;
overflow:hiddeen;
border-left:30px solid #eee;
border-right:30px solid #eee;
padding:20px 20px 0 20px;
}
Float both columns to the left, give the right column a max-width:
#leftCol{
background:yellow;
height:200px;
width:280px;
float:left;
}
#rightCol{
background:red;
height:200px;
max-width:500px;
float:left;
}
If you want to see the right column stretch you need to put some content in it (e.g. - lorum ipsum).
I'm using the following code:
<html>
<body bgcolor="black">
<center>
<div style="width:1080px;height:288px;">
<img src="declined.png" width="1080" height="288" alt="" style="z-index:0;position:absolute;" ondragstart="return false"/>
<img src="cover.png" width="1080" height="288" alt="Declined."" style="z-index:1;position:absolute;" ondragstart="return false" />
</div>
</center>
</html>
It works in Chrome but not in IE or Firefox. My goal with this is to overlay cover.png over declined.png so people cannot directly save the image, but instead save a transparent png. I prefer to do this without using external CSS. Thanks for your help. :)
The standard method in css is to use margin: 0 auto, so:
<div style="width: 1080px; height: 288px; margin: 0 auto; position: relative">
<img ... >
<img ... >
</div>
Note the addition of position: relative. Without that, your images would position themselves absolutely relative to the <body> element. Also note that these sorts of overlays are trivial to bypass by anyone with the slightest knowledge of HTML and/or access to basic browser developer tools.
-Avoid using old tags such as instead use CSS.
-Use appropriate DOCTYPE (example below shows doctype for html5)
-Always close your tags, your code does not have closing tags for body.
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="main" style="width:1080px;height:288px;">
<img src="declined.png" width="1080" height="288" alt="" style="z-index:0;position:absolute;" ondragstart="return false"/>
<img src="cover.png" width="1080" height="288" alt="Declined."" style="z-index:1;position:absolute;" ondragstart="return false" />
</div><!-- end div main -->
</body>
</html>
CSS:
#main{
margin: 0 auto;
width:1080px;
height:288px;
}