CSS: how to have a max height in datalist? - html

i have this datalist and i am assuming that data in options has morethan 100, and I want to have a max height so that the design looks neat. please help me to guys. thank you.
<input type="text" list="suggestions" class="form-control" style="width: 100%;" >
<datalist id="suggestions" >
<option value="Blue">
<option value="White">
<option value="Black">
<option value="Red">
<option value="Green">
<option value="Blue">
<option value="White">
<option value="Black">
<option value="Red">
</datalist>

Do you want a scrollable div to show all the options?
If yes, you can set the height of the parent 'div' to a set height and set the "overflow-y:auto" .

Related

How do I connect a <form>, <select> and a <div> slider to a button in HTML?

I have to connect a tag, three tags and a that contains a slider to a that is connected to a database.
I have made all of the elements but they are in no way connected to each other, and pressing the button does nothing.
Here is the form where the user types their points:
<form id="pointsform">
Points:<input type="number">
</form>
Then I have the user select a subject:
<select id="subject-selection">
<option value="Math">Math</option>
<option value="Physics">Physics</option>
<option value="Chemistry">Chemistry</option>
<option value="English">English</option>
</select>
Then they choose the year:
<select id="year-selection">
<option value="2019">2019</option>
<option value="2018">2018</option>
<option value="2017">2017</option>
<option value="2016">2016</option>
</select>
Then they choose the season:
<select id="season-selection">
<option value="Spring">Kevät</option>
<option value="Fall">Syksy</option>
</select>
Then they can choose a value from a slider:
<div class="slidecontainer">
<p id="slider">How strictly did your teacher grade:</p>
<input type="range" min="1" max="100" value="50">
Under all of that there is a button:
<button id="compare-button">Compare</button>
I would like to connect all the user inputted answers to the button, so when I click the button, it interacts with the database.
You simply have to wrap everything into a single form like this:
<form id="pointsform">
<input type="number">
<select id="subject-selection">
<option value="Math">Math</option>
<option value="Physics">Physics</option>
<option value="Chemistry">Chemistry</option>
<option value="English">English</option>
</select>
<select id="year-selection">
<option value="2019">2019</option>
<option value="2018">2018</option>
<option value="2017">2017</option>
<option value="2016">2016</option>
</select>
<select id="season-selection">
<option value="Spring">Kevät</option>
<option value="Fall">Syksy</option>
</select>
<div class="slidecontainer">
<p id="slider">How strictly did your teacher grade:</p>
<input type="range" min="1" max="100" value="50">
</div>
<input type="submit" value="Compare">
</form>
Put all the form controls inside the <form> element, not just the <input type="number">.

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>

HTML: Is this acceptable? I wrapped an <h4> around text and a select

I'm trying to do something and I know using < br> isn't a good way of putting stuff on a new line so I was told to try H1-6's so I did but it instead made my answer and question on two different lines but if I do it like this
<div>
<label for="room">Select Your Room:</label>
<select id="room" name="room" required>
<option disabled selected value="">
Choose a room
</option>
<option value="S308">
S308
</option>
<option value="S324">
S324
</option>
<option value="L2">
L2
</option>
<option value="ME201">
ME201
</option>
<option value="ME208">
ME208
</option>
</div>
<div>
</select> <br>
<label for="machinenum">Select Your Machine Number:</label>
<label for="machinenum">1 - 15 </label>
<input id="machinenum" name="machinenum" type="number" min="1" max="15" value="1" required><br>
</div>
Then it works fine the outcome is like this:
instead of being like this:
or even without the h4 then having all questions stick together.
why not like this?
<div id="room">
<div>
<label for="room">Select Your Room:</label>
<select id="room" name="room" required>
<option disabled selected value="">Choose a room</option>
<option value="S308">S308</option>
<option value="S324">S324</option>
<option value="L2">L2</option>
<option value="ME201">ME201</option>
<option value="ME208">ME208</option>
</div>
...
</div>
You can use CSS for this:
your-selector-with-heading-and-input {
display: inline-block
}
jsFiddle: https://jsfiddle.net/sxLyox0e/
And you also should use label for the select heading and style the font size via CSS

Force selection options to one line

<select id="Semester">
<option value="Fall">Fall</option>
<option value="Spring">Spring</option>
<option value="Summer">Summer</option>
</select>
<select id="Year">
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
</select>
<p>
<input class="submit" value="Submit" type="submit" />
</p>
I have this code, which, on StackOverflow is on one line (except for the button). On our CMS, however, each select element shows up on a different line like this:
What can I do to force these all on to one line?
Add display: inline-block to all your elements to make them display in one line:
<select id="Semester" style="display: inline-block;">
<option value="Fall">Fall</option>
<option value="Spring">Spring</option>
<option value="Summer">Summer</option>
</select>
<select id="Year" style="display: inline-block;">
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
</select>
<p style="display: inline-block;">
<input class="submit" value="Submit" type="submit" />
</p>
To me, the best solution is also display: inline-block.
However, if you don't have access to the html template files on your CMS, you can try to insert the following on your .css file:
#Semester, #Year, #Year + p { display: inline-block;}
If it still doesn't work, try adding !important just before the last ;

Better way to clean <label for= > with many options?

I have this with many options on it, i have nearly 30, i would love to know if another way can be used to make him more readable ?
Thank you.
<p>
<label for="subject">subject :</label>
<select id="subject" name="subject">
<option value=""></option>
<option value=""></option>
<option value=""></option>
<option value=""></option>
<option value=""></option>
<option value=""></option>
<option value=""></option>
<option value=""></option>
<option value=""></option>
<option value=""></option>
</select>
</p>
According to the HTML5, the closing tag for the element is optional if it's followed by another option tag, or if it's the last element of the element.
An option element’s end tag may be omitted if the option element is
immediately followed by another option element, or if it is
immediately followed by an optgroup element, or if there is no more
content in the parent element.
So you can write it like this to be more readable
<p>
<label for="subject">subject :</label>
<select id="subject" name="subject">
<option value="">
<option value="">
<option value="">
<option value="">
<option value="">
<option value="">
<option value="">
<option value="">
<option value="">
<option value="">
</select>
</p>
As far as I know this is also true for HTML 4.