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.
Related
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 am extensively using the showPopupDialog(...) function of Dialog and it works fine. I remember that in the past it didn't work on Android or there were problems on Android, but now it works pretty well on Android.
But I have a styling problem with Android. Basically I want there to be a Component shown in the middle of the Dialog. This is the easiest case, sometimes I add buttons on the south side. In both situations, however, I can put the content of the Dialog popup exactly on the center on iOS only, while on Android there are problems.
This is my current CSS:
#media platform-and {
PopupContentPane {
margin: 0px;
padding: 1.5mm;
padding-bottom: 3.0mm;
}
}
#media platform-ios {
PopupContentPane {
margin: 0px;
padding: 1.5mm;
padding-top: 0px;
}
}
The main difference between iOS and Android is that while iOS works correctly with this CSS whether the arrow is up or down, on Android, to get the same result of iOS, I would need a CSS made like this:
#media platform-and {
PopupContentPane-ArrowTop {
margin: 0px;
padding: 1.5mm;
}
PopupContentPane-ArrowBottom {
margin: 0px;
padding: 1.5mm;
padding-bottom: 3.0mm;
}
}
Or something similar (with a few more tweaks).
So, on Android, when the arrow is on the bottom I need an extra padding-bottom. That'all, but it's not possible because currently there aren't an UUID for the PopupContentPane when the arrow in on the top and another UUID when the arrow is on the bottom.
Any idea or workaround? Thank you
(I add that so far this is the only situation where I need to use the #media tag of CSS to differentiate iOS styles from Android styles.)
Originally when we wrote the popup dialog it was an iOS only feature since the styling were only on iOS. We used a 9-piece image border to do the popup and we didn't want to replicate that theme element in every one of the native themes so we left it to the developer.
Later on we came up with the ability to show an arrow on a RoundRectBorder. Another advantage was the move on iOS/Android to flat design which made the previously complex dialog style into a simple solid white popup. So we implemented this cross platform in white. But because iOS has the pre-existing image border it's still used on iOS and wasn't removed. We should probably remove it and deal with the minor compatibility issues that arise.
I recently worked on that in InteractionDialog here: https://github.com/codenameone/CodenameOne/blob/master/CodenameOne/src/com/codename1/components/InteractionDialog.java#L786-L815
It might make sense to do something similar for Dialog which doesn't seem to have that code anywhere: https://github.com/codenameone/CodenameOne/blob/master/CodenameOne/src/com/codename1/ui/Dialog.java#L1209
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.
I have read the below article/tutorial
http://tympanus.net/codrops/2013/12/18/perspective-page-view-navigation/
I am trying to make this work from angularjs, below is the fiddler
http://fiddle.jshell.net/cZs5y/
Its working with following two issues.
Mouse click hand icon visible allover the page. ( I want it to be visible only on the button).
On Mobile devices, I am seeing little delay and flickering effect.
I am new to Angular, any ideas how to improve this.
Update: Issue 1 solved fiddler link.
Update 2: After adding "ngTouch" module there is no delay on mobile but flickering effect is still there.
Make .perspective.modalview and container cursor property to auto to remove unnecessary pointer from the screen. also add style="cursor:pointer" to button.
css:
.perspective.modalview {
cursor: auto;
}
.container{
cursor: auto;
}
Hi I have built a site using a font-icon from icomoon as image alternatives. Everything is fine however in ie7 they display with a text-decoration underline.
I have used a class to stop this when used in links which works in all browsers except ie7.
I put the icon in as a data icon in the 'a' and the text for links in a span. And class like so..
a.{
text-decoration:none;
}
span{
text-decoration:underline;
}
This is fine in every browser except ie7???
Even in <i> elements it adds a random underline, so again I added a style
i{
text-decoration:none;
}
Still no joy.
Any help would be greatly appreciated.
I don't know exactly what you think the a. selector would do.
I suggest you use a descendant selector:
a i {
text-decoration: none;
}