I would like to allow my content editors to center-align content. To this aim, I want to add a DIV button to Draftail which wraps its children in a div with the centered class. The rendered result should be something like:
<div class"centered">Hello <h2>there</h2></div>
I'm able to create a new DIV block element in Draftail using BlockFeature and BlockElementHandler, but this block element cannot nest other block elements such as H2, so it's not generic enough.
Can someone post an example that shows how this is done?
ps I tried to adapt the 'stock' EntityFeature example, but this example is not that well documented (imho). I was unable to simplify it to do just the thing I need.
Related
After setting up the storybook-tailwind-dark-mode add-on for Storybook (by following these steps), my component is no longer displaying correctly in dark-mode in the Canvas view. The component displays correctly while in Document view and other components are displaying correctly in canvas view, so not every component has this issue.
The elements are visible for a split second before the page goes blank. When inspecting the page, I can see all of the elements are there, but they are just not visible.
The only difference to the HTML seems to be the dark class added to the body element.
Any ideas as to why the elements are no longer displayed would be greatly appreciated ⚡️
I've inspected the elements to see what could be causing the elements to not be displayed. I was expecting to see a change to display:none or an element that is in front of the other elements, causing them to be hidden, but it seems the only change is the dark class being added to body.
I've also looked at ./storybook/preview.js and ./storybook/main.js for anything suspicious but I haven't found anything that looks out of place.
There was a modal <div> that had a dark:bg-gray-800 class that was being overlayed over all of the other elements.
The modal was correctly set in light mode to show and hide according to when the modal was open/closed, but this conditional was not applied for dark mode, so the modal was always open, and hiding the other elements.
I am using the Quill editor (via ngx-quill) to give my user the ability to edit documents. When the documents are displayed I show them like this:
<div [innerHTML]="doc.text"></div>
This works reliably, but the styling of the content of the div tag is quite different from what you see in the Quill editor window. What I want to do is apply the Quill content stylesheet to my div tag, but I haven't been able to find any document to do that. Does anyone here know how to do that?
I know one alternative is to invoke a Quill editor in read-only mode and without a tool-bar. That's my fall-back but I would prefer not to do that.
I was facing the same issue. Some inline styles are displayed, but the styles applied from the Quill.js class are not applied. post-content is class of div containing the content:
let content=document.querySelector('.post-content')
content.innerHTML=content.innerText
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
Designing a React application, what I want is having the title of a Card or Paper on the top border with some indention from left side, like this:
I searched a lot and couldn't find a generic way to do so. Should I create a customised component or there's way for this?
I don't know exactly what you want it to look like, but you can achieve something like that by using the fieldset and legend elements.
It might look like this:
<fieldset>
<legend>Current</legend>
// Content within border.
</fieldset>
Result:
This approach is used by Material-UI for the "Outlined" variant of TextField (demo here). The code that handles this aspect is the NotchedOutline component (source here).
You can also fairly easily do something yourself via a position attribute to move a title element up over the border. This would actually allow you to use one of those material-ui components to provide most of the styles, and then just move the title on to the border.
Checkout this Codepen for an examples: https://codepen.io/codingmatty/pen/bOXKpZ
I want to apply something like this
a:visited{background-color:#0F0;}
to all <a> tags, if at least one of them has been clicked.
I know how to do it using JavaScript, but is there a pure CSS version?
I doesn't have to be <a> or :visited, I just want to highlight all occurrences with a certain tag or class if just one of them gets selected/hovered.
I'm not too clear on the effect you want, and why you want it, but there's no way to do this with CSS, you're stuck using javascript :(
As I understand, you want to style all <a> tags if one has been hovered or clicked? Why not just make that the default style, it will probably only take 2 seconds until that happens.