Im creating a drag test for a marker into google maps on react, like the follows
cy.get('[style="position: absolute; left: 0px; top: 0px; z-index: 106; width: 100%;"] > div > img')
.move({ deltaX:20, deltaY: 20}).wait(600)
in Linux works fine but in macos, isn't work maybe im choosing bad the selector ? Please help me
Greetings
Related
I’m trying to make my brand image larger at the top of the page, but Webflow is not allowing me. Anyone know how to fix this? Also does anyone know how to change the gradient colors in this template?
https://preview.webflow.com/preview/dan-the-baking-man-upgraded?utm_medium=preview_link&utm_source=designer&utm_content=dan-the-baking-man-upgraded&preview=d77107e0ddecb4c38fc4f9487940ab48&workflow=preview
To increase the size of your logo to say 100x100px, try
.brand-image {
height: 100px;
max-height: 100px;
width: 100px;
}
If this doesn't work, test if you need to add !important; to each of the properties.
For the colours, it looks to me that they are set in 2 places
body {
background-color: var(--swatch_879f80bc);
}
and
.background-primary-image{
background-image: url(https://uploads-ssl.webflow.com/6144c33b7975b17710abbbef/6144c33b7975b10e34abbc4e_Background%20Gradient.png);
}
I've a big problem. Google Search Console doesn't correctly fetch my website. The website consist of five sections with parameters:
width: 100%;
height: 100vh;
min-height: 100%;
Google bot renders only first section, what about the others?
Add a max-height to 1080px for the element which has height: 100vh and leave min-height blank.
For example:
.element {
height: 100vh;
max-height: 1080px;
}
For us, this solved the issue within Google Search Console Visual renderer.
I suspect this is a case of not really understanding CSS3 animations, but in general, I've found Angular animation very frustrating to learn.
So to start, I have a plunker for this: http://plnkr.co/edit/VSIxhDy1qaVuF0j0pxjT?p=preview
As I'm required to show code to get a plunker link going, here's the CSS in the test situation:
#wrapper {
position: relative;
overflow: hidden;
}
#wrapper, form, #wrapper > div {
height: 400px;
width: 400px;
}
#wrapper > * {
transition: 10s linear all;
}
form {
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
form.ng-hide-add-active {
top: -100%;
}
#wrapper > div {
position: absolute;
left: 0;
top: 0;
background: #66F;
}
#wrapper.ng-hide.ng-hide-remove-active {
top: 100%;
}
I have a situation where I want to make a form, and if it successfully submits, I want the form to slide up with the success message sliding up under it. The problem is that while I can get the form to slide away, the under div just appears. In fact, it works better on plunker than on my code, where it starts up shown, goes away via animation, then just reappears when the form is submitted. No idea why that's the case, but in general, Angular animations are frustrating me. I tried looking up examples, and many mention using ng-animate="'name'" to create custom classes, but that doesn't seem to work for me. Likewise, the documentation mentions an ng-hide-remove class, but I never see that getting applied.
Is there any advantage to using CSS3 transitions over creating custom animations with the animate module, and just using jQuery to do it? I understand keyframes may be the biggest advantage? This is just making it really hard to do stuff that seems relatively easy in jQuery working...
The examples using ng-animate="'name'" is for versions earlier than Angular 1.2.
For these kind of animations, vision two states for each involved element.
Visible
Hidden
You have a wrapper. Inside the wrapper you have two elements involved in the animation - a form and a div with a message. Now set up your HTML and CSS with the visible state in mind. When visible, both the form and the div should be visible inside the container.
Here is an example based on yours (changed it some for clarity):
#wrapper {
position: absolute;
height: 200px;
width: 200px;
top: 100px;
left: 100px;
border: 1px solid silver;
}
#form {
position: absolute;
top: 0;
height: 100%;
width: 100%;
background-color: #DDFEFF;
transition: all 1s ease-in-out;
}
#submitted {
position: absolute;
top: 0;
height: 100%;
width: 100%;
background-color: gold;
transition: all 1s ease-in-out;
}
Both the form and the div are as large as the wrapper and aligned to the wrappers top, which means in this state they will overlap. This is not a problem however, since they shouldn't be visible at the same time.
Now define their hidden states.
For example, the form should when hidden be located above the wrapper:
#form.ng-hide {
top: -100%;
}
And the div should when hidden be located below the wrapper:
#submitted.ng-hide {
top: 100%;
}
That should be enough but minor tweaks might be needed depending on what AngularJS version you are using.
Demo: http://plnkr.co/edit/FDJFHSaLXdoCK7oyVi7b?p=preview
Am facing one issue in sencha touch along with phonegap. Having 'xtype:panel' with property 'cls:topImgPanel' under scss code where am setting background Image for panel.
Login.js
{
xtype : 'panel',
cls : 'topImgPanel',
height : '15%',
docked : 'top',
}
login.scss
.topImgPanel {
background-image: url("img/TOP_Printer_HD1.png") !important;
background-size: 100% 100% !important;
height: 100%;
width: 100%;
}
This code seems to running in browsers, but when using phonegap to run it in my android emulator. Images are not visible anymore.
Not able to figure out what's wrong.
After some struggle, if found this link
As mentioned, we need to put images into root folder, so in my login.scss :
.topImgPanel {
background-image: url("../../TOP_Printer_HD1.png") !important; //changed path
background-size: 100% 100% !important;
height: 100%;
width: 100%;
}
and i copied my image files under the directory 'phonegap/www'.
Hope this helps !!
Your image url is not ok.
In fact, the url you provide to the path of your image should be related to the location of your CSS file. So you need to change it according to your Android Phone.
My Drupal site takes a while to load, and while it's loading everything looks messed up. So I opted for a simple solution that it's using a loading screen with this kind of solution:
Display a loading bar before the entire page is loaded .
But I have no idea how to implement it in Drupal 7.
Can you please help me with some clues?
Thank you!
.ajax-progress-throbber {
z-index: 1500;
border: 2px solid #C0C0C0;
position: fixed;
background: url('loader.gif') no-repeat center #ccc !important;
opacity:0.6;
padding:20px;
border-radius:10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
width:100%;
min-width: 100%;
height:100%;
left:0;
top:0;
}
I have done like this by putting this code in my css file and used a loader.gif image which is laso in the same folder where my css file is and use that class . Basically i use loader image every time i trigger ajax. You can use it as you want with according to different class.