does colorfield have bugs in rtl?
If yes, is there an alternative?
Because after using this field, the shape of the page will be messed up and you can see the photo enter image description here
I just used its X-type exactly like the examples in the document itself
xtype:'colorfield',
value: '#993300', // initial selected color
listeners : {
change: function(field, color) {
console.log('New color: ' + color);
}
},
If anyone has ever encountered this problem and was able to solve it, thank you for guiding me.
Related
I'm trying to increase the height of the line on the selected Pivot item link in Microsoft's Fluent UI using React.
Here's a screenshot for the purposes of clarification:
The orange arrow is pointing to the blue line of which I would like to increase the height.
I have tried setting the styles attribute of the Pivot component but thus far have been unsuccessful. Here's some code
const pivotStyles: Partial<IStyleSet<IPivotStyles>> = {
link: { ? },
linkContent: { ? }
};
<Pivot styles={pivotStyles} linkSize={PivotLinkSize.large}>
<PivotItem headerText="Zane"></PivotItem>
<PivotItem headerText="Kai"></PivotItem>
<PivotItem headerText="Jay"></PivotItem>
</Pivot>
I have experimented with different attributes of both link and linkContent but haven't found a way yet. I believe what I'm trying to do is manipulate the IStyle interface but I can't find details of the attributes of it. The link there is very vague. For example, what are all the available attributes of link, linkContent, etc.?
Any thoughts on this would be most appreciated!
Thank you.
Turns out I was on the right track and just needed the exact fields. Here's what ended up working:
const pivotStyles = {
linkIsSelected: {
selectors: {
':before': {
height: '6px', // was previously defaulted at 2px
}
}
}
};
I scoured about 4.24 million sites to find this answer but here are some of the most helpful in case they are of interest:
the actual source code of Pivot.styles.ts
the Microsoft Fluent UI Pivot Documentation
A deep examination of the classes using Chrome Dev Tools also helped. ;)
Here's a picture of the end result:
I've found what I'm looking for but it's a jQuery example, it looks super clean and intuitive. Is there a way to do this with xtype 'datefield'? Is there a way to extend this field type to include a clock icon beside the date icon and have it behave the same way as in this example?
http://jsfiddle.net/rniemeyer/T3zge/
ko.kendo.bindingFactory.createBinding({
name: "kendoDateTimePicker",
defaultOption: "value",
events: {
change: "value",
open:
{
writeTo: "isOpen",
value: true
},
close: {
writeTo: "isOpen",
value: false
}
},
watch: {
enabled: "enable",
max: "max",
min: "min",
value: "value",
isOpen: ["open", "close"]
}
});
var viewModel = {
myDate: ko.observable(new Date())
};
ko.applyBindings(viewModel);
I'm still very much a newbie at this so perhaps somebody can lend some advice or point me in the right direction how I can figure this out. Thanks in advance! :)
I have created a DateTime plugin for ExtJS 4 and 5 few months ago.
Give it a try, its a little different than what you showed but works as intended:
https://github.com/gportela85/DateTimeField
Hope it helps
Extjs does have a separate Time Picker, but not a date/time picker combined. You would likely need to create a plugin, but if you are fairly new to this you may find it a little overwhelming.
You could search the forums for custom extensions/plugins people have created, I just came across this one for ExtJs 4.
i have a table where i can turn pages, you can choose a color for a user and that color is shown in the circle, but when i turn one page, the color is gone!
I read about dom manipluation in directives, but that still didnt solve my problem:
the tutorials mostly show one with a click funktion, and i dont to click the circle
they also werent "permanent"
maybe i did something wrong? please can someone help or give me a hint?
i made also a plnkr :
Here's the link!
You need to save chosen color to currect user object. Maybe like this:
$scope.showColorPicker = function(user) {
data = $scope.colors;
dlg = $dialogs.create('/dialogs/pickColor.html','pickColorCtrl',$scope.colors,{},{key:false ,back:'static'});
dlg.result.then(function(data) {
var colnr = data;
var user_circle = angular.element(document.getElementById('color_' + user.id));
user_circle.context.style.backgroundColor = $scope.colors[colnr-1].color;
user.color = $scope.colors[colnr-1];
});
};
HTML for color circle:
<span class="smallcircle" ng-bind="color_{{user.id}}" id="color_{{user.id}}" name="color_{{user.id}}" style="background-color: {{user.color.color || 'lightgray'}};"></span>
Make sure you pass user object to showColorPicker function:
Change Color
Demo: http://plnkr.co/edit/em0ZUHjbXUNa7MYgpC5f?p=info
My combo uses remote query. When the user types something, the server returns matching results. However, when there are a lot of matching results, then the combo expands, loses focus and highlights the firts record returned by the server. The combo has these properties:
...
queryMode:'remote',
enableKeyEvents:true,
forceSelection:true,
...
The screen of what is going on is here:
So, as you can see, when the user typed the last character, the server returned records and for some (I think stupid) reason highlighted the first record. But what is more important there is no focus any longer and the user has to put cursor on the field again to continue typing. To solve this problem, I tried these events:
'blur':function(){
this.focus();
},
'keydown':function(){
this.focus();
},
'keypress':function(){
this.focus();
},
'keyup':function(){
this.focus();
},
But there is no effect. I also tried to use load event, but it also has no effect.
I had this issue too, for solve it use the afterQuery property in the combo.
Something like this:
afterQuery: function() {
combo.setRawValue(combo.lastQuery);
},
pd: I think this is a Bug, but i'm not sure about it...
I could solve the similar issue with focus be two actions:
Set "selectOnFocus: false"
Update doRawQuery.
doRawQuery: function() {
var me = this;
...
me.inputEl.focus();
}
If you have your overridden version (I believe you should to not change original plugin), you can do it this way to not duplicate the logic:
doRawQuery: function() {
var me = this;
me.callParent(arguments);
me.inputEl.focus();
}
xtype: 'combo',
...
listeners:{
// repair raw value after blur
blur:function() {
var val = this.getRawValue();
this.setRawValue.defer(1, this, [val]);
}
}
Look this example(thanks to Saki)
In datefield, I am using regular expression(maskRe) to prevent user from entering alphabets, but If the user try to copy paste the same, he can get his alphabetical text on my datefield, so is there any way to solve this particular issue. I dont want cop/paste to be disabled.
I am using EXT 4.2 version...
Thanks in advance.
Hi Please find these example . It will solves your issue without disabling Copy/Paste
Ext.onReady(function(){
test = Ext.create('Ext.form.field.Date', {
width: 320,
enableKeyEvents:true,
listeners:{
keyup:function( thiss, e, eOpts ){
var str=thiss.value;
if(/^[a-zA-Z]+$/.test(str)){
alert("Contains alphabets");
thiss.reset();
}
}
},
value:'10.69',
renderTo:document.body
});
});