What is the proper way to align ExtJs panel. I have tried textAlign property but it doesn't work.
This is my code
Ext.create('Ext.panel.Panel',{
title:'Hello World',
width:350,
html:'First Ext Program',
render:'division',
})
If I run this, I can get a pretty panel with the text which is "First Ext Program". By default it is left align but I want to align it to the center or right. Can you guys please help me to solve this.
Thanks in advance
You can use the config bodyStyle.
https://docs.sencha.com/extjs/6.0.1/classic/Ext.panel.Panel.html#cfg-bodyStyle
This should do the trick (Tested in ExtJs 6.0.1 Classic-Toolkit):
Ext.create('Ext.panel.Panel',{
title:'Hello World',
width:350,
html:'First Ext Program',
render:'division',
bodyStyle: 'text-align: center;'
})
Related
I am trying to style the calendar icon (to be specific increase the font-size of the icon) inside material UI's keyboard datepicker text field in React.
<KeyboardDatePicker
keyboard={!this.props.isDisabled}
keyboardIconProps={{ fontSize: "35px" }}
clearable
disabled={this.props.isDisabled}
error={this.state.isError}
helperText={this.state.errorMsg}
pickerRef={node => (this.picker = node)}
InputProps={{ disableUnderline: true, disabled: this.props.isDisabled }}
onError={console.log}
value={this.props.storeValue}
onChange={this.onChangeCallback}
format={this.props.displayFormat}
onBlur={this.onBlurCallback}
disableOpenOnEnter
InputLabelProps={this.inputLabelProps}
disableFuture={this.props.disableFuture}
disablePast={this.props.disablePast}
/>
I tried setting the KeyboardButtonProps but it doesn't seem to set the style of the icon. I searched online and there are no solutions for my problem. Any help would be much appreciated. Cheers!
Assuming that you use KeyBoardDatePicker from #material-ui/pickers
You can change the icon via the keyboardIcon prop which expects a ReactNode as a child.
Basically just add the following prop to your component
keyboardIcon={<SomeReactElement/>}
Here you have a working sandbox
I´m using TinyMCE v4.7.9
When working with templates (https://www.tinymce.com/docs/plugins/template/)
I would like to insert the templates last in content editor, not where i stand, is there some hack to do that? Can i add a button "insert after" on dialog?
Now i'm stuck in some other P tag and my templates are DIVs.
Regards
After some trial and error and no way to find an answer to this, i found a work around.
I start the templates with <div data-insertafter
in setup on event "BeforeSetContent":
editor.on('BeforeSetContent', function (e) {
if (e.content.indexOf("<div data-insertafter") === 0) { //okej, insert after
editor.setContent(editor.getContent() + '<div class="row"></div>');//add an element to in the end
editor.selection.select(editor.getBody(), true);//select al
editor.selection.collapse(false);//set focus on that last div by inverting selection
e.content = e.content.replace("data-insertafter", "");//remove
}
});
You can certainly modify the template plugin to do that...each plugin ships in a minified and non-minified version so you can just modify the non-minified version to address this need.
I have a page with multiple textareas to be replaced with TinyMCE.
Some of the Textareas take arabic text, some english text. The textareas have the dir-attribute set correctly according to the input they should receive.
How can I set the directionality of the different Editors according to their textareas?
I can set the directionality for all instances like this:
$('textarea.advanced_editor').tinymce({
⋮
plugins : "…,directionality,…",
directionality: "rtl",
⋮
});
But how can I set different direction for each editor?
In this case you will need different tinymce configurations - one with directionality set to rtl the other with the default.
UPDATE:
This is possible. You need to call this using the correct editor id
tinymce.get('my_editor_id').getBody().dir ="rtl";
In the end I came up with this:
$('textarea.advanced_editor').tinymce({
⋮
plugins : "…,directionality,…",
directionality: "ltr",
⋮
setup: function (ed) {
ed.onInit.add(function(ed) {
var direction = $('[name="'+ed.id+'"]').attr('dir');
ed.getBody().dir = direction;
});
},
⋮
});
I used the events-based solution like #Thariama supposed and referenced back to the dir-attribute, which I know to be always set correctly.
I edited toolbar of TinyMCE toolbar editor and there I gave both the options ltr and rtl over there to use.
Did like toolbar1: "ltr rtl | undo redo" in the function LoadTinyMCE()
So here user has both the options of writing as ltr and rtl comes as a toolbar. Did it in version 4.1.7.
I have an HTML code:
<div id="first"></div>
I wish to use javascript (document.findElementById) to change the behavior of the div so that it'll be as:
<div id="first" align="center"></div>
How do I go about that?
document.getElementById("first").setAttribute("align", "center");
Use element.setAttributeMDN
document.getElementById('first').setAttribute('align', 'center');
A less archaic approach is to style the margin:
document.getElementById('first').style.margin = '0 auto';
DEMO
This works if you already have an align attribute for that element
document.getElementById("first").attributes['align'] = 'center';
If you dont already have the attribute, use setAttribute
document.getElementById('first').setAttribute('align', 'center');
document.getElementById('first').align = center
See How to add/update an attribute to an HTML element using JavaScript?
Unfortunately for you, the align attribute is deprecated and shouldn't be used.
You can center DIVs of specific widths by setting the style margin attributes, like so:
document.getElementById('first').style.marginLeft = 'auto';
document.getElementById('first').style.marginRight = 'auto';
If you're set on modifying the align attribute, you can do it like so:
document.getElementById('first').align = 'center';
Other ways to center DIVs (using CSS) can be found here.
I'm searching the best way to output a label of a widget with a star (*) if this widget is required. It should be automatic.
I didn't find any way to do it :(
One way to do this is to use a custom form formatter.
You could always look at setLabel in the form clas:
$this->widgetSchema->setLabel('YOUR_WIDGET', 'NAME <em>*</em>');
This will show the widget: NAME * which you can then style in CSS
With Symfony2 I'm going to use this simple CSS trick
.required:after {
content: "*";
}
Found here