Is there any way to control a textfield focus state in nativescript?
So when the user tap into a textfield and when they type in it, its style is different, for example differenct border, or background, all this only via css, or adding a class that cak be styled.
Thank you very much.
From this page Chapter 6—Accessing Native APIs
At the time of this writing, NativeScript doesn’t expose a way to
style a text field’s hint color through CSS—although there is an open
issue requesting the feature—however, both iOS and Android have ways
to accomplish this task, and with NativeScript you have direct access
to these native APIs.
But you can still achieve this with the sample code on the page, but not css.
Maybe this will be part of 2.4 and there is a recognized issue on this already.
Related
I'm trying to change the cursor in our calendar component to cursor: copy while it's being dragged around for duplication, so that there is some user feedback and a visual difference between moving an event and duplicating it.
Currently the cursor is in pointer style for hovering and dragging the ghost.
I already added a placeholder to make it more distinguishable and wanted to round it out with the cursor change.
For that the suggested manual edit from this fullCalendar github issue was adapted:
https://github.com/fullcalendar/fullcalendar/issues/5250#issuecomment-749146976
because the fullCalendar 'selectMirror' flag didn't seem to change anything.
https://fullcalendar.io/docs/selectMirror
I'm using fullCalendar version 5.10.1 and angular 12.2.9.
The calendar is part of an angular project and resides in a wrapper component with some additional stuff around.
So far I tried these things:
add conditional styling to the calendar component via ngClass (works for the calendar itself, not events)
Trying the same thing on the wrapper (the fullCalendar event styling just overwrites everything)
try adding the css class via eventClassNames, 'globally' in the calendar options, more specific in the views option and even more specific on each created event (in v4 this would have probably been done via eventRender)
More to that here: https://fullcalendar.io/docs/classname-input
manipulate styling directly on the HTML element
looked into custom css pseudo-classes and decided it's too convoluted (as distinguishing between moving drag&drop and duplicate drag&drop is difficult in css)
I want to refrain from editing fullCalendar styles as this would easily break on a new npm install or version bump and also don't want to use the deprecated ::ng-deep.
FullCalendar itself offers some customization utilities like color or display style, but none for precise customization
https://fullcalendar.io/docs/event-display
Any further suggestions?
I don't quite understand exactly what i need to do to install material icons in google app maker and then how to use them. I would really appreciate anyone able to give me a step-by-step explanation. Thanks!
You don't need to install material icons you just need to use https://material.io/tools/icons/?style=baseline icon name. Just make sure that if is a button it has the "Fab" style variant for App Maker to make the change and replace the button text for the mdl icon name.
Style Variant
Text field for the widget (button)
Final result for a button.
You can also use different icons like in my case fontawesome.com. You need to get the CSS URL from the website then access to the App Maker "App Settings" and look for External Resources and add the link
After that search for an icon and will display some properties like these
Take the HTML properties to add them to the button Display > Styles as shown here.
Make sure there is nothing on "text" of the button and you will have something like this.
I had a hard time figuring this out when I was start using App Maker so I hope this helps you all.
I'm working on an existing project and make some fixes for accessibility support. One of the items from my accessibility list refers to the ShareThis social buttons. For some reason it doesn't support navigation from keyboard. I've added "tabindex=0" attribute to all social icons <span> elements. So now I can navigate, but I can't activate it by clicking "Enter". Do I really need to write my own JS functions for all this buttons? Maybe there is accessability solution that somebody wrote before for ShareThis?
The tabindex attribute you added will make the spans focusable by keyboard, but doesn't provide any support for Enter events. You will need to add listeners for Enter in JavaScript. Alternatively you could switch the spans to links or buttons - these have native keyboard support so won't need the additional JavaScript.
I have an Xpages app and I want to surface some pages from that app into my iPhone App. I want the Xpages pages to look like iOS7 so the users have the same experience in the app and don't know they are not in a native app.
IBM has not updated their mobile CSS yet.
But there is some CSS that goes a long way to fixing this:
http://redpilldevelopment.com/xpages-mobile-controls-ios7-theme/
I was able to make script library in my app and then I was able to get the CSS into a page, all using the instructions on the site.
What I don't get is how to make my app use the css theme? When I view the page on my iPhone some of the page is rendered like ios7, but much is not. Do I have to match up each individual element on the page to the class in the custom css?
It depends on your page I guess. Not every control has a "mobile renderer". DataView does for instance but viewPanel does not. So that could be why you're seeing it fine for some things but not others.
I believe in 9.01 with the latest extension pack it's easier to override the mobile them. It had been pretty difficult before. I think that's why your linked article mentions that the iOS7 theme can't be in the Head tag.
You might need to override styles for anything that doesn't look like iOS7.
I'm writing a custom web part that is intended to be hosted in SharePoint. The web part has a button, which when pressed performs an action. This action may or may not succeed. If it fails, I'd like to notify the user by displaying a <span> below the button with an error message.
To make this message stand out, I'd like to highlight it in a different colour or font. I'd like to reuse any existing error CSS style if at all possible. Does SharePoint define such a CSS style? If not, what's the best approach for displaying in-line error messages?
Well, silly me, it was right here on:
http://msdn.microsoft.com/en-us/library/dd586616(v=office.11).aspx
The magic CSS style is .ms-error, which as Madhur mentioned is colored red.
SharePoint by default uses red colored text to display error messages. You can use the same.
I am not sure if there is any re-useable CSS class exposed by sharepoint for that purpose.
You can check out all the exposed styles here:
http://www.heathersolomon.com/content/sp07cssreference.htm
Here you go.
Check http://jsfiddle.net/AbdK7/