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.
Related
I've integrated TinyMCE with React.js.
But there is a feature I need which seems TinyMCE doesn't support it natively so I wanna know how can I add it.
you see the two blocks that are surrounded by the red box (see the image below) have maxWidth and width which I set it manually via DevTools
max-width: 800px;
width: 100%;
margin: 0px auto;
I wanna know how can I set the above css for the current selected block using TinyMCE API.
so the user can resize the max-width for the current selected block by clicking a button in the toolbar (which will call the TinyMCE API to resize its max-width)
I can't find the scrollbar for the column that contains metrics. This is preventing me from scrolling down to see additional metrics. The scrollbar on the left is not for metrics but for the table in the report.
Screenshot of column:
You have to use an external mouse and the mouse wheel to scroll.
If you use a laptop, your touch-pad might support scrolling with two-finger up/down swipe gestures.
Switch to the Style tab, scroll down, switch back to the Data tab.
No idea, why they don't separate the scrollbars for the Data and Style panels and make it as one would expect.
If you need a scroll bar anyway, you can install a Chrome extension or a Firefox add-on like Stylus and then:
Go to the Google Data Studio website.
Open the Stylus options from the Extensions menu.
Click on "datastudio.google.com" under "Write style for:" and then a Stylus page would open.
Click on Import from the left sidebar and paste the below CSS code into the dialog that opens and select "Overwrite Style".
Click on Save or press Ctrl + S (Windows or Linux) / Cmd + S (macOS).
CSS code:
#-moz-document regexp("https://datastudio.google.com/.*/.*/reporting/.*") {
form[name="panelForm"] {
display: flex !important;
flex-direction: column !important;
}
.tab-data {
height: 100% !important;
overflow-x: hidden;
overflow-y: auto !important;
}
property-panel .ga-form::after {
height: auto !important;
}
}
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; }
I'm using <div ng-bind-html="data.html"></div> to display a html content, but I found that the text in this div cannot be selected.
How can I make text selectable?
I cannot select in chrome and ios device
I had Come across, similar situation. where one of our application need to work on desktop browser chrome etc. since it was Ionic app text select was disabled by default. here what i did.
body {
-webkit-user-select: auto !important;
.scroll {
-webkit-user-select: inherit;
}
}
May be helpful for someone.
I have added a newsletter subscription box to my website, however it is not displaying properly. I would like to have the subscribe button displayed next to the box where you enter the email. I have added the following css:
#mc_embed_signup_scroll, #mc-submit {
display:inline-block;
}
However its not working.
http://www.skinmade.com.au/ (see footer)
Thanks in advance :)
Claire
The inputs themselves are styled display:block by the mail chimp css, which prevents them being rendered in the same line. Also the mc_embed_signup_scroll div that contains them doesn't have a set width, so if its auto-width isn't wide enough for the inputs to appear side by side, the button will wrap to the next line.
To get them on the same line, override the display setting of the input elements, and set a minimum width on the containing div to make sure they fit on one line:
#mc_embed_signup input.email,
#mc_embed_signup input.button {
display: inline !important;
}
#mc_embed_signup_scroll{
min-width: 350px;
}
http://jsfiddle.net/pfwfsq2z/1/