We Keep Coding

How to shift Vuetify component ```VDatePicker``` according to the position of its parent component on the screen

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

Creating focus on element that's behind a different element

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.

How to create a custom textbox with a label and value?

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.

Hide part view text in overflow hidden

I making bookReader and one page will fit to user viewport. For this approach i make div
<div id="book">Long text...</div>
with
#book {
overflow: hidden
}
Then i provide to scroll this element only with buttons next and prev. When user click next button it will scroll like this
$('#next').on('click',function(){
$('#book').scrollTop($('#book').scrollTop() + $('#book').height());
});
But i have problem. That some times user will see part of text-line. How can i check every page is that last text-line is shown broken, and hide them if him is broken. I don't want to change content. I need a function that will check every page if that contains that part text and if this have that part text, hide him by making on the top element that should hide that.
DEMO: I show in red color what i need find and hide.
http://jsfiddle.net/lvivgeorge/jd7mum6c/3/
DEMO 2: It can contains anything (header tags, img, <code> , etc.)
http://jsfiddle.net/lvivgeorge/jd7mum6c/12/
P.S. Make all the same line-height is not solution. Change content styles is not solution too.

IMHO You should set fixed line-height of each text line, and set container height fixed as a multiple height of each textline. This should helps
Check this out: http://jsfiddle.net/jd7mum6c/5/

Show exact same selection range in two text fields

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.