iOS switch focus between selects - strange behaviour - html

This strange behaviour happened both on Chrome and Safari on iOS 13.3.
If I select one value from the first select options and switch to the second select the value (in the same position I think) is automatically selected.
Does anyone have faced this problem? Maybe I'm missing something obvious.
Video here
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="form-group">
<div class="row">
<div class="small-6 columns">
<label class="required">Number Adults</label>
<select id="NumberAdults" name="NumberAdults" style="min-width: 200px; font-size: 16px;">
<option value="ad1">ad 1</option>
<option value="ad2">2</option>
<option value="ad3">3</option>
<option value="ad4">4</option>
<option value="ad5">5</option>
<option value="ad6">6</option>
<option value="ad7">7</option>
<option value="ad8">8</option>
<option value="ad9">9</option>
<option value="ad10">10</option>
</select>
</div>
<div class="small-6 columns">
<label class="required">Number Childs</label>
<select id="NumberChilds" name="NumberChilds" style="min-width: 200px; font-size: 16px;">
<option value="nc1">nc 1</option>
<option value="nc2">2</option>
<option value="nc3">3</option>
<option value="nc4">4</option>
<option value="nc5">5</option>
<option value="nc6">6</option>
<option value="nc7">7</option>
<option value="nc8">8</option>
<option value="nc9">9</option>
<option value="nc10">10</option>
</select>
</div>
</div>
</div>
</body>
</html>

One possible way to solve this is to set the first one (or the one that makes sense) as selected:
<option selected=“selected” value="nc1">nc 1</option

Related

bootstrap dropdown choose confirm by button

after selecting the item from dropdown the user will confirm the selection by clicking the button. and then has to move it to the page assigned to this item how to do it? after selecting the item from dropdown the user will confirm the selection by clicking the button. and then has to move it to the page assigned to this item how to do it?
thanks :)
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap-select Tests (Bootstrap 4)</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select#1.13.9/dist/css/bootstrap-select.min.css">
<style>
body {
padding-top: 70px;
margin-left: 200px;
}
</style>
</head>
<body>
<select class="selectpicker" data-width="75%" data-live-search="true" title="Wybierz urządzenie...">
<optgroup label="Producent1">
<option>Maszyna 1</option>
<option>Maszyna 2</option>
<option>Maszyna 3</option>
</optgroup>
<optgroup label="Producent1">
<option>Maszyna 1</option>
<option>Maszyna 2</option>
<option>Maszyna 3</option>
</optgroup>
</select>
<br>
<br>
<br>
<br>
<button type="button" data-width="75%" class="btn btn-lg btn-danger">Szukaj!</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.bundle.min.js"></script>
<script src="../dist/js/bootstrap-select.js"></script>
</body>
</html>
check this:
html file:
<form action="page.php" method="post">
<div class="form-group">
<label for="selectedItem"> select:</label>
<select class="form-control" id="selectedItem" name="selectedItem">
<optgroup label="Producent1">
<option value="Maszyna1">Maszyna 1</option>
<option value="Maszyna2">Maszyna 2</option>
<option value="Maszyna3">Maszyna 3</option>
</optgroup>
<optgroup label="Producent2">
<option value="Maszyna4">Maszyna 4</option>
<option value="Maszyna5">Maszyna 5</option>
<option value="Maszyna6">Maszyna 6</option>
</optgroup>
</select>
</div>
<button type="submit" id="btnRedirect" data-width="75%" class="btn btn-lg btn-danger">Szukaj!</button>
</form>
page.php file:
<?php
$addresses=array(
'Maszyna1'=>'https://facebook.com',
'Maszyna2'=>'https://google.com',
'Maszyna3'=>'https://twitter.com/',
);
if (isset($_POST['selectedItem']) && !empty($_POST['selectedItem'])){
$selectedItem=$_POST['selectedItem'];
foreach ($addresses as $key=> $address){
if ($selectedItem===$key)
header("Location:".$address);
}
}
?>
put it in form tag with action and method attributes and change button type to submit. a something like this:
<div class="container">
<div class="form-group">
<label for="selectedItem"> select:</label>
<select class="form-control" id="selectedItem" name="selectedItem">
<optgroup label="Producent1">
<option value="https://www.facebook.com/">Maszyna 1</option>
<option value="https://www.google.com/">Maszyna 2</option>
<option value="Maszyna3">Maszyna 3</option>
</optgroup>
<optgroup label="Producent2">
<option value="Maszyna3">Maszyna 3</option>
<option value="Maszyna4">Maszyna 4</option>
<option value="Maszyna5">Maszyna 5</option>
</optgroup>
</select>
</div>
<button type="submit" data-width="75%" class="btn btn-lg btn-danger">Szukaj!</button>

