Is there a a way to hide the arrow in a standard dropdown select fieldset?
Fiddle link
I have an autocomplete system where you fill in the organisation number of a company and it finds the info based on a database. I'd like to have the select box, but without the arrow..
I need it to do this as it's a double function form, either you can fill in your ORG nr or just manually type it in, pretty simple, probably used all over the internet.
Thanks :)
Kyle,
Usually autocomplete systems use input text elements instead of a select element. This creates what you are trying to achieve. Google is a classic example of this.
If you want, you can take a look at jQuery's autocomplete plugin to get another example and some code ideas, or whatever. http://docs.jquery.com/Plugins/Autocomplete
It's not easy, but you can fake it by putting a button above a Select that has its size property set to a value greater than 0.
Have the Select hidden and positioned absolutely under the button. Clicking the button shows the list. Selecting the list changes the text on the button and re-hides the Select.
This way you need a text box, because you cannot type anything in <select> tag.
And put an onclick event to this box to open autocomplete with all possible values.
Related
Is there a way to separate a label from a textbox?
I found that this is supposed to work :
Select the controls
Arrange tab
Remove layout
But the remove layout button is always disabled... Probably cause it's only when you use the tabular or stacked option
Is there any other way to do it, or am I doing something wrong?
Please, don't tell me that I have to copy/paste the label and delete the original one.
Thank you
To move a text box (or any control) independently from its label is to click and drag the control using the large grey box in the top left of the control. This allows you complete freedom of placement between the control and label.
Remove layout only works if you use either tabular or stacked.
Use the square at the top right to move them separately, and select only the label to delete the label.
Just select the one you want to use only, and it can be controlled separately. Also: width, height, top, and left in the properties tab are your friends.
Use remove layout if you can select that little cross.
Use the align buttons to tidy up this mess.
I do not use Access much so I find letting Access create all the labels is quicker, when separating the label from the data I use the following method.
Click the label
Ctrl+C to copy label
Delete to remove label
Ctrl+V to paste label back to form
Drag from top left to roughly the location you want
If you have a column of labels then do the cut/copy/paste/reposition for all of them first, then use the method Fionnuala shows to align all to right.
If the labels are too far to the left or right the use the cursor keys to move.
Again use Fionnuala method to align the rows.
If you find they do not align as expected then Ctrl+Z to step back.
If Remove Layout is not available, select Stacked, which will make Remove Layout available, and then select Remove Layout.
This also keeps things where they are, so less re-aligning afterwards.
I think I've got the right answer. Select the Label and send click "Send to back" on Arrange Tab. Label will be detached. Now move it anywhere as required.
I am looking for a way where multi select list box should display as normal single select combobox but on click it should work as list box allowing multi selct like show below as in spreadsheet. I am looking for solution in CSS HTML and javascript rather than in Jquery.
You can't make an element behave like that, but you can make something that looks like a dropdown list, and when the user clicks on it, display a popup/popout with a select that allows multiselect (has the size property set).
you can do this by jQuery MultiSelect and here is the demo
This is kind of out there, but I have no idea what this type of control is even called, so I can't look up any examples on how to implement it.
The control has two text areas side by side with arrows in between them. If a user selects a value or multiple values in one text area and then clicks the arrow that points to the other text area, the selected values will jump over to the other text area and be removed from the initial text area.
What is this called?
There's no one control. Usually it's implemented with 2 <SELECT> list boxes, the arrows have javascript functions attached to take the selected values in the one listbox and move them to the other. Ie. delete from one box and add to the other.
Take a look at this example I found via Google:
http://blog.jeremymartin.name/2008/02/easy-multi-select-transfer-with-jquery.html
I'm replacing a winforms screen with an html interface, which needs to run in IE7/8/9 & Firefox.
Currently on one of our screens we have a funky input control that looks like this:
The user can enter a value in one of three ways:
the user can just type into the box
the user can select an item from the dropdown
the user can tick the ‘Unopened’ checkbox, which effectively chooses a known item we call ‘Unopened’
There’s also a search button ‘…’ but that’s another control which is easy to implement.
I want to rebuild this using html and am wondering how to replace the Unopened function, as (a) and (b) are easy enough. I’m thinking I’ll just put a separate Unopened checkbox beneath the INPUT box instead of inside it, because that would be simpler. But if there's a way to keep it looking like it does now I’d probably prefer that. Is that possible?
UPDATE:
Secondary question: if I do put the checkbox inside the INPUT box using CSS am I just bringing upon myself a lot of pain with quirky little usability or layout problems or is this something that's not too unusual or hard to do?
You can put it in a separate div and then position it with CSS to look like it's inside of the input field:
#checkbox {
position: relative;
top: -10px;
}
or whatever values you need...
Regarding your second question: Nope. It's not actually "inside" the box, it just appears that way. All the functionality will still be there. =)
http://jsfiddle.net/BdBTy/ is a quick example of how this works.
place the check right below the textbox in html
in css for the checkbox put
margin-top:-25px;
(or whatever exact number you need)
I would like to know if there is anyway I can divide an item on two line inside a select box.
One of the values of my select box is two long to fit in my div.
No, this is impossible.
You can consider using a javascript widget, like this jQuery plug-in.
May I also say that what you are trying to do is uncommon - even in desktop applications users don't expect to find wrapped text in a drop-down box and may get confused if they do see one. It would be better to try a different control or try to limit the text.
It is impossible, but if it's simply a matter of avoiding that the element gets too wide you could just define a width (eg. <select style="width:100px;">). This will cause text to be cut off when the box is "closed", but as soon as you "open" it the entire text will be shown.
As far as I know, it's impossible. However, I'd look at jQuery for options. Specifically, there are jQuery plugins that allow for select box customization.
Select Box Factory 2.0 is one option. I believe it extends the functionality of the select box to allow text wrapping among other features.
You could simple add an option disabled in blank
<option disabled selected value> </option>
Divide an item that's on two lines in a select box.
Why would you want to do that? If you're using a JQuery plugin to make HTML display inside an option tag, then there would be no reason to ask this question, I don't think, as you would be already able to add a tag.
What you can do to make spacing in select elements, is to create a blank option tag, that has an empty value and name. You would then have to validate the submission to detect if a blank value was submitted.
If you are really in need, a hacky solution would be to take a screenshot of the text on two lines, and use images in your select box.
http://www.jquerybyexample.net/2012/05/how-to-add-images-in-dropdown-list.html
Just be sure to set the alt tag on the images for accessibility.