I need to click on div with pseudo element ::after.
Div itself is invisible, but after hovering on another element, the div::after append icon at the end of div which I need to click.
How can I create a selector for div::after?
I can perform click in console with jQuery, but I can't do it in testcafe, because I get
Error:'actionElementIsInvisibleError'.
Use selector .more-options::after is not working
You have to simulate yourself the hovering effect by 'patching' the style of the targeted div. In other words you have to make it visible by calling a client function that will change the div style. You may find a code sample here : tc-client-function-set-style-attribute
Related
I am trying to write a react component to render a menu, but I need to use just CSS for controlling the visibility, but I have a problem that I cannot able to solve.
I have set a hover on the element with the class menu, then it set the child called wrapSubMenu to visible but it is setting all menu's children. I pretend to Do it just on the first wrapSubMenu of the menu.
Playground here
They have the same class style, you cannot complete that on this way.
Try to do it with state toggling on hover, instead of css
I'm using the react-slick library to make a slider, and I would like to change active slides and the slide which is at the top of the slider. For example, if I click on a button in the current page, I want the current slide at the top of the slider to change.
Do you know if is it possible to do this properly with this library?
I found a solution on the react-slick github (https://github.com/akiran/react-slick/issues/738), which consists of creating a ref to the slideshow and setting the focus via this.slider.innerSlider.list.focus(). However, this does not work very well, because the element I want is not at the very top of the slider. For example, if I set the focus on the second to last slide, the first element of my list is not accessible any more via the arrows.
If this.slider is a ref to your Slick component, you can force the slideshow to show a slide by calling the method slickGoTo() with the index of the desired slide. For example, to show the second slide:
this.slider.current.slickGoTo(1);
For details on the methods that you can call using your ref, see: react-slick API: Methods.
The documentation for the react-bootstrap overlay trigger says that the overlay prop can be an element or text. However, whenever I pass it something other than a "Tooltip" component it doesn't work. In fact, if you modify their code example on the website linked below to be just a div instead of a Tooltip or a string, it doesn't work on their site either. Does it have to be passed a Tooltip?
https://react-bootstrap.github.io/components.html#tooltips-overlay-trigger
Easiest thing to pass is a Tooltip or a Popover.
You could also pass it something else, but then you have to wrap it in an Overlay instead of an OverlayTrigger. See the react-bootstrap docs on Custom Overlays for more specific examples.
I have a basic plunker which shows the problem: http://plnkr.co/edit/L3rhEIdrnTucG0M7yGhO?p=preview. When you click on the button the first element is shown/hidden with a bouncy animation. This works fine, but the problem is that the items below it just jump to the new place which is quite ugly and jarring.
So, if you click on the button, item One slides away and then a second later items Two and Three jump up. I'd like everything to slide up while item One slides away. How can this be done? Do I need to drop animate.css and write my own custom animations? How would that work? (I don't really care about the bouncy animation, it should just slide away / back into view.)
The current bouncy animation that you have is using a transform property which isn't going to effect sibling elements. If you did something like animate the margin, other elements would move as well.
You could either change the animation method on your target element, or leave it and additionally animate the target's adjacent sibling. I modified your Plunker demonstrating the latter:
http://plnkr.co/edit/hMaPgRDYC8Z0EeCs6SHQ?p=preview
*This also demonstrations using transitions on the hide and keyframes on the show.
To select the adjacent sibling next to the one being effected by ng-hide, make a css selector with the + symbol:
.item.ng-hide-add + .item {...}
Then by transitioning/animating margin-top, the remaining item elements will get pushed around too.
I'm trying to use D3 inside of an angular-ui tab. Specifically, a clickable canvas where I can add and drag little black circles. If I put the svg element inside the tab, no clicks get registered. If I put the svg element outside of the tabset, the clicks seem to take and my callbacks executed. Is there something I'm forgetting to do on the angular-ui side of things?