I'm trying to work out what is going on here. Please see the attached fiddle:
http://www.bootply.com/FoVksRcRLf
If you look at it in Chrome/Safari, and you should see the issue:
IE Edge and Firefox show it correctly.
I've looked in Firebug / Developer tools, and I just can't figure out where the gradient is coming from!
There also seems to be a couple of px margin being added into it (if you hover over "Directory", you will see the orange background goes all the way to the top of the bar - but this is not the case on the "Owners" dropdown)
I'm open to suggestions, as this is driving me up the wall :/
The style is coming from html [type=button] { -webkit-appearance: button; }.
Remove attribute type=buttom from a tag.
From www.w3.org
The type attribute, if present, gives the MIME type of the linked
resource. It is purely advisory. The value must be a valid MIME type.
So button is not even a proper value for type attribute of anchor element.
Related
I'm very new to Webflow. I am somewhat familiar with CSS and web design concepts.
I downloaded one of the clonable templates to use as a practice:
https://webflow.com/made-in-webflow/website/Spaces-Urbanistic
With this template, I try to replace the logo image on the upper left.
I have a colorful webpage logo and inside the designer, I see all the colors.
When I click on preview, the logo turns into a grayscale image.
Webflow has Effects option that I could enable, but it is currently set to off, for Logo image element as well as all parent nodes up to the body tag.
When I inspect the logo in chrome dev tools, the immediate parent has this CSS:
element.style {
filter: invert(100%)
grayscale(100%)
contrast(128%);
}
My question is, where do those filter parameters are stored in webflow interface, if not under Style->Effects->Filters? Is there any other place I don't yet know about where the above code can be injected?
Thank you,
edit-1: I just noticed this code on top of the main HTML file:
Still, doesn't help me to identify where this code comes from. Thank you,
Please, I don't know why but I can't click on this radio button.
I'm trying by xpath, css, id... but anything works.
Always I get the error: no such element: Unable to locate element
And I added an explicit wait, but it still not working.
Now, I'm trying it but not works as well:
WebElement radio = driver.findElement(By.xpath("//div[#class='form-inputs-container']/ul/li[3]/label"));
radio.click();
I need click on multiple destinations radio on this website:
https://www.turismocity.com.br/
Can you help me, please ?
RadioButton
It looks like your xpath is wrong Try with below xpath it will work
//form[#class="tc-form-full-flight"]//label[#for="tt1"]/following-sibling::div
For first radio button: //form[#class="tc-form-full-flight"]//label[#for="tt1"]/following-sibling::div
For second radio button: //form[#class="tc-form-full-flight"]//label[#for="tt2"]/following-sibling::div
For third radio button: //form[#class="tc-form-full-flight"]//label[#for="tt3"]/following-sibling::div
Hope this will be helpful!!!
This should work //input[#id='tt3'] or //input[#value='MultiDestino']
You can evaluate xpath in chrome console like this $x("//input[#value='MultiDestino']")
The xpath you have returned empty []
Locator is incorrect. More than that - even if it was valid, this way of finding elements is unreliable (you've used an element position - [3] in case of order change, locator will brake). I suggest css selector:
input[value='MultiDestino']
For locators, you should always start with something that is highly unlikely to change. Typically that's IDs, names, and various other custom attributes depending on the site. In this site's case, the three radio buttons you are looking at each have an ID.
Side note... sometimes sites/pages don't respect HTML standards that require the ID to be unique on the page so even if your desired element has an ID, always check to make sure it's unique on the page. In this case, the IDs are unique.
To click the multiple destinations radio button, you can use the code below.
driver.findElement(By.id("tt3")).click();
In some of your comments, it looks like Selenium might be having a hard time clicking on the INPUT itself and the LABEL is working. If that's the case, then you can change the locator slightly and use the code below
driver.findElement(By.cssSelector("#tt3 + label")).click();
In the CSS selector above, # means ID and + means next sibling. See the W3C docs for more info.
Whenever I click inside a tooltipdialog, this border shows up around it.
Is there an easy way to remove this?
EDIT: After trying in different browsers, it seems to affect only Chrome, the outline doesn't appear in Firefox or IE.
I faces the similar issue when i started working on Dojo. To fix this basically you need to add the following css for dijit's dijitTooltipDialog class
.dijitTooltipDialog {
outline : none
}
See this for example.
I recently stumbled upon this microsite from the Obama campaign:
http://www.barackobama.com/anniversary
Among the many cool features of this site is its dynamic header -- when you resize your browser window smaller, the "OBAMA * BIDEN" logo up top automatically floats to left side of the header and its width gets changed to 36px (thereby "hiding" the "OBAMA BIDEN" text).
How did the developers of this page achieve this effect? Is this javascript/jquery driven, or purely a CSS trick?
Ideas?
This question covers the window.resize event. You can do whatever you need in its handler.
Another option is to use media queries that allow you to change applied CSS once the browser window dimension changes (this is what the site you refer to does. It combines the style class changes with animations (use Chrome Developer Tools to see which styles get applied to the logo in both big and small browser dimensions)).
Web page contain a button with some text for example "Test". This button actually is a toolbar element. ( class ="tbButton" id="id",text="Test") and redirects to a certain table when press on it.
When try to use the following click methods
selenium.click("id");
selenium.doubleClick("id");
selenium.click("//*[text()='Test'and contains(#class, 'tbButton')] ");
the button does not react
Could enybody show an alternative methods that is able to resolve a problem
It's hard to know exactly what the problem is without knowing more about the actual contents of the page you are testing. Is there an example of the toolbar online somewhere?
With modern interfaces, locating elements with Selenium is not always an exact science. Here are a few suggestions:
With modern interfaces you often find that the DOM is being manipulated, so it is possible that the identifier you are using is no longer valid by the time you get to your click(). Use Firebug to check that you have the correct element.
Often it helps to click on the parent of the element, such as a div or the parent table cell. Again, use FireBug, to try some other elements near your toolbar button. Alternatively, Firebug sometimes reveals that the element contains other elements. You might have more luck changing the target to a contained element instead.
Sometimes you have to play around with some of the alternative actions. For instance, some controls respond to a mouseDown() followed by a mouseUp(), but not to a click(). Again you can often get hints from looking at the source with Firebug.