Following is the CkEditor I am trying to automate on my website:
CKEditor
I have automated clicking through the Bold, Italics, Subscript and Superscript buttons. However, the dropdown menu for Font color or Text style show up blank on the DOM as follows:
DOM for CKEditor
As you can notice, the span underneath the combo box element is empty. Thus any of the text color options available in the combo box do not show up on the DOM. How to automate clicking through various different text colors?
The issue is that at least this dropdown is inside an iframe. You have to switch context into that iframe before you can select something in the dropdown. The code below is working for me.
driver.findElement(By.cssSelector("a[title='Formatting Styles']")).click();
driver.switchTo().frame("cke_72_frame");
driver.findElement(By.cssSelector("a[title='Borderless Table']")).click();
Related
I am trying to build a text editor for my application using react quill. My requirement is to build a sentence template and in that template, there will be some HTML controls like some free texts and some dropdown options. Is it possible to build an editor like this using Quill. Basically, instead of toolbars, I want that toolbar like options in the text editor area.
Eg:
Template 1 - I have {select option} brothers
Template 2 - My name is {input box}
In the first template, the number is a selectable item, and in the second example, the name is a free text. There are some validations on these items. that need to cover separately.
Is it possible to fulfil this requirement using Quill editor?
The text in my popups is unselectable. I am able to close popups via click, etc., but when hovering the pointer over the text, the pointer remains as the hand icon, and never changes into the I-beam text selection icon. I've tried adding the popups a few different ways, to no avail:
//with visgl/react-mapbox-gl:
<Popup latitude={0.0} longitude={0.0}>this text is unselectable</Popup>
//via the regular api:
new MapboxGL.Popup()
.setLngLat([0.0, 0.0])
.setHtml(<h1>this text is also unselectable</h1>)
.addTo(map);
//this method that I copied from somewhere:
const placeholder = document.createElement('div');
ReactDOM.render(<h1>still unselectable</h1>, placeholder);
new MapboxGL.Popup()
.setDOMContent(placeholder)
.setLngLat()
.addTo(map);
In the Mapbox examples, their text is selectable. Any idea why mine isn't? Thanks.
I believe it will be difficult to get to the exact cause without a running example. Here are some ideas:
Use the same class they use in the examples for the content: mapboxgl-popup-content
Inspect the HTML and see if there isn't some sort of invisible layered element on top of your text. From the Browser DevTools, in the "Inspector" (Firefox) or "Elements" (Chrome) tab, by hovering the tags, you'll be able to see the bounding box of each rendered element like so:
Similar to the point before, check for the z-index CSS property in the rendered element to see if something isn't layering on top of your content
Lastly, there's also the cursor CSS property which you can use to force the cursor's appearance.
I have an image gallery which will be displayed as grid, but when i click on that image i need a dialogue box with that image and text fields with image title and author..
here is my code
https://codesandbox.io/s/github/logeshhy/Material-UI-ImageGallery
How about you save the selected tile instead of the boolean whether the dialog is open or not? And if you have a selected tile, you display the content within the dialog?
I modified your sandbox to reflect that: https://codesandbox.io/s/nameless-cache-75sns
I am using the CodenameOne blue theme ('shipped with' CodenameOne). I added checkboxes to a BoxLayout.Y container. When selecting one of the checkboxes, the checkbox is getting smaller and wider. I looked in the theme but I can't find out why.
Tested on Android 4.4
I added two images to show what happens. In the first, METAR was checked (and unchecked I guess), in the second, TAF was checked.
After checking another one, the size of the checkbox selected before is normal again.
There are 4 different state selected,unselected , pressed and disabled . And all styles of checkbox can be viewed in theme and as the screenshot there is blank in pressed and disabled style so generate the styles from theme.
When creating a xtype=radiogroup, the rendered element is using input type=button instead of input type=radio, I took the example from the doc, put it into a fiddle and the same happens. Tried this in Firefox and Chrome.
Why is not generating radio inputs, and how can I fix this ?
This is a correct behavior. ExtJs is using input type=button to render radiogroup. These inputs are styled with css to look like real radio buttons.
As #matt has mentioned the reason for using input type=button is that a radio box's color, border and background cannot be styled using CSS.
In your fiddle inputs look like plain buttons because jsfiddle didn't load ext-all.css properly. If you add ext-all.css manualy (like I did in this fiddle) you will see that all inputs appear as if they were radio buttons.