Dropdown changes its size when page size is changed

I have a select element in my form. When i zoom in or zoom out my browser ,the select element gets resized and changes its position. Kindy help me out. I will attach the code also.
<div class="form-group">
<select class="form-control" style="height:50px;" id="search_color">
<option value=" " hidden>Color</option>
<option value="0">Red</option>
<option value="1">Green</option>
<option value="2">Blue</option>
<option value="3">Yellow</option>
<option value="4">Orange</option>
<option value="5">Purple</option>
<option value="6">Grey</option>
<option value="7">Multicolor</option>
</select>
</div>
Basically, bootstrap classes have some behavior that varies depending on the size of the screen. In your case, You can actually apply a basic HTML center tag to override bootstrap class behavior and retain your dropdown option to the center of the screen.
Try this one:
<div class="form-group">
<center>
<select class="form-control" style="height:50px;" id="search_color">
<option value=" " hidden>Color</option>
<option value="0">Red</option>
<option value="1">Green</option>
<option value="2">Blue</option>
<option value="3">Yellow</option>
<option value="4">Orange</option>
<option value="5">Purple</option>
<option value="6">Grey</option>
<option value="7">Multicolor</option>
</select>
</center>
</div>

Aligning right for the select attribute in html

I am trying to align one of the select attribute in html to the right side of the page. However i was unable to achieve it. I have attached my codes here.
<!DOCTYPE html>
<html>
<body>
<h1>Java Casting</h1>
<h3>From</h3>
<h3 align="right">To</h3>
<select>
<option value="int">int</option>
<option value="double">double</option>
<option value="long">long</option>
<option value="String">String</option>
</select>
<select align="right" >
<option value="int">int</option>
<option value="double">double</option>
<option value="long">long</option>
<option value="String">String</option>
</select>
</body>
</html>
This is what you are trying to achieve if i'm not mistaken.
.right {
text-align: right;
float: right;
width: 50%;
}
.left {
float: left;
width: 50%;
}
<h1>Java Casting</h1>
<div class="left">
<h3>From</h3>
<select>
<option value="int">int</option>
<option value="double">double</option>
<option value="long">long</option>
<option value="String">String</option>
</select>
</div>
<div class="right">
<h3>To</h3>
<select>
<option value="int">int</option>
<option value="double">double</option>
<option value="long">long</option>
<option value="String">String</option>
</select>
</div>
You could try <select style="float:right">
<!DOCTYPE html>
<html>
<body>
<h1>Java Casting</h1>
<h3>From</h3>
<h3 align="right">To</h3>
<select>
<option value="int">int</option>
<option value="double">double</option>
<option value="long">long</option>
<option value="String">String</option>
</select>
<select style="float:right">
<option value="int">int</option>
<option value="double">double</option>
<option value="long">long</option>
<option value="String">String</option>
</select>
</body>
</html>

How to place to divs with drop down lists in them next to each other?

