So here's a screenshot of a working nicely modal:
But whenever I hover or select an element inside the modal form, it acts like this :
It gets the <embed> image whenever I highlight a text or select a radio button in the <form> modal . Tried some css like z-index and the likes but didn't work. Any help are appreciated.
Related
I'm using Minton Template (http://coderthemes.com/minton_2.1/blue_hori/index.html)
As you can see from the image above, the top of datepicker being blocked by the fixed header menu. It seems the datepicker not automatically being placed at the bottom of the input field.
This is the JS code that I used.
jQuery('#date-range').datepicker({
toggleActive: true
});
This happen on smaller screen. Bigger screen display correctly with the datepicker placed at the bottom of the input field as image below.
I dont want the menu blocks the datepicker. Please help.
check the z-index of datepicker. the z-index in the css should be greater for the datepicker class than for the menubar.
check this link for more information about z-index
I am having a popup page,in that page i have a select box, which i have applied jquery UI selectmenu. The problem is that the selectbox is in the bottom of the popup, and when it gets open, it get out of the popup limits.
My actual code (I cannot paste here my code for security reasons) has:
The z-index of of the select box is bigger compared to pop up container´s one, so its rendering on top of the pop up with no-issues.
The z-index for the select box is in relative with the pop up,not with the whole page,so the select box is hiding behind the pop-up when
the pop up height is less.
The desired behaviour is when popup height is less than needed to show all the select box. I need to show the select box without hiding.
If i did not apply jquery ui select menu, it´s working as expected.
Please find the below images for reference.
1.When having enoug popup size.
2.when popup size is less ,select is hiding.
3.What i am expecting.
Please suggest me what i can do to solve this.
Add CSS property overflow-y:visible on the main popup div:
This will make the inner content that is outside the main div top/bottom bounds to be rendered.
popupSelector {
overflow-y: visible;
}
Here is the documentation about overflow-y
I am using asp.net in VS 2013.
I want to display a pop up window when a user hovers over a div. I have 3 divs on the page and they are each a square of approx. 50x50. When the user brings their mouse over each one I want a different pop up box to appear.
I have been playing about with the hovermenuextender to achieve this but Im not getting anywhere as it needs a control as its target. IS there anyway to achieve this with an Ajax control?
thanks
You can try this:
step 1: Keep the three pop ups with different ids in your html with style = "display:none;position:absolute;top:50%;left:50%;". and a classname popup.
e.g.
<div class="popup" id="1" style = "display:none;position:absolute;top:50%;left:50%;"></div>
step 2: Give classname (respective ids of hidden divs) to your divs on which user will hover and a parent attribute to your divs.
e.g.
<div class="showdiv" parent="1"></div>
step 3: now write following code:
$(document).ready(function() {
$('.showdiv').mouseover(function() {
$(".popup").hide();
$("'#"+$(this).attr('parent')+"'").show();
});
});
try prop if attr doen't work.
when I click on a Bootstrap button, a csss is applied while the mouse button is clicked. This is also visible when the mouse button is hold pressed over a bootstrap button.
I need to change that style, but I can't find it using inspect element. How can I find what style is applied and how can I change it?
I had this problem the other week. If you're using chrome, open inspect element, code highlight the button, right click, select Force Element State, select :focus. This will show you the CSS code that you need to alter.
Having an issue with this myself until I applied the style to .btn-default:active:focus
I have a "split button" from extjs much like the "Menu Button" demo on the extjs demo page at http://dev.sencha.com/deploy/ext-4.1.0-gpl/examples/kitchensink/index.html#basic-toolbar. The button has a drop-down arrow on the right side that is a css-background image on a parent tag. When the right side is clicked a menu will drop down with additional selections for the button action. I can click the button or the em but in both cases the menu will not drop down.
I've also tried sending both the button and em javascript events in different orders ( mousedown, mouseup, click, etc) still I can only trigger the main button and cannot get the drop down menu to appear.
Somehow I need to place a mouse click precisely on that background image to get the menu to appear. Would there be a way for watir-webdriver to click at an arbitrary position in the browser? Assuming, of course, that I could get watir-webdriver to give me the current coordinates of the button or em. Or is there some other way to trigger the drop down?
I posted a similar inquiry on the google watir forum, but still have no solution. Thanks for any help that can be provided.
Try this, works like a charm:
b.em(:class, "x-btn-split x-btn-split-right").button(:class, "x-btn-center").send_keys :down
If you are just trying to expand the menu and are not specifically testing the 'click' event, you can send the down key instead:
browser.div(:id, 'splitbutton-1022').send_keys :down
This worked for the sample site on Firefox. I did not try any other browsers.