I am not a designer but I am with a task to implement a functionality. I have to develop a working UI where a user can enter values in text box inside grid. While entering these values the user should have reference to a value which is different for each textbox in a grid. I therefore want to design a textbox where the user while entering the values gets to see the reference value then and there. can anyone suggest me a good design to solve this problem.
What I have thought of is that having a custom textbox with a part of left top of textbox as a uneditable label while the other area of textbox is editable to enter values.
so as seen in image , the top left is where I will show the value to be referred , while the white space is a textbox for user to enter the values.
If the proposed solution by me is a good one then how do I implement it? or any other solution anyone can suggest?
There are 2 methods.
You can use the reference label in absolute position and place it on the textbox with an equal amount of padding ( width of the reference label ) from the left.
You can use :before tag and apply it directly to the textbox. Give :before tag position absolute and textbox position relative.
Related
I am using VMenu component from vuetify and inside it is another vuetify component VDatePicker. The functionality is such that when I click a text field, the calender(VDatePicker) is seen. The VDatePicker component appears normally always under the text field, provided there is enough space under the field until the end of the screen.
But now the problem is that the text field is positioned such that there is little space between it and the end of the screen, so the DatePicker tries to adjest itself and pushes itself a little above and hence it hides the field underneath (snap shot attached).
The question is that How can I shift it such that when such a case occurs where there is little space between field and end of screen then it should position itself at the top of the filed and not on it.
I assume you want to shift it to the side?
You can use nude-right="300px" in the v-menuto nudge the Datepicker 300px to the right
Sample:
https://codepen.io/j3n50m4t/pen/xxZzVLG
Hopefully, that title makes sense to what's occurring.
I have a CodeSandox here for you all to have a look.
I have a div that gets hidden when a user focuses on an input.
When this occurs (for me at least), The input goes to the top of the parent div and but the browser suggested input element (in this case, email address) sticks to where the element used to be.
Is it possible to adjust the suggestion element in any way so that it follows the position of the input?
CSS:
Put input and suggestion box in container, then set position of suggestion box relatively or absolutely to container.
JS:
Calculate position of input then set position of suggestion box using that data.
all. I'm a beginner trying to create my own website.
For an input field, I want the text to appear behind horizontal lines. To achieve this, I created a container div element with many sub divs each two pixels high with a bottom border of one pixel, then placed the container div in front of the input field.
The problem is that when hovering over the input field, the cursor only changes into the "text" style cursor in the small area at the very left edge of the input field not covered by the horizontal lines created by the sub div elements.
What I would like to happen, and I fear I may need Javascript, is to have the cursor, when hovering over the container div's horizontal lines, turn into the "text" cursor and when clicked for the focus to activate within the input field.
I hope my question isn't confusing. Thank you in advance.
Add this CSS to your div with horizontal lines:
pointer-events: none;
This indicates that your div element should not become the target of mouse events, effectively letting them "pass through" it.
For more information, see the MDN article on pointer-events.
Assuming that I'm understanding your question, you do need to use JavaScript. Using jQuery you can do the following:
$('.horizontalLines').click(function() {
$('.inputField').focus();
});
This just makes it so that clicking one div will select the text input box.
Sorry if this is a pain the ass, but I could really use some help here:
http://dev.rjlacount.com/treinaAronson-form/
The contact form can be seen by clicking the "Contact" button on the top left. I'm using the jqTransform jQuery plugin to style it. It's hidden initially with display:none; applied to the div with the ID "panel", and slid in with the following:
$("#flip").click(function(e){
e.preventDefault();
$("#panel").slideToggle("3000");
});
With this setup, the contact form isn't displaying the current value of the select box inside its field. If I instead remove the display:none; rule for the panel div from my CSS, and hide the form after the page has loaded with:
$("#panel").hide();
The form display correctly. Does anybody know how I can make this work and avoid the flash of an open panel I get if I hide it with jQuery after the page loads?
Thanks so much for any advice. Please let me know if I can provide any more information.
The problem is, jqtransform is setting width for a label (currently visible value in a transformed select) to match the width of original select.
If the original select (or its parent) has display:none set, and it doesn't have any css width specified, the result of .width() on that element is zero.
You can in fact check (using firebug or google chrome dev tools), that it's not that contact form isn't displaying the current value of the select element, but rather displaying it with a width equal to zero.
The easiest solution in your case, is to set (in your css file) fixed width for the selects that are part of a contact form. That way, even though they will be hidden at first, the jqtransform will set correct width for label. For example:
/* css declaration */
#change-form select {
width: 390px;
}
Side note: there are of course other ways to make it work, including tweaking the jqtransform script to fit your specific use case. Part of the script related to setting mentioned width of a label starts on line 289.
I have two text fields on top of one another. The one on top the user types into. The one behind it auto-completes out words with a light gray font. It works great, until you're up against the edge of the text field on top. How can I scroll the bottom text field along with the top to keep their text perfectly overlaid?
Thanks in advance.
So, the problem is that the user types until it fills all the space in the textbox, keeps typing, top textbox scrolls, but text on the bottom textbox doesn't?
If that's the case, i didn't try it, but I think it could be solved by handling cursor position in the bottom textbox. That can be done by using the function setSelectionRange. To set it to the end:
ctrl.setSelectionRange(ctrl.value.length, ctrl.value.length);.
Other way to move the cursor to the end of the textbox is by, first, setting focus on the control and, second, assigning it's value.