<div style="width: 100%; overflow: hidden;">
<div style="margin-left: 100px; width: 600px; float: left;">
<div class="description">
<h2 style="color:blue">Select the appropriate version</h2>
</div>
<select>
<option value="" disabled selected>Select version</option>
<option value="" disabled selected>Select feature</option>
<option value="A"> A </option>
<option value="B"> B </option>
<option value="C"> C</option>
</select>
<div style=" margin-left: 350px; width: 600px; float: left;">
<div class="description">
<h2 style="color:blue">Select the appropriate category</h2>
</div>
<select>
<option value="" disabled selected>Select feature</option>
<option value="" disabled selected>Select category</option>
<option value="A"> A </option>
<option value="B"> B </option>
<option value="C"> C</option>
</select>
<div style="margin-left: 620px; width: 600px; float: left;">
<div class="description">
<br>
<h2 style="color:blue">Select the feature</h2>
</div>
<select>
<option value="" disabled selected>Select feature</option>
<option value="" disabled selected>Select category</option>
<option value="A"> A </option>
<option value="B"> B </option>
<option value="C"> C</option>
</select>
</div>
</div>
I want the three divs with the drop down lists to be next to each other horizontally. I have tried using float, inline and inline block. How can it be done in HTML.
Use inline-block and put properly your all divs.
Here is an example:
.selection {
display: inline-block;
}
h1{
display: inline-block;
font-size: 14px;
}
<div>
<div class="selection">
<h1>Select Option</h1>
<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
<div class="selection">
<h1>Select Option</h1>
<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
<div class="selection">
<h1>Select Option</h1>
<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
</div>
<div style="float:left">
dropdown1
</div>
<div style="float:left">
dropdown2
</div>
<div style="float:left">
dropdown3
</div>
This will definitely work.
Problem in your code is over width. Better is you give width into % instead of px.
First of all, your code is really badly formatted.
Your are using 7 Div but you are missing 2 Div closing tags. Close the Div tags properly.
You are also fixing the width of all 3 divisions, so if the screen size is smaller than the combined width of the 3 div, your div's will no longer be displayed horizontally. Give width relative like width:30%.
Also remove margin from the elements. Use Padding instead to give space between div's.
<html>
<body>
<div style="width: 100%; overflow: hidden;">
<div style=" width: 33%;float: left;">
<div class="description">
<h2 style="color:blue">Select the appropriate version</h2>
</div>
<select>
<option value="" disabled selected>Select version</option>
<option value="" disabled selected>Select feature</option>
<option value="A"> A </option>
<option value="B"> B </option>
<option value="C"> C</option>
</select>
</div>
<div style="float: left;width: 33%;">
<div class="description">
<h2 style="color:blue">Select the appropriate category</h2>
</div>
<select>
<option value="" disabled selected>Select feature</option>
<option value="" disabled selected>Select category</option>
<option value="A"> A </option>
<option value="B"> B </option>
<option value="C"> C</option>
</select>
</div>
<div style=" float: left;width: 33%;">
<div class="description">
<br>
<h2 style="color:blue">Select the feature</h2>
</div>
<select>
<option value="" disabled selected>Select feature</option>
<option value="" disabled selected>Select category</option>
<option value="A"> A </option>
<option value="B"> B </option>
<option value="C"> C</option>
</select>
</div>
</div>
</body>
</html>
Problem is with your code you have 3 unclosed div tags and a lot of left margin plus try to use width and margin both in %
[Check pen] (http://codepen.io/anon/pen/gPzJpr)
for your html
<div class="container">
<div id="firstDiv">
<h1>Select the appropriate version</h1>
<select class="" name="">
<option value="" disabled selected>Select version</option>
<option value="" disabled selected>Select feature</option>
<option value="A"> A </option>
<option value="B"> B </option>
<option value="C"> C</option>
</select>
</div>
<div id="secondDiv">
<h1>Select the appropriate version</h1>
<select class="" name="">
<option value="" disabled selected>Select version</option>
<option value="" disabled selected>Select feature</option>
<option value="A"> A </option>
<option value="B"> B </option>
<option value="C"> C</option>
</select>
</div>
<div id="thirdDiv">
<h1>Select the appropriate version</h1>
<select class="" name="">
<option value="" disabled selected>Select version</option>
<option value="" disabled selected>Select feature</option>
<option value="A"> A </option>
<option value="B"> B </option>
<option value="C"> C</option>
</select>
</div>
</div>
for your css:
div{
display: inline-block;
position: relative;
margin: 5px;
padding: 15px;
}
#firstDiv{
background-color: #ccc;
}
#secondDiv{
background-color: #eee;
}
#thirdDiv{
background-color: #aaa;
}
Just like what #Maihan Nijat said, use external CSS to make it easier for you to debug.
I made a few changes to your code. The absolute easiest way to solve this problem is to ensure that the width of each element could fit next to each other on the screen. Not only does this require that the text is not too large, but also that the width you explicitly define does not overflow.
The simple solution to your problem is to place display: inline-block; on the elements which you would like side by side.
.left {
display: inline-block;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div class="left">
<div class="description">
<h2 style="color:blue">Select the appropriate version</h2>
</div>
<select>
<option value="" disabled selected>Select version</option>
<option value="" disabled selected>Select feature</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
</div>
<div class="left">
<div class="description">
<h2 style="color:blue">Select the appropriate category</h2>
</div>
<select>
<option value="" disabled selected>Select feature</option>
<option value="" disabled selected>Select category</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
</div>
<div class="left">
<div class="description">
<br>
<h2 style="color:blue">Select the feature</h2>
</div>
<select>
<option value="" disabled selected>Select feature</option>
<option value="" disabled selected>Select category</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
</div>
</body>
</html>

Two consecutive HTML dropdown menus rendering issue

I have the following code where I am trying to create two drop down menus; one for the day of the week and other one for the category.
<!DOCTYPE html>
<html>
<body>
<p>Category of the article:
<option value="lifestyle">Lifestyle</option>
<option value="entertainment">Entertainment</option>
<option value="business">Business</option>
<option value="social media">Social Media</option>
<option value="tech">Tech</option>
<option value="world">World</option></p> <br>
<p>Day of publishing the article:
<option value="monday">Monday</option>
<option value="tuesday">Tuesday</option>
<option value="wednesday">Wednesday</option>
<option value="thursday">Thursday</option>
<option value="friday">Friday</option>
<option value="saturday">Saturday</option>
<option value="sunday">Sunday</option></p> <br>
</body>
</html>
But the page looks like the below image. Can someone help me identify why is this happening?
Mistakes:
You cannot have any block tags or anything inside <p>.
You missed the <select> tags.
Corrected Code:
<!DOCTYPE html>
<html>
<body>
<p>Category of the article:</p>
<select>
<option value="lifestyle">Lifestyle</option>
<option value="entertainment">Entertainment</option>
<option value="business">Business</option>
<option value="social media">Social Media</option>
<option value="tech">Tech</option>
<option value="world">World</option>
</select>
<p>Day of publishing the article:</p>
<select>
<option value="monday">Monday</option>
<option value="tuesday">Tuesday</option>
<option value="wednesday">Wednesday</option>
<option value="thursday">Thursday</option>
<option value="friday">Friday</option>
<option value="saturday">Saturday</option>
<option value="sunday">Sunday</option>
</select>
</body>
</html>
You forgot the <select> tag.
<!DOCTYPE html>
<html>
<head>
<title>Titre</title>
</head>
<body>
<p>Category of the article:
<select>
<option value="lifestyle">Lifestyle</option>
<option value="entertainment">Entertainment</option>
<option value="business">Business</option>
<option value="social media">Social Media</option>
<option value="tech">Tech</option>
<option value="world">World</option>
</select></p> <br>
<p>Day of publishing the article:
<select>
<option value="monday">Monday</option>
<option value="tuesday">Tuesday</option>
<option value="wednesday">Wednesday</option>
<option value="thursday">Thursday</option>
<option value="friday">Friday</option>
<option value="saturday">Saturday</option>
<option value="sunday">Sunday</option>
</select></p> <br>
</body>
</html>
This code is right in the validator but I'm not sure if you can add <select> in <p>.
See HTML select tag