This question already has answers here:
Are Multi-line Options in Html Select Tags Possible?
(8 answers)
Closed 8 years ago.
I need to build a multi-line select control. All the <option>'s where text is wider than 300px (for example) become to have the necessary lines to don't exceed the mentioned limit.
These images speak for themselves:
First of all I tried this, but does not work.
<html>
<head>
<style>
option{
width: 100px;
white-space: wrap;
}
</style>
</head>
<body>
<select>
<option>I'm short</option>
<option>I'm medium text</option>
<option>I'm a very very very very very very very very very long text</option>
</select>
</body>
</html>
I'm using bootstrap framework and I thought that maybe I could use dropdown control to obtain the result. I've tried setting the max-width CSS property, but it does not work too...
How can I achieve this?
<option> tags have limited styling capabilities and do not support formatting.
You can use a JavaScript-based alternative. There are plenty out there if you look around.
Related
I'm trying to make a personalized :hover for <option> elements in <select> selector by mouseover eventListener. But for some reasons mouseover does not fired when the mouse has been on the option element.
var selectOne = document.querySelector('.select__first');
var selectTwo = document.querySelector('.select__second');
for (var key in selectOne) {
if (key % 2 == 0)
selectOne[key].classList.add('select__option-blue');
}
for (var key in selectTwo) {
if (key % 2 == 0)
selectTwo[key].classList.add('select__option-blue');
}
function onMouseOver(e) {
var target = event.target;
var options = event.target.closest('option');
if (!options) return;
console.log(options);
}
document.addEventListener( 'mouseover', onMouseOver);
.select__element > p, span {
display: inline-block;
}
.select {
-webkit-appearance: listbox;
cursor: pointer;
}
.select__option-blue {
background-color: lightblue;
}
option {
cursor: pointer;
}
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
</style>
</head>
<body>
<div class="select-row">
<div class="select__element">
<p>The last element: </p><span class="select__element-last"></span>
</div>
<select class="select select__first">
<option value="birds" hidden>Select an element...</option>
<option value="birds">One</option>
<option value="fishes">Two</option>
<option value="animals">Three</option>
<option value="dino">Four</option>
<option value="simplest">Five</option>
</select>
<select class="select select__second">
<option value="birds" hidden>Select an element...</option>
<option value="ploto">One</option>
<option value="trava">Two</option>
<option value="vseyad">Three</option>
</select>
</div>
<script>
</script>
</body>
</html>
Apparently, Chrome doesn't support mouse events on option elements, unless you specify the size attribute to the select element.
Mouse over option in select tag
jQuery-Select list option hover
onMouseMove doesn't fire over <option> element in Chrome
So, yes, the situation around option is a very sad. :(... As say #Veehmot - we cannot bind mouseevents on option elements of selector select normaly in pure JS.
But! In view of the fact that I did not find any clear information on stackoverflow about what exactly can be done to stylize options and select selector on pure JavaScript, I want to share my success in this direction and give the community 2 ways of solving this problem based on pure JavaScript.
I found a really two working ways for coders, who also like me will face the necessity of styling option and select on pure JavaScript without the use of frameworks (jQuery, etc.)
The first way (not direct and harder) is to make the select element with options in the form of <div> selector with <buttons> or <li> list inside. The introdusing of how it work you can see on my CodePen project-page below:
https://codepen.io/Sviatoslav_FrontEnd/pen/PQbBYQ
The second way is to connect one interesting JS library, created for options and select styling. This is really what we want, and it base on pure JavaScript with CSS. BUT! I want to admit, that this script is not mine. I found it on the open-source blog resource. So I'm not responsible for its support or help in setting up. All at your own peril and risk.
I place here a link to this JS library and support files solely to help the same as I - lovers a pure javascript.
Link: https://di-grand.com/blog?download=1&kccpid=3338&kcccount=https://di-grand.com/blog/wp-content/uploads/2016/10/select.rar
I have a page with a set of drop-downs. Changing those drop-downs generates a small snippet of code corresponding to the selection.
The sample below is a how all bindings have been written at the moment.
jQuery('#one').on('change', function(event){
var selectedElement = $(this).find('option:selected');
jQuery('#code-section').text("You have selected " + selectedElement.text());
});
.code-section {
width: 100px;
height: 50px;
margin-top: 20px;
border: 1px solid red;
padding: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="block" class="block-one">
<select name="one" id="one">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<div class="code-section" id="code-section">
//This is the code snippet area
</div>
</div>
I now have to add another set to the same page. It will behave exactly like the first set but will generate a different kind of snippet.
All the javascript bindings for the 1st set are coupled with element ids. How do I add another dropdown with its own bindings with minimal duplication of code?
Some of the ways I have been trying are:
Move all bindings from ids to classes - The issues with this method is that almost all operations have been done using absolute ids and corresponding attributes of those element. This will require a massive rewrite of all the JS.
Rewrite the Javascript to make it operate on parameters instead of direct bindings - This theoretically would be the right approach but will require a lot of time which is something I cannot afford at the moment.
Duplicate both markup and JS for the dropdown and change all ids in the copy - Not ideal but will the get the job done.
Is there is any other way to look at this?
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Is there a way to style part of an input field’s value?
Is there any way to change one word color of placeholder?
For example, if we have a form input whose placeholder text is "explore the world, e.g. paris, france", can CSS, jQuery, HTML5, or any other method possible allow us to bold only partial text within the form input to render as: "explore the world, e.g. paris, france".
I am only aware of methods that allow us to bold the entire placeholder text, rendering entirely as "explore the world, e.g. paris, france".
By illustration, here is the goal of this question:
There is no way to accomplish this with a standard input[type=text] field. You can try to overlay HTML but some browsers handle input fields as controls and will not behave as regular html dom elements.
The approach I would use is something like this:
<html>
<head>
<style type="text/css">
div.input { border:1px solid #aaa; width:300px; }
</style>
</head>
<body>
<div contenteditable="true" class="input"><strong>explore the world,</strong> e.g. paris, france</div>
</body>
</html>
Hope this helps. Good luck.
I have a div with id="div_register". I want to set its width dynamically in JavaScript.
I am using this following code:
getElementById('div_register').style.width=500;
but this line of code isn't working.
I also tried using the units px like the following, still no luck:
getElementById('div_register').style.width='500px';
and
getElementById('div_register').style.width='500';
and
getElementById('div_register').style.width=500px;
but none of this code is working for me.
I don't know what's going wrong.
I am using Mozilla Firefox.
EDIT
<html>
<head>
<title>Untitled</title>
<script>
function show_update_profile() {
document.getElementById('black_fade').style.display='block';
//document.getElementById.('div_register').style.left=((window.innerWidth)-500)/20;
document.getElementById('div_register').style.height= "500px";
document.getElementById('div_register').style.width= '500px';
//alert('kutta');
document.getElementById('div_register').style.display='block';
document.getElementById('register_flag').value= 1;
document.getElementById('physical_flag').value= 0;
document.getElementById('cultural_flag').value= 0;
document.getElementById('professional_flag').value= 0;
document.getElementById('lifestyle_flag').value= 0;
document.getElementById('hobby_flag').value= 0;
//alert(window.innerWidth);
}
</script>
<style>
.white_content {
display:none;
}
</style>
</head>
<body>
<div id="main">
<input type="button" onclick="javascript:show_update_profile();" id="show" name="show" value="show"/>
</div>
<div id="div_register">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
welcome
</td>
</tr>
</table>
</div>
</body>
</html>
The properties you're using may not work in Firefox, Chrome, and other non-IE browsers. To make this work in all browsers, I also suggest adding the following:
document.getElementById('div_register').setAttribute("style","width:500px");
For cross-compatibility, you will still need to use the property. Order may also matter. For instance, in my code, when setting style properties with JavaScript, I set the style attribute first, then I set the properties:
document.getElementById("mydiv").setAttribute("style","display:block;cursor:pointer;cursor:hand;");
document.getElementById("mydiv").style.display = "block";
document.getElementById("mydiv").style.cursor = "hand";
Thus, the most cross-browser compatible example for you would be:
document.getElementById('div_register').setAttribute("style","display:block;width:500px");
document.getElementById('div_register').style.width='500px';
I also want to point out that a much easier method of managing styles is to use a CSS class selector and put your styles in external CSS files. Not only will your code be much more maintainable, but you'll actually make friends with your Web designers!
document.getElementById("div_register").setAttribute("class","wide");
.wide {
display:block;
width:500px;
}
.hide {
display:none;
}
.narrow {
display:block;
width:100px;
}
Now, I can easily just add and remove a class attribute, one single property, instead of calling multiple properties. In addition, when your Web designer wants to change the definition of what it means to be wide, he or she does not need to go poking around in your beautifully maintained JavaScript code. Your JavaScript code remains untouched, yet the theme of your application can be easily customized.
This technique follows the rule of separating your content (HTML) from your behavior (JavaScript), and your presentation (CSS).
These are several ways to apply style to an element. Try any one of the examples below:
1. document.getElementById('div_register').className = 'wide';
/* CSS */ .wide{width:500px;}
2. document.getElementById('div_register').setAttribute('class','wide');
3. document.getElementById('div_register').style.width = '500px';
Fix the typos in your code (document is spelled wrong on lines 3 & 4 of your function, and change the onclick event handler to read: onclick="show_update_profile()" and you'll be fine. #jmort's advice is good - simply set up 2 css classes that you switch between in javascript - it'll make things easier.
You might also check out element.addEventListener for assigning event handlers to your elements.
The onclick attribute of a button takes a string of JavaScript, not an href like you provided. Just remove the "javascript:" part.
If you remove the javascript: prefix and remove the parts for the unknown ids like 'black_fade' from your javascript code, this should work in firefox
Condensed example:
<html>
<head>
<script type="text/javascript">
function show_update_profile() {
document.getElementById('div_register').style.height= "500px";
document.getElementById('div_register').style.width= "500px";
document.getElementById('div_register').style.display='block';
return true;
}
</script>
<style>
/* just to show dimensions of div */
#div_register
{
background-color: #cfc;
}
</style>
</head>
<body>
<div id="main">
<input type="button" onclick="show_update_profile();" value="show"/>
</div>
<div id="div_register">
<table>
<tr>
<td>
welcome
</td>
</tr>
</table>
</div>
</body>
</html>
Be careful of span!
myspan.styles.width='100px' doesn't want to work.
Change the span to a div.
You have to use document. The Document interface represents any web page loaded in the browser and serves as an entry point into the web page's content,
know more
document.getElementById('div_register').style.width='500px';
i was trying to change the width of a particular optional value under <select> attribute, something like this. But i am getting troubled as in IE the select box along with the option value gets expanded. Is there any simple way to make the <option> only to expand and not the <select> box.. mainly in IE ....
<select width="123" style="width: 123px;">...</select>
Seems to be quite compatible solution working with all newer browsers.
This can be done using the jQuery plugin found at
http://www.jainaewen.com/files/javascript/jquery/ie-select-style/#demo
The plugin is very simple to use. Here's a breakdown of some full working code.
HTML
<select id="test" >
<option>choose on</option>
<option>aaaaaaaaaaaaaaaaaaaaaaa</option>
<option>bbbbbbbbbbbbbbbbbbbbbbb</option>
<option>ccccccccccccccccccccccc</option>
<option>ddddddddddddddddddddddd</option>
</select>
CSS
#test{
width:100px;
border:1px solid red;
}
jQuery
Don't forget to include the jQuery Js file and this plugins' Js file.
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://files.jainaewen.com/files/javascript/jquery/ie-select-style/jquery.ie-select-style.min.js"></script>
Then put the following right after:
<script type="text/javascript">
$('#test').ieSelectStyle();
</script>
All this should go before the closing </body> tag
Check working example at http://jsfiddle.net/7Vv8u/2/
Styling <select> items is a bit of a problem since there is no cross-browser solution without using JavaScript - since each browser handles rendering of the form controls differently.
I would suggest using an <ul> element and applying the functionality/design to act more like a <select> element - using JavaScript
this article may help you with this