I have one issue in multiple selection box. I have a container of fixed size inside the container I am writing a multiple selection box.
The option values has long descriptive data. So I need to give overflow-x : auto to select any data and scroll horizontally to read the content .
when I select any data and try to scroll horizontally,to read the whole content, the other part of information which should be visible is not visible(which was not visible as we need to scroll).
Please paste this sample code and select any data and try to horizontally scroll and you see the information is partially selected.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My Application</title>
<style type="text/css">
.test{
width:300px;
}
select{
width: 100%;
overflow-x: scroll;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js" charset="utf-8"></script>
</head>
<body>
<div class="test">
<select name="myMultipleTest" id="myMultipleTest" multiple="multiple">
<option value="A101">This is a sample long text which contains some information</option>
<option value="A102">This is a sample long text which contains some information, which might contain some information which is long in description</option></select>
</div></body>
</html>
here it's working
.test {
width: 300px;
}
select {
width: 200px;
}
select option {
width: 100%;
overflow-x: auto;
}
<div class="test">
<select name="myMultipleTest" id="myMultipleTest" multiple="multiple">
<option value="A101">This is a sample long text which contains some information</option>
<option value="A102">This is a sample long text which contains some information, which might contain some information which is long in description</option>
</select>
</div>
I guess your problem was that the select box didn't have any fixed width and you was changing the select's overflow-x instead of options'
anyway I suggest you to use some library to make tooltips for more info instead of putting a long inside of a option , I'd prefer hint.css
Related
I use select element with fixed width. However, when I have option element nested in select, which has quite long text, then, when this option is being selected, it does not get full background-width (I want the background to be 100%) and also the text is hidden.
Here is the example with the last option being hidden.
.x {
width: 200px;
overflow-x: auto;
}
<select class="x" size="4">
<option class="y" selected>xyz</option>
<option class="y" selected>xyz</option>
<option class="y" selected>xyz</option>
<option class="y" selected>xyzxyzxyzxyzxyzxyzxyzxyzxyzxyzxyz</option>
</select>
You can see the full width using a single css property . Please add a class to solve the issue :
.y{
width: fit-content;
}
Using this style, you could see that the background color gets filled to the full width.
I have a div with some content that gets hide after 5 seconds but below it, I have a drop-down with some options. So what happens when the select box is open and at the same time the div gets hidden, the options box remains in the same place and doesn't shift upwards with the select box.
Creating a custom drop-down is not an option. As well as making the above div absolute or fixed. Making the drop-down blur is also not an option. Can someone tell me if this default behaviour can be somehow changed?
The client does not agree for a custom solution.
The client does not want the above div to float or position absolute or fixed. He wants the same setup but this thing fixed.
Closing the select box or using blur() is also not that the client wants.
<!DOCTYPE html>
<html>
<script
src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
<body>
<div class='war'>SOME RANDOM CODE which gets hidden after 5 seconds. Make sure to open the drop down</div>
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<script>
setTimeout(function(){ $(".war").hide(); }, 3000);
</script>
</body>
</html>
How about this workaround:
- When the select menu is clicked, it gets a size attribute that is as big as all its containing option elements so that it moves with the element in the window, as it disappears.
- If you add some css styling it does not become apparent to the user that the size of the selection element has changed while he/she is in the process of selecting an option.
- Unfortunately the standard arrow styling is different, depending on the browser. My solution looks best in chrome but not optimal in firefox for example - so further browser specific optimization should be added.
Here is the corresponding code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>example</title>
<style>
#box {
width: 100px;
height: 100px;
border: 1px solid black;
}
#options {
overflow: hidden;
}
#first::after {
content: " ⯆ ";
font-size: 10px;
}
</style>
</head>
<body>
<div id="box"></div>
<select name="selectionarea" id="options" onclick="makeBoxDisappear();expandSelect()" onfocusout="minimizeSelect()">
<option value="option1" id="first">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
<option value="option4">option4</option>
<option value="option5">option5</option>
</select>
<script>
function makeBoxDisappear() {
setTimeout(() => document.getElementById("box").style.display = "none", 1000);
}
function expandSelect() {
document.getElementById("options").size="5";
}
function minimizeSelect() {
document.getElementById("options").size="1";
}
</script>
</body>
</html>
I have many <option>. One of them has a long text and I want to split it into two lines but when I click on that (to get the text via JavaScript) it should act as a single line .
give your li links display:inline-block style
<li><a style="display:inline-block" href="#somewhere">line1<br>line2</a></li>
i find out the solution this code works fine in Firefox :-
<style>
#wgtmsr{
width:50px;
}
#wgtmsr option{
width:50px;
}
#wgmstr {
max-width: 40px;
min-width: 40px;
width: 50px !important;
}
</style>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
</HEAD>
<BODY>
<select name="wgtmsr" id="wgtmsr">
<option value="value1">value1</option>
<option value="value2">value2</option>
<option value="value3">value3</option>
<option value="value4">value4 ton</option>
<option value="value5">value5</option>
<option id="wgtmsr" value="ounce">Ounce111111111111111111111111111</option>
</select>
</BODY>
</HTML>
I am new to web-designing styles and css. I read that usage of tables for layout is a bad practice. Hence I tried to create this layout using <br\> , div and float.
Problem :
Once, <br\> is applied, I can't render the upper part, (similar to once \n is printed in console, we cant go to the upper line).
So, could any one provide an alternative way of designing the page, without using <table> and <br> tags.
Looks like a perfect example usage of a grid system.
Without using a grid system, you can just use float: left for each of the div and it should be OK.
Here is simple example for doing so,
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>StackOverFlow</title>
<style type="text/css">
.content{
width:150px;
height:100px;
border:1px solid blue;
}
.content .text{
display:block;
border:1px solid red;
}
</style>
</head>
<body>
<div class="content">
<div class="text">
text here
</div>
<div class="text">
another text here
</div>
<div class="text">
yet another text here
</div>
</div>
</body>
</html>
Code Explanation
What i did is wrap text div inside content parent div and assign fixed width and height to parent div.
Now for child div i just used display:block and see the result. You do not need to use <br/> display:block; will do it for you.
Now what is the meaning of display:block; so it just tell browser to allow that particular DOM to take whole width of the parent div.
By adding css to DIV's you can get some great layouts (i.e the three column style you're looking for here) , try this aticle to get you started:
http://www.htmlgoodies.com/beyond/css/article.php/3642151/CSS-Layouts-Without-Tables.htm
I have a buch of multiple select boxes and I wanted to line them up in a line across the page. I thought I could do this with the help of divs, but for some reason I am running into trouble. Each select is being stretched across the entire width of the page even though I specified in the css that I didn't want that. Why is this happening?
Also, I am giving each select a title by just putting text on top of it. Is there a better way to make a title?
HTML
<div class='bold'>
<div id="parameters">
<div class="section">Program<br> <select multiple="multiple" name="program">
<option value="SGS">SGS</option>
</select>
</div>
<div class="section">School <br><select multiple="multiple" name="school">
<option value="FLH">FLH</option>
<option value="MID">MID</option>
<option value="SUN">SUN</option>
<option value="MNC">MNC</option>
</select>
</div>
<div class="section">Term <br><select multiple="multiple" name="term">
<option value="Fall 2011">Fall 2011</option>
<option value="Late Fall 2011">Late Fall 2011</option>
</select>
</div>
<div class="section">Extension<br> <select multiple="multiple" name="ext">
<option>Something...</option>
</select>
</div>
</div>
</div>
CSS
#parameters{width:100%
height:150px;
border-style:solid;
border-width:2px;
border-color:grey;}
.section{width:50px;}
Divs are block elements so will stack on top of each other by default. If you want them to sit next to each other you will need to float them.
.section{
float: left;
}
JSFiddle
You can try:
.section {
width: 50px;
display: inline-block
}
This is an alternative to float to a degree. It may suit your needs better, but it's difficult to say. display: inline-block comes with rendering drawbacks, as does float of course.
I prefer it sometimes - A lot of people jump at float like it's the only choice, but it can be a real pain too.
JSFiddle sample using display rather than float
As you can see, it preserves your border without using a clearfix, whereas float breaks the border.
edit: If you choose to use float, a good method of making the border wrap around the contained elements is to add overflow: auto to #parameters, as shown in the fiddle below:
Float fiddle with clearfix
I changed your html code a bit in order to use labels in the "tittle" of each select tag.
You can view here: http://jsfiddle.net/SmRzL/4/
In regards to how to align, your elements you need to float each section:
.section{
float: left;
padding: 10px;
}
In regards, to adding a title to each section personally I would do something along the lines of this:
<span class="title">Term </span>
.title {
display:block;
font: bold 1em "Arial Narrow", "Franklin Gothic Medium", Arial;
}
See this fiddle for reference: http://jsfiddle.net/8rQXD/