I am looking a multi columns combo box by using HTML + JavaScript only. Is there any example or library available? As I came across some solution, they are in ASP.NET, but not pure HTML + JavaScript.
Here is an example but it is implemented using Java Swing.
If jQuery is an option, here's a plugin that looks like it can deliver this:
Jquery Multi Column Selectbox
Flexbox is probably the best one I have ever used with jQuery, with paging and JSON support :
http://flexbox.codeplex.com/
It's a real combo box, as it displays the results by typing. It can be easily restyled through the CSS.
Eg. to modify the rows :
.ffb .content .row {
border-bottom: 1px solid #828790;
clear: both;
color: #000000;
height: 20px;
}
border-bottom may be removed to get rid of lines between rows.
http://dev.sencha.com/deploy/dev/examples/form/combos.html Shows ExtJS's combo box. Their combo box can be customized with template to be used for rendering each entry. All you'd need to do is to specify a template that contains a few spans with a set width.
If you're willing to use ExtJS (not free), write it in here, and I'll show you an example
Related
I want a select dropdown like this i want the options to have some bigger width and select should only show the symbol and as well change the baackground color on hover i re search and get to know that we cant give style to option 🤦♀️ its very sad to know but luckily i got this link https://www.w3schools.com/howto/tryit.asp?filename=tryhow_custom_select here they showed what i wanted at least most of except the selected symbol show only anyway what i am getting also cool
.select-selected {
background-color: DodgerBlue;
}
They are targeting a class selected select i look on the html but i cant find it but the color is changing perfectly they reason i cant copy it exactly i am using react styled component i need to understand and write a easy solution for this that link tutorial is so difficult anyone can explain or suggest me alternative of select
Note I am using react style component
export const NavbarSelect = styled.select`
border: none;
border-radius: 0px;
option{
background: #FFF;
width:114px;
height:45px;
}
`
i want to style the option here
You can't style all parts of the standard HTML select list box.
Is it crucial to have the classic HTML select element underlying?
If not, you could easily create your own ul. In react, you have to show the custom ul on click on the actual selected option (e. g. an input-like field). When clicked on an option, just set this option for your component and pass it to your form component.
I have a textarea field, which I would like to automatically adjust according to number of lines used (i.e., if the user enters one line, the field height will show that line only, but if the user enters a long text, the field will show all the lines of text).
I would like it to happen dynamically, without using scroll (overflow).
I would appreciate help with this.
thanks
There are lots of ideas given in the answers pointed to in the comments so if you absolutely have to stick with textarea perhaps some of them will solve your problem but they require Javascript and I notice you have tagged CSS not JS.
So, have you considered using a contenteditable div instead? This will automatically resize depending on content without needing Javascript:
.input {
overflow: auto;
border: 1px solid black;
}
<div class="input" contenteditable></div>
I know there are a couple of examples out there but I was not able to accomplish what I need. I need get the text from a field and transform it to an outlining view like the one in word. Can this be accomplished? Just anything would help. I need to create this on ServiceNow if you need more info but anything in CSS/Javascript/HTML can be transferred to it. Thanks!
In MS Word Outline view means outlining a selection : In css we can achieve that as following :
HTML :
<div>This is some text to be outlined</div>
CSS :
::selection {
color: white;
background: blue;
}
I have a simple city drop down in which I want to use multiple selection option.
For it I used multiple attribute of select tag but by using it the drop down got converted to a box shaped area with multiple select option.
What I want is that drop down look should stay as it is i.e. on clicking the select drop down should appear and in it I can use multiple cities with CTRL and whose values then will be used in a php script.
I have seen multiple jquery scripts for it but I wanted to know if is there some simple way to do this instead of using any jquery or something.
Is there any simpler method to do so???
please try below code:
<select id="city" multiple="multiple" name="city[]">
<option>hawaii</option>
<option>michigan</option>
<option>southfield</option>
</select>
and you get multiple city value in php
echo $_POST['city'];
HTML dropdown is made that way, does not allow multiple selections but you can use some jquery plugin like this for doing that and it is much simpler than creating such plugin yourself.
In principle, the size=1 attribute in select would tell the browser to show just one option, and you could use scripting to change the value of the size property to create a dropdown effect. In practice, it mostly does not work.
A more practical approach is to set the height of the select element initially and then change the height on mouseover and when focused. Unfortunately browser behavior is not consistent in sizing the element, but the results might be tolerable. Note that the font size in options is reduced by default, so sizing is a bit tricky. In this example I simply set the font size to 100% so that the em unit can be used in a simple manner:
option { height: 1.3em; font-size: 100%; }
select { height: 1.3em; font-size: 100%; }
select:hover, select:focus { height: 13em; }
The result is a little too small on some browsers and a little too large on some, and IE does not show any arrow to indicate that it’s really a dropdown.
I'm writing some JavaScript to implement placeholder text in browsers that don't have it.
I've successfully styled the placeholder text in Chrome 9 and Fx 4b11 using the following style rules:
::-webkit-input-placeholder { color: #969696 !important; }
input:-moz-placeholder { color: #969696 !important; }
Now I want my JavaScript to retrieve this data from the stylesheet in browsers that don't understand those rules so I can manually style the placeholder text.
Does anyone know how I can do that in YUI3? I tried:
YUI().use('node',function(Y) {
var phColor = Y.all('::-webkit-input-placeholder').getStyle('color');
});
Unfortunately this just returns:
"undefined: not bound to any nodes { _query="input::-webkit-input-placeholder", _nodes=}"
Anyone know how I can do this? Or if it's possible?
If you aren't sold on using YUI exclusively (or are willing to harvest the jQuery code from a plugin and convert it to a YUI3 module) this jQuery plugin does exactly what you are trying to do: https://github.com/mathiasbynens/Placeholder-jQuery-Plugin
I've used it in a production environment and it works great even as far back as IE6 :)