Hi i have some problem with DataList in html, if i center whole site, dropdown menu in input doesn't show.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body style="text-align: center;">
<input list="test">
<datalist id="test">
<option value="1"/>
<option value="2"/>
<option value="3"/>
<option value="4"/>
<option value="5"/>
</datalist>
</body>
</html>
Any idea how to fix it ;)
By the way whitch class in bootstrap make it'll look cool? ;)
Hey what browser are you using? Trying to reproduce what you are seeing, everything displays fine.
Related
I am trying to get the selection box below the canvas. I have tried a number of combinations but have not prevailed. I am using paper.js for the canvas. Also, I know that having the names of colors like I have them is bad but this is a rough prototype site so cut me some slack please. Thank you.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#simonwep/pickr/dist/themes/classic.min.css" /> <!-- 'classic' theme -->
<link rel="stylesheet" type="text/css" href="WEBSITE.css">
<!-- Load the Paper.js library -->
<script type="text/javascript" src="node_modules/paper/dist/docs/assets/js/paper.js"></script>
</head>
<body>
<script src="displayTable.js"></script>
<canvas id="mycanvas" resize></canvas>
<label for="backgroundTable">Color for background of table:</label>
<form action="website.php" method="post">
<div class="form">
<select name="userBackgroundSelect" id="userBackgroundSelect">
<option value="black">Black</option>
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="purple">Purple</option>
</select>
</div>
<div>
<input type="submit">
</div>
</form>
</body>
</html>
I need to create a filter form which only shows year option. The input can be be a dropdown list of year or datepicker that only shows year option.
Do you know how to create it? please let me know, I am a beginner,
I have tried to find solution, but didn't find any.
Thank you, I appreciate any helps.
Thanks #Reystleen for answer in the comment!
ANSWER: https://itsolutionstuff.com/post/bootstrap-year-picker-example-using-datepicker-jsexample.html
CODE:
<html lang="en">
<head>
<title>Bootstrap - year picker only example</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/css/bootstrap-datepicker.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/js/bootstrap-datepicker.js"></script>
</head>
<body>
<div class="container text-center">
<h2>Bootstrap - year picker only example</h2>
<input class="date-own form-control" style="width: 300px;" type="text">
<script type="text/javascript">
$('.date-own').datepicker({
minViewMode: 2,
format: 'yyyy'
});
</script>
</div>
</body>
</html>
Something like this:
<select name="birthyear">
<option value="2018">2018</option>
<option value="2017">2017</option>
<option value="2016">2016</option>
<option value="2015">2015</option>
<option value="2014">2014</option>
<option value="2013">2013</option>
<option value="2012">2012</option>
<option value="2011">2011</option>
<option value="2010">2010</option>
etc.
</select>
I am trying to create a Search panel on a page, consisting of three select boxes (dropdowns) and a button. however I am unable to get them to line-up. This must have been doen thousands of times before yet it is giving me so much grief.
In an effort to simplify it and understand what is going on, I created the following minimalist page.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
</head>
<body>
<table>
<tr>
<form action="<?php echo $_SERVER['PHP_SELF'] ?>" method="post" name="search1" id="search1">
<td bgcolor="#FF0000">
<select class="searchbox" name="type" style="width:140px">
<option value="">choose a style.....</option>
<option value="beach">Beach</option>
<option value="city">City</option>
</select>
</td>
<td bgcolor="#FF0000">
<input type="image" name="submit" id="submit" alt="submit" src="../images/transparent.png" width="35px" height="30px" style="background-color:#00C">
</td>
</form>
</tr>
</table>
</body>
</html>
The result looks like this in Firefox,
this in Chrome,
this in IE9,
and this in IE9 Compatibiity View.
Sorry, I'm not allowed to post images as I'm a newbie, but take it from me, they're all different. I haven't even dared to look at it in older versions of IE!
How can I get the select box to vertically align centrally with the button in all browsers? I must be missing something obvious: it's not rocket surgery!
http://i.stack.imgur.com/LI9vf.gif
http://i.stack.imgur.com/HcCKN.gif
http://i.stack.imgur.com/bHAkP.gif
http://i.stack.imgur.com/PUXkl.gif
You need to play with line-height and vertical-align...
And theres no real need for a table there, well at least not in the simplified example you posted:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
</head>
<body>
<form action="" method="post" name="search1" id="search1">
<div style="background-color:red;padding:0;height:30px;line-height:30px;">
<select class="searchbox" name="type" style="width:140px">
<option value="">choose a style.....</option>
<option value="beach">Beach</option>
<option value="city">City</option>
</select>
<input type="image" name="submit" id="submit" alt="submit" src="../images/transparent.png" style="background-color:#00C;margin:0;padding:0;width:35px;height:30px;vertical-align:bottom;">
</div>
</form>
</body>
</html>
I am utilizing the 960 CSS grid system. I was making a really quick mock up of a website and noticed that my line breaks were rendering quite differently in chrome than they were in IE8.
The following link has screenshots of both browsers. The first image is IE8 and the second is Chrome: http://imgur.com/YLgcsl&kIeTn
What can I do to rid my code of inconsistencies
Here is the code I am using.
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>The 1Kb Grid Demo – 16 columns, 60 pixels each, with 20 pixel gutter</title>
<link href="grid.css" type="text/css" rel="stylesheet" media="screen"/>
<style type="text/css" media="screen">
body { margin: 20px 0 0 0; }
p {
font:60px/100px Helvetica;
color: #000;
text-align: center;
border: 1px solid #000;
margin: 0 0 20px 0;
}
label {
float:left;
}
</style>
</head>
<body>
<div class="row">
<div class="column grid_16"><p>16</p></div>
</div>
<div class="row">
<div class="column grid_8">
<label>First name: </label><br /> <input type="text" name="firstname" /><br />
<label>Last name: </label><br /> <input type="text" name="lastname" /><br />
<label>ID: </label><br /> <input type="text" name="employnum"/>
<br />
<label>Observer</label><br />
<select style="width:150px" name="observer">
<option value="TEST"> TEST </option>
<option value="TEST"> TEST </option>
<option value="TEST"> TEST </option>
</select>
<label>Observed</label>
<form action="">
<select style="width:150px" name="observed">
<option value="TEST"> TEST </option>
<option value="TEST"> TEST </option>
<option value="other">Other</option>
</select><br />
<label>Operation Code</label><br />
<select style="width:150px" name="opcode">
<option value="TEST"> TEST </option>
<option value="TEST"> TEST </option>
<option value="TEST"> TEST </option>
<option value="TEST"> TEST </option>
</select>
<label>Center</label><br /><br />
<select style="width:150px" name="cost">
<option value="Zone 1"> Zone 1 </option>
<option value="Zone 2"> Zone 2 </option>
<option value="Zone 3"> Zone 3 </option>
</select>
</form>
<div class="row">
<div class="column grid_4"><p>4</p></div>
<div class="column grid_4"><p>4</p></div>
</div>
</div>
<div class="column grid_8"><p style="line-height: 222px;">8</p></div>
</div>
</body>
</html>
Use CSS reset.
Browsers (User Agents in general) apply a predefined style on HTML elements. To cancel those predefined styles, designers and developers are encouraged to use resets.
What is your question? The only difference I see at a glance is the width of of the dropdown lists are different. Try setting a fixed width on your select elements via css.
I am facing one weird cross browsers problem i.e. I want to highlight some of the option items as bold by using CSS class in my form element "select". This all is working fine in firefox only but not in other browsers like safari , chrome and IE .Given below is the code.
<html>
<head>
<title>MAke Heading Bold</title>
<style type="text/css">
.mycss {font-weight:bold;}
</style>
</head>
<body>
<form name="myform">
<select name="myselect">
<option value="one">one</option>
<option value="two" class="mycss">two</option>
<option value="three" >Three </option>
</select>
</form>
</body>
</html>
Vivek try this,
<style type="text/css">
option.mycss{font-weight:bold;}
</style>
For ref Styling Dropdown Lists