Having issues using the DatePicker control and fixing width for my SPFX app. The default width is 100%. I want it to be the same width as my text input, which I pass in a 700px width property into the styles parameter. There is no width or styles parameter I can pass in a prop to on the DatePicker component.
<DatePicker label="Due Date"
value={this.state.Due_x0020_Date? new Date(): null}
onSelectDate = {(date: Date | null | undefined): void => {
this.state.Due_x0020_Date=date; }}
disabled={this.state.mode === 'edit' ? true : false }
/>
Try this:
<DatePicker styles={{ root: {width: 700} }} />
Tested on Fluent 8.49.1.
I suppose that your original code was missing the root key.
Citing docs:
styles prop
A component consists of DOM elements, or "areas." Each of the areas should be targetable for styling.
To find the available areas for a component, use intellisense or look at the IComponentStyles interface in the component's Component.types.ts file (substituting the actual component name for "Component").
Further reading - https://developer.microsoft.com/en-us/fluentui#/styles/web/colors/theme-slots.
Related
So I've a custom widget which renders a custom component.
conversion.for('editingDowncast').elementToElement({
model: 'modelName',
view: (modelElement, viewWriter) => {
const modelName = modelElement.getAttribute('modelName');
const modelNameView = viewWriter.createContainerElement('span', {
class: 'modelName',
'data-modelName': modelName,
});
const reactWrapper = viewWriter.createUIElement(
'span',
{
class: 'modelName__react-wrapper',
},
function (this, domDocument) {
const domElement = this.toDomElement(domDocument);
rendermodelName(modelName, domElement);
return domElement;
},
);
viewWriter.insert(
viewWriter.createPositionAt(modelNameView, 0),
reactWrapper,
);
return toWidgetEditable(modelNameView, viewWriter);
},
});
Where rendermodelName will give back a React component with a simple input box as
return (
<div>
<input type="text" />
</div>
);
https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/react.html.
But the problem is, whenever I tried to add some content inside the input, the focus is lost from the field and automatically moved to the surrounding editor. What am I missing. Tried creating a focushandler and adding the modelNameView to it.
Should I go with the new createRawElement? My current CK5 is 20.0.0 So I don't want any breaking changes coming now.
EDIT:
I researched a little bit more. seems like createRawElement may not work here. I think this doesn't have a simple solution. I tried with allowContentOf: '$block' which also not letting me focus. But these values are explicitly for normal CK widget, not for a react component.
I had the same issue and solved it by adding this tag to the parent div that wraps my Vue component.
https://ckeditor.com/docs/ckeditor5/latest/framework/guides/deep-dive/ui/widget-internals.html#exclude-dom-events-from-default-handlers
Adding from CKE Docs:
Sometimes it can be useful to prevent processing of events by default handlers, for example using React component inside an UIElement in the widget where, by default, widget itself wants to control everything. To make it possible the only thing to do is to add a data-cke-ignore-events attribute to an element or to its ancestor and then all events triggered by any of children from that element will be ignored in default handlers.
Let’s see it in an short example:
<div data-cke-ignore-events="true">
<button>Click!</button>
</div>
In the above template events dispatched from the button, which is placed inside containing data-cke-ignore-events attribute, will be ignored by default event handlers.
I faced the similar issue.
CKEditor will takes all the events on React component which you hosted on Widget.
The work around is to stop propagation of events to CKEditor which are fired from your DOM element(domElement) where your React component hosted.
Here is the sample code:
https://github.com/ckeditor/ckeditor5-core/compare/proto/input-widget#diff-44ca1561ce575490eac0d660407d5144R239
You should stop all required events. Also you can't paste any content inside the input field of React component. That will also listened by clipboardInput event of CKEditor.
I am implementing font size accessibility in a NativeScript-Vue app.
I want to allow or prevent Label resizing through an XML attribute for both Android and iOS, but behavior and implementation on the platforms are different.
Android
All labels are scaled by default. If I want a label not to resize, I need to call the function setTextSize in the loaded event, following this solution.
<Label text="Not resizable" #loaded="$androidFixedLabelSize($event, 70)" />
Vue.prototype.$androidFixedLabelSize = function({ object }, fontSize) {
if (object.android)
object.nativeView.setTextSize(android.util.TypedValue.COMPLEX_UNIT_PX, utils.layout.toDevicePixels(fontSize));
}
iOS
Labels are not scaled by default. To resize a label, I need to use nativescript-accessibility-ext plugin and add the attribute accessibilityAdjustsFontSize.
<Label text="Resizable" accessibilityAdjustsFontSize="true" />
Having to add one attribute for fixed Android and one for resizable iOS is a bit cumbersome.
I was thinking of having all labels resizable by default, and specify if I want one not to resize through a directive or an attribute.
Can I achieve this through a custom directive? Or something else?
Update
I was able to prevent resizing on Android through a directive without hardcoding font size, but there is a problem: update is triggered only for few labels. el.nativeView.android in bind and inserted hooks is undefined.
Vue.directive("noresize", {
update: el => {
if (el.nativeView.android) {
el.nativeView.android.setTextSize(android.util.TypedValue.COMPLEX_UNIT_DIP, el.nativeView.fontSize);
} else {
// iOS code
}
}
});
On iOS, I would like to simply set accessibilityAdjustsFontSize="false", but this implies that it is true by default.
So the next question is: how do I set accessibilityAdjustsFontSize="true" on all Label components on iOS?
Thanks to Morten Sjøgren, developer of #nota/nativescript-accessibility-ext, I was able to add a global event. Accessibility resizing is now applied on all Label components, unless the attribute noResize is true.
app.js
import '#nota/nativescript-accessibility-ext';
import { Label } from 'tns-core-modules/ui/label';
// code
Label.on(Label.loadedEvent, ({ object }) => {
if (object.noResize) {
if (object.android) {
object.nativeView.setTextSize(android.util.TypedValue.COMPLEX_UNIT_DIP, object.fontSize);
}
} else {
object.accessibilityAdjustsFontSize = "true";
}
});
<Label text="Don't resize" noResize="true" />
My application built with AngularJs and KendoUI controls. I used AutoComplete Text Box so many places in the application. Now client wants that search should be with "Contains" filter. for the same i need to put filter: 'contains' everywhere AutoComplete control used.
I want to change default filter 'startWith' to 'contains' at beginning of the application. So that i can escape to make change every html file.
can anyone knows how to do the same?
I guess you need to update your auto complete filter property at least once for all controls to support dynamic property binding and bind to some root configuration, like:
<input kendo-auto-complete k-filter="config.autoComplete.defaultFilter" />
So will be able to change default filter in future by updating only config value.
Another approach - is to override default "setOptions" behavior for "AutoComplete" component to use correct filter by default somewhere on app start:
var nativeSetOptions = window.kendo.ui.AutoComplete.prototype.setOptions;
window.kendo.ui.AutoComplete.prototype.setOptions = function(options) {
options.filter = 'contains';
nativeSetOptions.call(this, options);
}
You can use k-options attribute:
<input kendo-auto-complete ng-model="yourModel" k-data-source="yourDataSource" style="width: 100%;" k-options="autocompleteOptions"/>
and then in your controller:
$scope.autocompleteOptions = {
filter:"contains"
}
I'm trying to change the height of the progress component in nativescript like this:
<Progress value="{{ progress }}" maxValue="{{totalTime}}" height="100">
</Progress>
But the height property has no effect. How do I change the height of this component?
You can change the height of ProgressBar using the height property (due to some spcific in the native controls).
However one of the gret advantages of NativeScript is that you have direct access to the native APIs for both iOS and Android. So after some small research here is how I managed to change the default scale (there might be even better approaches - this is one of the shortest I came upon).
TypeScript example:
Use the laoded event to get the reference to your progress bar in the code behind.
<Progress minValue="0" maxValue="100" value="25" loaded="onProgressLoaded"/>
Then in the code behind access the native controls
import { Progress } from 'ui/progress';
import { isAndroid, isIOS } from "platform"
declare let CGAffineTransformMakeScale: any; // or use tns-platform-declarations instead of casting to any
export function onProgressLoaded(args: EventData) {
let progress = <Progress>args.object;
if (isAndroid) {
progress.android.setScaleY(5); // progress.android === android.widget.ProgressBar
} else if (isIOS) {
let transform = CGAffineTransformMakeScale(1.0, 5.0);
progress.ios.transform = transform; // progress.ios === UIProgressView
}
}
Full demo app can be found here
You can directly set scaleY attribute of the progress element.
Example:
<Progress scaleY="2" value="{{ progress }}" maxValue="{{totalTime}}" height="100"></Progress>
This will make it 2 times wider in the vertical (Y) axis.
I have redirected the contents.css file for my CKEditor 3.6 to my site's stylesheet:
CKEDITOR.config.contentsCss = '/css/style.css';
Now I'd like to add some styles from that stylesheet into the dropdown box for users to select when editing content. The previous developer created this:
CKEDITOR.addStylesSet( 'cms_styles',
[
{
name : 'Page Header',
element : 'h2'
},
{
name : 'Page Text',
element : 'p'
},
It appears to work, but makes very little sense to me. Where do these get their style from given that a class name cannot have spaces? Why is an element being specified if we're just adding styles to the dropdown? Google turned up no good results for addStylesSet, and the developer guide I found (http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Styles) really wasn't very specific.
I do not want to display all available classes; just a few that we define.
The name property on the style objects is only used for display purposes, it does not make it into the content in any way. What the previous developer created works because those styles are just specifying the element, and the css likely has styling defined using those element specifiers.
The element property is being set so that CKEditor knows how to apply that style to the content. If you have a style with the element property having a value of p then that style will become a block style and will apply to the currently active p block in the content. If the element property has a value of span then the style would be applied to the selected text only (it would be surrounded with a span element if one didn't already exist).
To get styles in the dropdown to represent classes in your external css you need to add the style objects to the styles set and have it set the class attribute of the element the style is being applied to. By setting properties on the attributes property of the style object you can have CKEditor add or modify attributes on the element that it is applying the style to. For our purposes we want to set the class property of the attributes property in order to have the class defined in your css applied.
CSS:
p.myBlockStyle {
font-size: 32px;
}
CKEditor stylesSet array:
[
{
name: "My Block Style",
element: "p",
attributes: {
"class": "myBlockStyle"
}
}
]
Note that the class property has it's name quoted because class is a reserved keyword.