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
Related
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.
without using any framework I'm doing this kind of transition : http://mobiletest.me/iphone_5_emulator/#u=http://daysof.me/57/promo/debug.html
but I've problem dealing with the position. In my above demo, try to scroll down and click on the second item, you will see the flick. This is not css issue, this is position issue.
I tried my research, jquery mobile have their own build in thing call silentscroll, but how I address my problem because I'm not using any of those framework?
From what I understand, you are trying to fix the position of the Back button in the Test 3 part of your link, is that right ?
For that, you'll have to apply
{ position : fixed; }
on the Back element.
You might also want to set a height to the paragraph, along with
{ overflow : scroll;}
After spending some time on Google I came here to get solution.
What I have to do is to stop the text highlight of an input field(HTML form fields) when user select using cursor. If user tries to select whole or part of text in an input field cursor should stop at the index where user starts the mouse left click. Something like this
This should not
This should
User should be able to locate the cursor in any index user wants but user should not be able to highlight text. I am not pro-expert in CSS. Any solution for this? JS solution would be the usage of setSelectionRange or createTextRange.
Any best CSS or JS solution please.
I hope its not possible to stop the highlight, well instead you can apply a trick to change the background color of the highlight to the textfield background color.
When the background colors would be same then it would not be highlighted, here ios the code to achieve the same :-
View Demo at jsfiddle.
CSS
input::selection {
background: #fff;
}
input::-moz-selection {
background: #fff; /* Firefox lower versions */
}
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.
The page here (http://skergeth.net/slidingfooter/) contains a footer that slides up when you click on contact us. It then shows a contact form.
However in IE8 it slides up and the div containing the form stays white until it is hovered by the mouse.
I also tried the approach that the footer-div has overflow:hidden but since there are other elements inside the footer that should overflow (a menu that extends to the top), this is not an option.
I don't think it is a javascript but because I tried to delay the transition and made sure, the setVisible is called before it but with the same result.
I hope I made myself clear.
Thanks for all your answers!
add height:1% for the div which is after the div having the id="footercontent"
and it should work.(note: test it on all browsers)
this is happened when the IE didn't find a value for the height
Try adding a zoom:1 and/or position:relative to #footercontent or any of the elements inside of it. This forces IE to set a hasLayout and fixes lots of css issues.
I had the same issue. Solved it with:
#div-name * {
visibility: visible;
}
The div containing the form seems to load fine, since the "Contact Us" h1 is visible. It's the form specifically that isn't being displayed in IE8.
Try playing with the display properties of the form element.