I need to change the css style of the default context menu but I couldn't inspect the classes because it's closed when it out of focus, so if any one knows the classes or know how to adjust the style using javascript can help.
Press F12 to show the console. Input the code and press enter.
setTimeout(() => {debugger;}, 1000);
You may open the context menu in 1 second before the browser paused. Then you can inspect the element.
.monaco-menu > .monaco-action-bar.vertical {
color: red !important;
}
But since 0.12 the context menu is under shadow-root and the there is no element declare part attribute. So in the host there is no way to rewrite the style.
I had similar issue, where I needed to replace the icons that appear in the completion menu.
From the Network tab of the browser, I opened the file editor.main.css.
There, you can see the css selectors, and the embedded svg-xml for the icons.
For example, to replace the icons used for 'methods' or 'functions' in the completion menu, add this to your html (after the Monaco stylesheet is loaded)
.monaco-editor .suggest-widget .monaco-list .monaco-list-row .suggest-icon.method::before,
.monaco-editor .suggest-widget .monaco-list .monaco-list-row .suggest-icon.function::before
/* copied from lightbulb */
{ background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMS42NzA4IDguNjU4MDZDMTEuMzMxOSA4Ljk5MTYgMTEuMDcxNiA5LjM2Mjc4IDEwLjg4ODYgOS43NzE3MkMxMC43MTA1IDEwLjE3OTIgMTAuNjIxIDEwLjYyMTkgMTAuNjIxIDExLjEwMDlWMTIuNzAxMkMxMC42MjEgMTIuODgwNyAxMC41ODcyIDEzLjA1MDMgMTAuNTE4OSAxMy4yMDkxQzEwLjQ1MTMgMTMuMzY2MSAxMC4zNTg2IDEzLjUwMzggMTAuMjQwNyAxMy42MjEzQzEwLjEyMjggMTMuNzM4OCA5Ljk4NDY0IDEzLjgzMTEgOS44MjcyMyAxMy44OTg0QzkuNjY4MDYgMTMuOTY2MyA5LjQ5ODA2IDE0IDkuMzE4MjMgMTRINy43MTIwNUM3LjUzMjIzIDE0IDcuMzYyMjMgMTMuOTY2MyA3LjIwMzA2IDEzLjg5ODRDNy4wNDU2NCAxMy44MzExIDYuOTA3NTMgMTMuNzM4OCA2Ljc4OTYxIDEzLjYyMTNDNi42NzE2OCAxMy41MDM4IDYuNTc4OTUgMTMuMzY2MSA2LjUxMTQxIDEzLjIwOTFDNi40NDMxMSAxMy4wNTAzIDYuNDA5MjcgMTIuODgwNyA2LjQwOTI3IDEyLjcwMTJWMTEuMTAwOUM2LjQwOTI3IDEwLjYyMiA2LjMxNzcyIDEwLjE3OTUgNi4xMzU1MyA5Ljc3MjA5QzUuOTU2ODMgOS4zNjMzNiA1LjY5ODMyIDguOTkxNTYgNS4zNTk1MyA4LjY1ODA2QzQuOTI0NjggOC4yMjkwMyA0LjU4ODk2IDcuNzUwMDMgNC4zNTM2MSA3LjIyMTM0QzQuMTE3NTYgNi42OTEwNyA0IDYuMTE2NzIgNCA1LjQ5OTUzQzQgNS4wODY2NCA0LjA1MzQyIDQuNjg4MDIgNC4xNjA0OCA0LjMwMzk3QzQuMjY3MjggMy45MjA4OSA0LjQxOTA3IDMuNTYyODYgNC42MTU5NSAzLjIzMDE4QzQuODEyNTcgMi44OTM3NyA1LjA0Nzc3IDIuNTg5MTEgNS4zMjE0NiAyLjMxNjQxQzUuNTk1MDMgMi4wNDM4MyA1Ljg5ODU4IDEuODA5NTMgNi4yMzE5NSAxLjYxMzY0QzYuNTY5NzkgMS40MTc2NCA2LjkzMTQ2IDEuMjY2MiA3LjMxNTc4IDEuMTU5ODNDNy43MDEwNiAxLjA1MzIgOC4xMDA5NCAxIDguNTE1MTQgMUM4LjkyOTM0IDEgOS4zMjkyMyAxLjA1MzIgOS43MTQ1MSAxLjE1OTgzQzEwLjA5ODggMS4yNjYyIDEwLjQ1OCAxLjQxNzM5IDEwLjc5MTggMS42MTM1MUMxMS4xMjk0IDEuODA5MzggMTEuNDM1MSAyLjA0MzcgMTEuNzA4OCAyLjMxNjQxQzExLjk4MjUgMi41ODkxIDEyLjIxNzcgMi44OTM3NiAxMi40MTQzIDMuMjMwMTZDMTIuNjExMiAzLjU2Mjg1IDEyLjc2MyAzLjkyMDg4IDEyLjg2OTggNC4zMDM5N0MxMi45NzY5IDQuNjg4MDIgMTMuMDMwMyA1LjA4NjY0IDEzLjAzMDMgNS40OTk1M0MxMy4wMzAzIDYuMTE2NzIgMTIuOTEyNyA2LjY5MTA3IDEyLjY3NjcgNy4yMjEzNEMxMi40NDEzIDcuNzUwMDMgMTIuMTA1NiA4LjIyOTAzIDExLjY3MDggOC42NTgwNlpNOS42MjE2MiAxMC41SDcuNDA4NjdWMTIuNzAxMkM3LjQwODY3IDEyLjc4MjMgNy40MzcyIDEyLjg1MTIgNy40OTg4OCAxMi45MTI3QzcuNTYwNTggMTIuOTc0MSA3LjYzMDA3IDEzLjAwMjggNy43MTIwNSAxMy4wMDI4SDkuMzE4MjNDOS40MDAyMiAxMy4wMDI4IDkuNDY5NzEgMTIuOTc0MSA5LjUzMTQgMTIuOTEyN0M5LjU5MzA5IDEyLjg1MTIgOS42MjE2MiAxMi43ODIzIDkuNjIxNjIgMTIuNzAxMlYxMC41WiIgZmlsbD0iI0ZGQ0MwMCIvPgo8L3N2Zz4K) !important; }
Related
I'm not sure how to make the 'Popover' component of Material UI remain fixed on the screen when I open it. Because when I open the popover (https://mui.com/material-ui/react-popover/) It's not blocking the scroll and the box that appears after clicking is moving along the entire page. I don't want to keep the scroll bar visible while popover is open.
I'm using the latest version.
Image below
enter image description here
You can add overflow: hidden; to body element and remove it on close :) Tho its a weird behavior in docs as in source code there is no such thing, yet it happens
Is there any way to target some components from react-bootstrap in CSS. For my application, I'm using Modals from react-bootstrap and I need to change some style on all of them and it will be annoying if I need to change every single one individually.
Yes, it is possible, however you will need to inspect the Modal using ChromeDevTools or the like and see what classes are applied to the Modal when it is displayed. For example, when I inspected the Modal from react-bootstrap, I noticed the styles applied to the heading were given the className of "modal-header". So I created a Modal.css file and added the following code to it:
.modal-header {
background-color: red;
}
Then, I imported "./Modal.css" into the Modal.js file or wherever you've defined or using your Modal. Finally, when I opened the Modal, the heading had a background of red color so to speak.
Please note that it can be a little difficult to override bootstrap styles sometimes.
When I try to add link to very left text in quill editor the popUp opened is hiding in the left side.And I am using Snow theme.
The below image shows my issue.
Not the most elegant solution, but you may need to override the css:
.ql-tooltip {
left: 0!important;
}
Sometimes quilljs doesn't play nice with theming libraries like certain versions of bootstrap (which was the issue in my case).
I have a modal window that is draggable. I want to disable the backdrop completely. I know that the uibModal has a backdrop property that I can set true/false or static - but that is not enough for me, I want the html content from the background still be clickable for example Google Sheet Help modal window - you can open it, drag it and still work in the background.
How can I disable the backdrop completely and make the content from the background clickable with the modal open? Is this possible with the uibModal or should I just create a modal window in plain javascript/iframe?
I can make the background clickable with this CSS:
.modal {
pointer-events: none;}
.modal-backdrop {
display: none;}
The problem with this is that it kills the draggable functionality because you can no longer click on the modal(only background is clickable).
I resolved my problem with jQuery UI
$(document).ready(function(){
$("#div-name").draggable({ containment: "body", scroll: false, handle:'#header' });
})
As you guys can see I set my ID for the div that I want to be draggable and I also set a containment for the body of the page so people can't move my div out of the view(body) and turned off scrolling. After that I set a handle - this is where you set the draggable part of your div(if you want the whole div to be draggable just remove the handle option) - I set the #header as my handle(top menu bar) - this way people can click inside the draggable div without accidentally moving it. If you want this to work for you, all you need is jQuery and jQueryUI.
This works like a charm and I am very happy!
In addition to CSS mentioned in the question, add pointer-events: all; to modal's content container. Worked for my uibModal.
Is there any way to enable text selection on an Ionic webview?
Use case: We show the user a news article rendered using in the app using the standard WebView. We want to give the user the ability to copy a selection of text from the screen, by press and holding the screen to show the text selection options...however this action is not available.
When using the InAppBrowser to show the same content, the text is selectable. But for other reasons, the InAppBrowser is not suitable for our requirements.
Try by adding
body {
-webkit-user-select: auto !important;
.scroll {
-webkit-user-select: inherit;
}
}
to your CSS.