I am using react and have made a sidebar which is animated in and out of screen but absolute position and changing css right of div. Here is a sandbox for easy tweaking of code.
So when u click on blue box it should go out of screen by setting right to negative value and pink box should come out by setting right to 0. As you can see this is not working.
BUT
If you remove the whole useEffect code in popout.tsx then everything works as expected.
The useEffect code is responsible for focusing and blurring the text input on the sidebar depending on the isOpen state.
Thank You!
EDIT
If you want to see what is expected behavior please comment out the the whole useEffect in the file popout.tsx. That is the expected behavior pink box out input focused pink box gone input blurred.
The idea of whole thing is the that blue box would have click me text and pink box open due to that or using key bind. Both these action should focus on text input inside.
Some Extra Info
There is also a key bind if you press ctl + ~ the pink box comes out thats why i have to change the focus depending on isOpem state and not click events.
The problem is that, you need to use position: fixed instead of the position: absolute.
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.
In my project, there is a autocomplete search textbox. Whenever the user is typing something the suggestion box will appear just below the textbox. This suggestion box is hiding behind the screen.
I tried to get in front by applying largest possible z-index, still no use.
Here is the link to the site.
I am providing my site link because the jsfiddle is working fine.
For testing purpose, type co in the textbox and see how the suggestion box is visible.
search for this code and change 12 to 9 .. solve the problems
.edgefxContentContainer {
top: -16px;
z-index: 9;
}
change this div class style :
<div class="edgefxContentContainer pRelative">
Your .edgefxContentContainer contains a z-index of 12. This reveals some of the suggestion box parts. Suggest you search for z-index and debug it
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.