I have a contenteditable div that allows the users to tab over. the tab adds a margin-left inline style to the p tag like so
<p class="line" id="line-5" style="margin-left: 40px;">Text Here</p>
I allow the user to click a modal which open up the text inside a Quill editor. But the quill editor seems to remove the margin-left inline style so the tabs are not shown.
How can I get tabs to work in my contenteditable div so it translates over to quill editor?
Related
Ho to add alt attribute for the React coreUI CAvatar img?
We have the below code to display the image as an avatar in our application, but while doing the web accessibility test we get a Missing alternative text error for this image.
<CAvatar style={{backgroundColor:"#71c6a2"}} src='/assets/img/avatars/power.jpg' size="lg" />
So I tried to add alt text like below
<CAvatar style={{backgroundColor:"#71c6a2"}} src='/assets/img/avatars/power.jpg' size="lg" alt="power" />
but the alt text is applied for the outside div of the avatar.
How to add alt text for img attribute when using CAvatar?
here is the generated HTML for ref: <div class="avatar avatar-lg" alt="Yet-to-Start" style="background-color: rgb(113, 198, 162);"><img src="/assets/img/avatars/power.jpg" class="avatar-img"></div>
I'm trying to show navbar dropdown over the slick slider. it's only show when i style .slick-slider z-index negative value, but this is not right because i can't click inside slider.
You can use a className in your dropdown menu with attribute "z-index:1000".
For example..
<div className="dropdown-menu">...</div>
on your .css file
.dropdown-menu{
... //another attributes for your div and finally..
z-index:1000
}
I am using Material ui autocomplete in my React app.
With the PopperComponent prop and some custom css styling I made the popper full-width and fill the height of the screen on mobile.
How do I prevent the a certain HTML <section> tag from scrolling while autocomplete popper is open?
Can't you just give him some className and apply the style on it?
I want to add style my modal so it has (making the modal the full width of the screen and pushing it down the screen):
width: "100%,
top: "25px
to the
<div class="modal-dialog" role="document">
as it appears on the regular bootstrap modal (http://getbootstrap.com/javascript/#modals), or when react-bootstrap is used, the div is
<div class="custom-modal modal-lg modal-dialog">
but looking at the react-bootstrap site, (https://react-bootstrap.github.io/components.html#modals) we only have access too
<Modal/>
<Modal.Header/>
<Modal.Body/>
and applying those CSS settings to those won't give me the styling im looking for
If you look to the Props section for modals, it explains what possible customisations can be set on each of those (Modal, Modal.Header, Modal.Body).
For example, to add a custom-modal class to the modal-dialog element, the property dialogClassName can be set:
<Modal dialogClassName="custom-modal">
//Modal content goes here
</Modal>
Property documentation
Example with custom css class
I'm trying to style the Finish button for jquery-steps, however it appears to have an inline style:
<li class="ui button" aria-hidden="false" style="display: list-item;">
How can I remove this style, it's interfering with my styling.
You can do it in css like
li.button { display:block;}