I'm using bootstrap 3 and am trying to imitate jQueryMobile's select option where you can replace the standard select textbar and arrows with just a button which toggles the opening of said select.
I don't want to use dropdowns either because they get hidden inside my nested divs (if you can make them appear at the topmost layer, then that's fine too).
So I'm wondering if there's a way to have a button as a stand-in for opening the select options.
Not totally sure on this, need a little more information. But you can create a button with:
<button type="button" onclick="alert('Message')">Button</button>
if that what you wanted?
This isn't exactly what you asked for but I did a search and found this plugin and I think if you were to experiment with this then you could come up with the desired effect. Give it a look over.
Theres a spot about a 1/3 of the way down the page which I think would help you decide if this would work.
Plugin: Bootstrap-Select
Related
I can not for the live of me figure out why the below code has a black rectangle in it, as far as I can tell its something left behind by the hidden option, but I've got no idea how to hide it or change its color.
What is this and how do we manipulate it?
<div>
<select>
<option hidden>Select flow slides</option>
</select>
</div>
Here is a codepen link where you can see this happen: https://codepen.io/Nick09/pen/NWGmJGy
And a link with the mystery rectangle that appears when clicking the select element: https://imgur.com/9rdbXkS
More image examples: https://imgur.com/a/MhYNPy8
Update: After someone in the comments suggested something I figured out that the problem is much simpler than I first thought. Mainly, whenever you click on a select without any options, you get this little black dropdown: https://imgur.com/ZfFn5DN.
Use style attribute to hide the entire option.
<option style="display:none">Select flow slides</option>
Or use disabled attribute to disable the option (remove hidden attribute)
<option disabled>Select flow slides</option>
So after some time invested in this and quite a bit of help from the community I've managed to come up with a fix.
Since the problem boils down to: on some machines it seems (managed to replicate it on someone else's PC/Windows) that a select element without any options will produce a black drop down on mouse down.
And you need a select element with no options because of different reasons, in my case it was because I was later removing what was inside of the aforementioned select element in order to add a custom drop down.
Then all you need to do is add a event listener that listens for a onmousedown event and do e.preventDefault() on it so that the default drop down list does not open at all.
Tested on all browsers with no issues!
End result: https://imgur.com/moYaFkO
Thank you for your suggestions guys!
I am trying to make a JQuery Mobile select menu button larger by changing the data-mini property from true to false on the fly. I am able to change the property, but the select menu does not redraw.
It works with a button, by using .buttonMarkup({mini: false}) (which redraws the button instantly), but as far as I know there is no equivalent for select menus.
I have tried .selectmenu("refresh") and .change() - neither redraws the select menu button.
Here is an illustration of the problem: http://jsfiddle.net/YYXuZ/
Does anyone have a solution?
Hey this works for me -
$('#testselectmenu').parent('div').addClass('ui-fullsize');
jsFiddle Demo
I noticed you won't need the $('#testselectmenu').selectmenu('refresh'); with this approach.
/Update
To play it safe I would do this (it does the same thing while removing the data-mini attribute and ui-mini class) -
$('#testselectmenu').parent('div').attr('data-mini', 'false').removeClass('ui-mini').addClass('ui-fullsize');
I think jQM should handle this automatically when you call a .selectmenu('refresh'), I'm not sure why it doesn't.
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 am using direction:rtl in a select element. It does exactly what I need which is:
expand the options to the left when dropdown is open
options text is right aligned
Question: Is there any way to force the arrow control to be on the right?
Reason why I need the select like this:
I need those because the dropdown is located on the right edge of a page and if I expand it to the right (as default), the options text won´t show up completely. The options text are very long.
I don't think there's good way to manipulate the control. If you want to customize, you should make your own.
Or, you can use something already made by someone like jQuery selectBox. You may can customize it.
I don't know if this is possible in your situation but if you can put direction:rtl on the whole page, the select will probably expand to the left, thus making your question a moot point.
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.