I want to do a print page with absolute divs. It works in Chrome and IE but not working in Firefox. I am testing with print preview. Firefox shows only one page.
<div style="position: absolute; top: 1327px; left: 182px; border: 3px solid rgb(0, 0, 0); width: 150px; height: 100px;"></div>
<div style="position: absolute; top: 2005px; left: 462px; border: 3px solid rgb(0, 0, 0); width: 150px; height: 100px;"></div>
<div style="position: absolute; top: 77px; left: 322px; border: 3px solid rgb(0, 0, 0); width: 150px; height: 100px;"></div>
How can i solve this problem?
Related
<div class="icheckbox_minimal" style="position: relative;">
<input class="checkbox" type="checkbox" value="1" name="order[terms]"
id="order_terms" style="position: absolute; top: -20%; left: -20%;
display: block; width: 140%; height: 140%; margin: 0px; padding: 0px;
background: rgb(255, 255, 255); border: 0px; opacity: 0;">
<ins class="iCheck-helper" style="position: absolute; top: -20%; left: -20%;
display: block; width: 140%; height: 140%; margin: 0px; padding: 0px;
background: rgb(255, 255, 255); border: 0px; opacity: 0;">
</ins>
</div>
How can I set the checkbox for this element?
I tried the following
browser.checkbox(:class => "iCheck-helper").when_present.set
browser.div(:class => "icheckbox_minimal").fire_event :click
you can click on ins tag to set the check box value as given below.
if !browser.checkbox(id: 'order_terms').set? then
puts "not set"
browser.element(class: 'iCheck-helper').click
end
puts browser.checkbox(id: 'order_terms').set?
Try this
browser.checkbox(id: "order_terms").set
When you locate an element, that element has to be checkbox when you use the method checkbox but you are passing the locator of div to checkbox method.
I'm trying to put hexagons made with CSS around a circle. I already got the circle and the hexagons (they are stocked on top of each other), I just can't get the code of organizing them to work (it's on the CSS part of the code). http://imgur.com/Sv82DB0 (I'm aiming this effect).
$darkPrimary: #ffa000;
$primaryYellow: #ffc107;
$lightPrimaryColor: #ffecb3;
$darkGray: #212121;
$redOrange: #ff5722;
$lightGray: #757575;
$dividerColor: #bdbdbd;
// $rot // rotation for the current item
$nb-items: 4;
$angle: (360deg / $nb-items); // angle between two items
// $nb-items // number of item
$rot: 0;
$circle-size: 21.875em;
#mixin placingElements () {
#for $i from 1 through $nb-items {
.shapes__circle:nth-child(#{$i}) {
// Rotate the axis
rotate: ($rot * 1);
// Move the item from the center
translate: $circle-size / 2;
// Rotate the item back to its default position
rotate: ($rot * -1);
}
$rot: $rot+$angle;
}
//Increments the '$rot' variable for the next item
}
.shapes {
position: absolute;
display: block;
margin-left: 30px;
&__circle {
#include placingElements();
position: relative;
top: 60px;
border: 19px solid $primaryYellow;
border-radius: 50%;
box-shadow: 0 0 1px 0 rgb(255, 255, 255);
width: 350px;
height: 350px;
z-index: 1;
}
&__hexagon {
width: 120px;
height: 80px;
background: $redOrange;
position: absolute;
top: -50px;
left: 90px;
margin: 10px auto;
z-index: 2;
&::before {
content: "";
width: 0;
height: 0;
position: absolute;
top: -45px;
left: 0;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
border-bottom: 45px solid $redOrange;
}
&::after {
content: "";
width: 0;
height: 0;
position: absolute;
bottom: -45px;
left: 0;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
border-top: 45px solid $redOrange;
}
&--inside-img {
position: absolute;
height: 55px;
width: 55px;
left: 25%;
top: 32%;
}
&--inside-text {
position: absolute;
top: -14%;
left: 5%;
font-family: 'Overpass Mono', monospace;
font-size: 1rem;
color: $darkGray;
font-weight: 600;
}
}
}
<div class="shapes__circle">
<div class="shapes shapes__hexagon">
<p class="shapes__hexagon--inside-text">Ferramentas</p>
<img class="shapes__hexagon--inside-img" src="./assets/img/ferramentas.png" alt="">
</div>
<div class="shapes shapes__hexagon">
<p class="shapes__hexagon--inside-text">Ferramentas</p>
<img class="shapes__hexagon--inside-img" src="./assets/img/ferramentas.png" alt="">
</div>
<div class="shapes shapes__hexagon">
<p class="shapes__hexagon--inside-text">Ferramentas</p>
<img class="shapes__hexagon--inside-img" src="./assets/img/ferramentas.png" alt="">
</div>
<div class="shapes shapes__hexagon">
<p class="shapes__hexagon--inside-text">Ferramentas</p>
<img class="shapes__hexagon--inside-img" src="./assets/img/ferramentas.png" alt="">
</div>
</div>
<!-- __section-img--circle -->
I have my chart fiddle here. I want to make tooltip with an arrow. Can i do that in d3?attached fiddle of graph
css for the tooltip for now-
.hor_tooltip {
position: absolute;
width: 50px;
height: auto;
padding: 10px;
background-color: white;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
pointer-events: none;
display:none
You can add
.hor_tooltip:after {
left: 100%;
top: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(255, 255, 255, 0);
border-left-color: #ffffff;
border-width: 10px;
margin-top: -10px;
}
See https://jsfiddle.net/c74eoo2b/12/
i need to automate following functional flow using selenium webdriver
click on Upload button
select an image from local directory
an Edit image pop-up will appear with crop overlay and crop image button
click on Crop Image button to crop and submit the button
I could select an image using robot however I could not click on an Crop Image button which appears on Edit Image pop-up. please find HTML snippets of Edit Image pop as below
<div id="edt-img-popup" style="left: 193px; position: absolute; top: 1045px; z-index: 902; opacity: 1; display: block;">
<span class="button bClose"><span>X</span></span>
<div id="edited-img"><img style="display: none; visibility: hidden; width: 980px; height: 710px;" src="http://locallocation?img=mQzJ0jI8si.jpg" id="artistImgCrop" height="710.673224715647" width="980"><div class="jcrop-holder" style="width: 980px; height: 710px; position: relative; background-color: rgb(0, 0, 0);"><div style="position: absolute; z-index: 600; width: 980px; height: 653px; top: 0px; left: 0px;"><div style="width: 100%; height: 100%; z-index: 310; position: absolute; overflow: hidden;"><img style="border: medium none; visibility: visible; margin: 0px; padding: 0px; position: absolute; top: 0px; left: 0px; width: 980px; height: 710px;" src="locallocation?img=mQzJ0jI8si.jpg"><div class="jcrop-hline" style="position: absolute; opacity: 0.4;"></div><div class="jcrop-hline bottom" style="position: absolute; opacity: 0.4;"></div><div class="jcrop-vline right" style="position: absolute; opacity: 0.4;"></div><div class="jcrop-vline" style="position: absolute; opacity: 0.4;"></div><div style="cursor: move; position: absolute; z-index: 360;" class="jcrop-tracker"></div></div><div style="width: 100%; height: 100%; z-index: 320; display: block;"><div class="ord-n jcrop-dragbar" style="cursor: n-resize; position: absolute; z-index: 370;"></div><div class="ord-s jcrop-dragbar" style="cursor: s-resize; position: absolute; z-index: 371;"></div><div class="ord-e jcrop-dragbar" style="cursor: e-resize; position: absolute; z-index: 372;"></div><div class="ord-w jcrop-dragbar" style="cursor: w-resize; position: absolute; z-index: 373;"></div><div class="ord-n jcrop-handle" style="cursor: n-resize; position: absolute; z-index: 374; opacity: 0.5;"></div><div class="ord-s jcrop-handle" style="cursor: s-resize; position: absolute; z-index: 375; opacity: 0.5;"></div><div class="ord-e jcrop-handle" style="cursor: e-resize; position: absolute; z-index: 376; opacity: 0.5;"></div><div class="ord-w jcrop-handle" style="cursor: w-resize; position: absolute; z-index: 377; opacity: 0.5;"></div><div class="ord-nw jcrop-handle" style="cursor: nw-resize; position: absolute; z-index: 378; opacity: 0.5;"></div><div class="ord-ne jcrop-handle" style="cursor: ne-resize; position: absolute; z-index: 379; opacity: 0.5;"></div><div class="ord-se jcrop-handle" style="cursor: se-resize; position: absolute; z-index: 380; opacity: 0.5;"></div><div class="ord-sw jcrop-handle" style="cursor: sw-resize; position: absolute; z-index: 381; opacity: 0.5;"></div></div></div><div style="width: 984px; height: 714px; position: absolute; top: -2px; left: -2px; z-index: 290; cursor: crosshair;" class="jcrop-tracker"></div><input class="jcrop-keymgr" style="position: fixed; left: -120px; width: 12px;" type="radio"><img style="display: block; visibility: visible; width: 980px; height: 710px; border: medium none; margin: 0px; padding: 0px; position: absolute; top: 0px; left: 0px; opacity: 0.6;" src="http://locallocation?img=mQzJ0jI8si.jpg" height="710.673224715647" width="980"></div></div>
<!-- This is the form that our event handler fills -->
<form action="javascript:void(0);" method="post" id="img_crp_form">
<input value="0" id="x" name="image[x]" type="hidden">
<input value="0" id="y" name="image[y]" type="hidden">
<input value="980" id="w" name="image[w]" type="hidden">
<input value="653.3333333333334" id="h" name="image[h]" type="hidden">
<input value="980" id="maxW" name="image[maxW]" type="hidden">
<input value="710.673224715647" id="maxH" name="image[maxH]" type="hidden">
<input value="http://locallocation?img=mQzJ0jI8si.jpg" id="slctdImgUrl" name="image[url]" type="hidden">
<input id="cropImage" value="Crop Image" class="btn btn-large btn-inverse" type="submit">
</form>
I've tried following approaches but it did not work
1. switchTo frame
2. window handles
3. wait - implicit, explicit, ajax
any help would be very much appreciated.
Thanks.
I have to resize the buttons on the screen initial size of button 157*70px and required size on screen is 100*50px. It has to be compatible with IE8 where the background-size property is not working although this property works fine in FF.
HTML:
<div id="return_button">
<a class="new_return_button" name="PREVIOUS">Previous</a>
</div>
CSS:(Firfox)
.new_return_button{
background: url("images/previous.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
backgound-size: 100px 50px;
color: #FFFFFF;
cursor: pointer;
display: block;
height: 70px;
line-height: 70px;
width: 157px;
}
#return_button{
color: #FFFFFF;
font-weight: bold;
height: 70px;
left: 10px;
line-height: 70px;
margin: 0;
position: absolute;
text-align: center;
width: 157px;
}
This css works fine in Firefox with background-size property and shrinks the image of 157*70px to area of 100*50px but doesn't work in IE8.
Please suggest a solution to this issue
One way to solve this is to use another element. You probably need to tweak the margins of the <span> to have it working as desired. Also note that this does not guarantee a specific height, instead it will give you the correct aspect ratio for the scaled graphic.
<style>
#return_button {
position: relative;
width: 100px;
}
#return_button img {
max-width: 100%;
height: auto;
}
#return_button span {
position: absolute;
top: 50%;
margin-top: -5px;
left: 10px;
right: 10px;
text-align: center;
}
</style>
<div id="return_button">
<img src="images/previous.png" alt="Button graphic">
<span>Button label</span>
</div>