Here is a simplified version of my problem:
.select-trigger,
.select-trigger:focus {
min-height: 34px;
line-height: 2.45;
border-color: #ccc;
}
.select-trigger {
border: 1px solid #aaaaaa;
border-radius: 4px;
background-color: #ffffff;
}
/* added rule */
.form-inline .select {
display: inline-block;
min-width: 180px;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<form class="form-inline">
<div class="form-group">
<label>Label 1</label>
<div class="select">
<div class="select-trigger">
</div>
</div>
</div>
<div class="form-group">
<label>Label 2</label>
<input type="text" class="form-control">
</div>
<div class="form-group">
<label>Label 3</label>
<div class="select">
<div class="select-trigger">
Foo
</div>
</div>
</div>
</form>
</body>
</html>
(maybe Label 2 won't be appear in one line, if the view port is not big enough, so here is a JsBin to see it in full screen:
http://jsbin.com/sobupicire/3/edit?output)
Label 1 is the problem: Label sits at the bottom of the div. It should be in vertical middle of div.select
Label 2 is the desired look
Label 3 is the same as Label 1, but with some text it looks like it should (the label is in vertical middle of div.select
use the "label-control" for all label and "form-control"
http://jsbin.com/calaconidu/1/edit?output
The problem is one input is a select-trigger and the other is a select trigger with content, while the other is an inputbox. Try and keep them consistent and that will solve your problem
Related
I need to make the drop down of the materialize css smaller in size.
The font the spacing and everything. I have trued with width: 50%; height: 50% but this doesnt reduce the size
Now:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<title>Page Title</title>
</head>
<body>
<div class="row">
<div>
<div class="col s12">
<div class="col s6">
<input type="checkbox" class="filled-in single-opt" id="selectAll">
<label for="selectAll" id="selectAllLabel">Select all</label>
</div>
<div class="col s6">
<select id="select">
<option selected>Google Docs</option>
<option>Google Forms</option>
<option>Google Sheets</option>
</select>
</div>
</div>
<script>
$(document).ready(function() {
$('select').material_select();
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<title>Page Title</title>
</head>
<body>
<div class="row">
<div class="col l4">
<input type="checkbox" class="filled-in single-opt" id="selectAll">
<label for="selectAll" id="selectAllLabel">Select all</label>
</div>
<div class="col l4" ">
<select id="select ">
<option selected>Google Docs</option>
<option>Google Forms</option>
<option>Google Sheets</option>
</select>
</div>
</div>
<script>
$(document).ready(function() {
$('select').material_select();
});
</script>
</body>
</html>
try to refer grid layout of there..
You can just scale it?
.select-wrapper {
transform: scale(0.7);
}
You probably need to override the fixed width in the ul on smaller screens to make it wider.
.select-wrapper {
transform: scale(0.7);
}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<title>Page Title</title>
</head>
<body>
<div class="row">
<div>
<div class="col s12">
<div class="col s6">
<input type="checkbox" class="filled-in single-opt" id="selectAll">
<label for="selectAll" id="selectAllLabel">Select all</label>
</div>
<div class="col s6">
<select id="select">
<option selected>Google Docs</option>
<option>Google Forms</option>
<option>Google Sheets</option>
</select>
</div>
</div>
<script>
$(document).ready(function() {
$('select').material_select();
});
</script>
</body>
</html>
You need to override the li and the nested a. These are the default applied styles:
// The <li>
.dropdown-content li {
clear: both;
color: rgba(0,0,0,0.87);
cursor: pointer;
min-height: 50px;
line-height: 1.5rem;
width: 100%;
text-align: left;
}
// The nested <a>
.dropdown-content li>a, .dropdown-content li>span {
font-size: 16px;
color: #26a69a;
display: block;
line-height: 22px;
padding: 14px 16px;
}
Something like this would be a quick reduction from 50px to 40px:
.dropdown-content li,
.dropdown-content li>a {
height: 40px;
line-height: 0.9rem;
min-height: unset;
}
As a final note - if you use SASS in your projects, you can define the dropdown height (as well as the value of everything else in the framework) at the start of your project, rather than override it later down the line.
Codepen
Final final note!
The materialize select is a dropdown, in case you're wondering why I'm talking about dropdowns. Materialize hides the native select, replacing it with a text input that triggers a dropdown. Both a dropdown and a select will be affected by the style declarations above.
I need the input field under the image and not aligned. How I would go about centering the image and input field (+button)horizontally and vertically. As of now the input field is next to the image and I would like it below the image.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Solution for Technigo Coding Challenge</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<style>
body{
background-color:#18344e;
}
div {
position:absolute;
top:0;left:0;right:0;bottom:0;
background: g;
display: flex;
align-items: center;
justify-content:center
}
</style>
</head>
<body>
<div>
<center><img><a href=><img src="http://i.imgur.com/jl99RSf.gif" title="source: imgur.com" /></a></img></center>
<form action="/action_page.php"><center><form>
<strong>Search</strong>:<input type="text">
<input type="submit"value="Enter"></form></center>
</div>
<body/>
</html>
The problem can be solved simply by setting CSS text-align: center. I have also removed some HTML issues such as tags that weren't closed <form> & <img>, and tags that weren't required <center>.
Also, I would strongly suggest that instead of styling all div elements, you use class selectors .className and style specific classes, or use ID selectors #elementId to style individual elements.
body {
background-color: #18344e;
}
div {
text-align: center;
}
<body>
<div>
<a href="#"><img src="http://i.imgur.com/jl99RSf.gif" title="source: imgur.com" />
</a>
<form action="/action_page.php">
<strong>Search</strong>:<input type="text">
<input type="submit" value="Enter">
</form>
</div>
</body>
Just add to CSS margin-top equals to 10em.I will make what you want.
In addition, you've messed up some html codes. Especcially, you made mistakes using form tag.I fixed those issuses.Besides, that I have added class to div tag since it better to specifiy.
body {
background-color: #18344e;
}
div.main {
margin-top: 10em;
text-align: center;
}
<body>
<div class="main">
<a href="#"><img src="http://i.imgur.com/jl99RSf.gif" title="source: imgur.com" />
</a>
<form action="action_page.php">
<label for="search">Search:</label><input type="text">
<input type="submit" name="submit" value="Send">
</form>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Solution for Technigo Coding Challenge</title>
<link rel="stylesheet" type="text/css" href="style.css">
<style>
body{
background-color:#18344e;
}
div{
position:absolute;
top:0;left:0;right:0;bottom:0;
background: g;
display: flex;
align-items: center;
justify-content:center
}
</style>
</head>
<body>
<div>
<center><img src="http://i.imgur.com/jl99RSf.gif" title="source: imgur.com" />
<br/>
<form action="/action_page.php">
<strong>Search</strong>:<input type="text">
<input type="submit"value="Enter">
</form>
</center>
</div>
</body>
</html>
This question already has answers here:
Margin-Top push outer div down
(8 answers)
Closed 6 years ago.
I have this weird whitespace above the section-one div in the body.
Here it is:
Don't understand why, I've even reset the CSS to default i.e * { margin: 0;}
Html
<!DOCTYPE html>
<html>
<head>
<title>Responsive Navigation Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
<link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'>
<script src="js/jquery-3.0.0.min.js"></script>
</head>
<body>
<div id='section-one'>
<div id='headline'>
<h1> This is the headline </h1>
<div class='silver-line-break'>
</div>
<div id='fee-estimate-box'>
<form id='fee-estimate-form' action="#">
<legend>Delivery Fee Calculator</legend>
<span>First name: </span> <input type="text" name="firstname" value="Mickey">
<span>Last name: </span> <input type="text" name="lastname" value="Mouse">
<input type="submit" value="Submit">
</form>
</div>
<div class='silver-break-bar'>
<img id='red-car' src="img/red-car.png" alt="" height="250" width="300">
</div>
</div>
</div>
</body>
</html>
CSS
/* Basic Styles */
* {
margin-top: 0px;
padding: 0;
}
body {
padding: 0px;
margin: 0px;
background-color: pink;
}
#section-one {
background-color: #80be05;
margin: 0px;
padding: 0px;
}
Any ideas why there is space between above the section-one div in the body?
Update: I've added the complete code that asked. Not sure what the problem is? Is the something to do with my chrome browser?
the H1 has a margin of some pixels.
h1 {
margin: 0px
}
I'm using html form inputs on my page (text, textarea, submit) to create a contact form, and I want to do some custom styling using css.
I've set the width of my inputs to 100%, but somehow the button input(submit) ends up being smaller than the textarea and text inputs. I can't really figure out what's going on here.
How do I get them to be all the same size (I need to use % values, want to make my site responsive)?
Snippet below, missing the main .css file since it's not relevant to the question. Ionicons.css is a custom icons fonts, that I use on other parts of this page, and I've linked normalize.css from a CDN.
Thanks for the help.
/************************************************
TEXT, BOX...
************************************************/
.contact-box {
background-color: #e3f9ec;
padding: 1em;
}
.contact-box p {
margin-bottom: 0.5em;
padding: 0;
}
/************************************************
INPUTS
************************************************/
input, textarea {
margin: 1em auto;
width: 100%;
}
input[name="name"], input[name="email"] {
}
textarea[name="msg"] {
height: 10em;
resize: none;
}
input[type="submit"] {
background-color: #913D88;
border: none;
color: #fff;
padding: 1em;
margin: 0 auto;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Contact | PTC Testers
</title>
<meta name="description" content="Pay to click sites testing">
<meta name="author" content="Shooshte">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/main.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css" rel="stylesheet"/>
<link rel="stylesheet" type="text/css" href="css/contact.css">
</head>
<body>
<header>
<h1>PTCTesters<small>.com</small></h1>
<ul>
<li>home</li>
<li>articles</li>
<li>sites</li>
<li>contact</li>
<li>login</li>
</ul>
</header>
<div id="content">
<div class="contact-box">
<p>Please don't hesitate to drop us an email with any questions, suggestions, party invitations or anything else.</br><br/>Please enter a valid email in order to receive a response. We try our best to reply in the shortest time possible.<br/><br/>Have a nice day!</p>
<form action="" method="post">
<input name="name" type="text" placeholder="Your name or username"></br>
<input name="email" type="email" placeholder="Your email address"></br>
<textarea name="msg" placeholder="Your message..."></textarea></br>
<input type="submit" class="button" value="send">
</form>
</div>
</div>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<footer>
© PTC-Testers, 2015
</footer>
</body>
</html>
Most of form elements have default padding and border styles, it may vary depending on different browser and OS. Apply box-sizing:border-box can make them to be truly 100% size.
input, textarea {
width: 100%;
box-sizing: border-box;
}
/************************************************
TEXT, BOX...
************************************************/
.contact-box {
background-color: #e3f9ec;
padding: 1em;
}
.contact-box p {
margin-bottom: 0.5em;
padding: 0;
}
/************************************************
INPUTS
************************************************/
input, textarea {
margin: 1em auto;
width: 100%;
box-sizing: border-box;
}
input[name="name"], input[name="email"] {
}
textarea[name="msg"] {
height: 10em;
resize: none;
}
input[type="submit"] {
background-color: #913D88;
border: none;
color: #fff;
padding: 1em;
margin: 0 auto;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Contact | PTC Testers
</title>
<meta name="description" content="Pay to click sites testing">
<meta name="author" content="Shooshte">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/main.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css" rel="stylesheet"/>
<link rel="stylesheet" type="text/css" href="css/contact.css">
</head>
<body>
<header>
<h1>PTCTesters<small>.com</small></h1>
<ul>
<li>home</li>
<li>articles</li>
<li>sites</li>
<li>contact</li>
<li>login</li>
</ul>
</header>
<div id="content">
<div class="contact-box">
<p>Please don't hesitate to drop us an email with any questions, suggestions, party invitations or anything else.</br><br/>Please enter a valid email in order to receive a response. We try our best to reply in the shortest time possible.<br/><br/>Have a nice day!</p>
<form action="" method="post">
<input name="name" type="text" placeholder="Your name or username"></br>
<input name="email" type="email" placeholder="Your email address"></br>
<textarea name="msg" placeholder="Your message..."></textarea></br>
<input type="submit" class="button" value="send">
</form>
</div>
</div>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<footer>
© PTC-Testers, 2015
</footer>
</body>
</html>
/************************************************
TEXT, BOX...
************************************************/
.contact-box {
background-color: #e3f9ec;
padding: 1em;
}
.contact-box p {
margin-bottom: 0.5em;
padding: 0;
}
/************************************************
INPUTS
************************************************/
input, textarea {
margin: 1em auto;
width: 100%;
border-left-width: 2px;
border-right-width: 2px;
padding-left: 0px;
padding-right: 0px;
}
input[name="name"], input[name="email"] {
}
textarea[name="msg"] {
height: 10em;
resize: none;
}
input[type="submit"] {
background-color: #913D88;
border: none;
color: #fff;
padding: 1em;
margin: 0 auto;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Contact | PTC Testers
</title>
<meta name="description" content="Pay to click sites testing">
<meta name="author" content="Shooshte">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/main.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css" rel="stylesheet"/>
<link rel="stylesheet" type="text/css" href="css/contact.css">
</head>
<body>
<header>
<h1>PTCTesters<small>.com</small></h1>
<ul>
<li>home</li>
<li>articles</li>
<li>sites</li>
<li>contact</li>
<li>login</li>
</ul>
</header>
<div id="content">
<div class="contact-box">
<p>Please don't hesitate to drop us an email with any questions, suggestions, party invitations or anything else.</br><br/>Please enter a valid email in order to receive a response. We try our best to reply in the shortest time possible.<br/><br/>Have a nice day!</p>
<form action="" method="post">
<input name="name" type="text" placeholder="Your name or username"></br>
<input name="email" type="email" placeholder="Your email address"></br>
<textarea name="msg" placeholder="Your message..."></textarea></br>
<input type="submit" class="button" value="send">
</form>
</div>
</div>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<footer>
© PTC-Testers, 2015
</footer>
</body>
</html>
Set
input, textarea{
box-sizing: border-box;
}
to keep your padding's inside the element. The inputs' and textarea's padding's are pushing the width beyond 100%. Alternatively, set
input, textarea{
width: Calc(100% - 4px); // 4px = cumulated lateral padding
}
input.button{
width: 100%;
}
Seems to work fine in Opera and Chrome but the same code in FF and IE11 hides the text, which is no fun at all. I don't have a Mac so I don't know what it's like in Safari.
Here is a plunker demonstrating the issue.
I've tried adding line-height and overflow:visiblebut neither seem to have much effect.
css:
#userResponse {
font-size: 2em;
padding: 1em 0.25em;
text-align: center;
}
html:
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap-css#3.3.1" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<input class="form-control" id="userResponse" type="text">
</body>
</html>
Bootstrap also has classes for input tags to increase the height of text fields, try with input-lg, hope it meets your requirement
<input class="form-control input-lg" type="text">
remember to put all form-control inside form-group
<div class="form-group">
<input class="form-control input-lg" type="text">
</div>
for more http://getbootstrap.com/css/#forms-control-sizes
Luzan's solution is probably the best approach. However, to keep the the spacing similar to how it appears in chrome with the padding I gave it a new fixed height of 58px and removed the padding entirely. This seems to give consistent results across all four browsers.
Updated Plunker.
html:
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap-css#3.3.1" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<input class="form-control" id="userResponse" type="text" value='abcdefghijklmnopqrstuvwqyz'>
<div class="form-group">
<input class="form-control custom" type="text" value='abcdefghijklmnopqrstuvwqyz'>
</div>
</body>
</html>
css:
/* Styles go here */
#userResponse {
font-size: 2em;
padding: 1em 0.25em;
text-align: center;
}
.custom {
text-align:center;
font-size:2em;
height:58px;
}