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)
Related
I use a Hide/Show .js script that hides some checkboxes and on the right side there is the search field when I click to hide it I want to expand.
Ex.
Before hidding:
Before hidding Image
After hidding I want the search field to be expanded 100%
After hidding Image
I searched for 2 days something and can't find a way to make it expand I use the bTemplate engine to store the HTML code.
Did you try changing the CSS properties through the "setAttribute" method of the elements in question through Javascript? Basically, the code you used to "hide some of the checkboxes" in the first place is pretty much like how you'd write the code to do the other things you're looking to do.
In other words, When you want the checkboxes out of view and the text entry box centered, as in your second reference pic, you could have the Javascript code written through the "setAttribute" method so that when a particular event happens, the css "display" parameter for the check boxes could be set to "hidden", the size of the text entry box can be increased, and the css "position" parameter for the text entry box can be set to have it centered, etc.
That is, of course if I understand your issue correctly. Can you provide the code you are using? I'm sure me or someone else could clarify things more if we could see what you have written.
Hope that helps at least a little! :)
This seems dissimilar to the accordion functionality provided by bootstrap.
To give an example, let's take the "how to format" info starting me in the face right now. I'd want it so that it only displays up to X pixels deep, and then stops until expanded. So it might look like:
and then, once expanded,
I happen to be using bootstrap. Is there a bootstrap native or other HTML solution to create this kind of experience?
Assume that the thing that I only want to show of is a single element, such as an image, rather than a series of text. This means a solution like min-height:50px and overflow:hidden won't work, as it will simply hide the entire image rather than part of it.
We can use jQuery .height() to accomplish knowing the rendered height of an element then making conditional modifications.
Documentation and examples for jQuery .height().
A combination of height and overflow in combination with the toggling of a class should work here.
http://jsfiddle.net/fm56je84/1/
The click of the arrow is bound to the following function:
function expandCollapse() {
$("#container").toggleClass("expanded");
$(".glyphicon").toggleClass("glyphicon-arrow-down"); // Flip Arrow
}
How do I create a label that is editable? I am displaying data in a table, and would like to provide in place editing for the displayed data. What CSS styles can I use for it?
Put a text input box there and make its background same as the background of its container and put 0 border on it and use same font style and color as other items in the table
What CSS styles can I use for it ?
It's not really a matter of CSS (unless your questions pertains solely to achieving a particular style).
You can:
Make all table cells contain inputs. This has the (potentially significant) downside that all data will be submitted to the server if the form is POSTed. I wouldn't recommend this approach unless the table is small or you are never fully submitting the whole page.
Change the label to an input on click. When the form is submitted, this value will now be a part of the request.
Change the label to an input in response to an action elsewhere (e.g. focusing the row, clicking an edit button next to the row, etc.)
Set contenteditable="true" on the element. This allows rich formatting but also requires that you keep track of the changes the user has made; they will not be submitted to the server unless they are placed into a form field.
You will likely want/need a snippet of JavaScript to change the label to an input (#2 and #3). You will need JavaScript to get the data to the server with approach #4.
I want to make phone based textbox in my html-page. someone have idea how I can do this.
Thanks
This is the plugin I always use for that. works great:
http://digitalbush.com/projects/masked-input-plugin/
for your example:
jQuery(function($){
$(".phone").mask("(999) 999-9999",{placeholder:" "});
});
Depending on how complicated you want to get, you could use a simple background for the input box with the () and - inserted (albeit much smaller in order to fit).
A more complicated approach would be to have 3 textboxes, for each part of the number. Then put the () and - between the boxes. This may frustrate users though, as they will have to tab or click between the boxes.
You could modify the above method to include some javascript, which automatically changes focus from one textbox to another after the user finishes typing. This may work better, but will cause problems if the user ever tries to go back and edit their number.
Another way you could do this is to insert the () and - automatically with javascript after the number is changed. This may work better than the above method, but will still cause some issues with editing. It may also look strange before the numbers are added in.
It is worth noting that there is no real international standard for phone numbers. You might get into trouble if someone tries to use a country code or something on your site. If I were you I would just stick to the classic text box, ugly as it may be.
You can try something like this
<input type="text" id="phoneNumber" placeholder="(123)123-1234" />
CSS
#phoneNumber{
margin:1em;
border:2px solid #ffc600;
font-size:2em;
border-radius:10px;
padding:.25em;
}
Example: http://jsfiddle.net/RgTTt/
NB: Placeholder will, in all modern browsers, render whatever you like in the input box and then disappear once the user starts to type in the box. If you want the parentheses - () - to be colored, then you will need to use some spans and a custom piece of javascript.
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.