By default CKEditor assumes that text should be left aligned. If you enable text-align buttons, and select text and align it left, it doesn't change the content at all e.g.
Some text >> Some text
Whereas selecting center or right alignment adds the appropriate inline styles e.g.
Some text >> <div style="text-align:center">Some text</div>
The assumption that text is left-aligned by default is not always correct. For example the editor's output may be inside a table cell with align="center". In this case the text will never be left-align-able.
Is there anyway to set the default alignment of text in the CKEditor config prior to instantiating the editor?
You can set the default alignment by changing the contents.css file.
body { text-align: center; }
Alignment buttons on the toolbar automatically recognize the style and toggle the correct button.
Use this code: config.contentsLangDirection = 'ltr'; for Left To Right alignment and config.contentsLangDirection = 'rtl'; for Right To Left:
CKEDITOR.editorConfig = function (config) {
...
// Default language direction
config.contentsLangDirection = 'rtl';
...
};
Related
currently im trying to style a tooltip which appears when you hover over an map image with dynamic content (title of the company).
My aim is to style the background to a specific color, give the font a color and also apply a CSS property "box-shadow".
For the first aim I tried to use the "fill" property like so:
mapImageSeries is of type am4maps.MapImageSeries.
this.mapImageSeries.tooltip.fill = am4core.color('#ffff00');
Which does not work however using
this.mapImageSeries.tooltip.background.cornerRadius = 0; // will change the "border-radius" of the tooltip.
this.mapImageSeries.tooltip.background.fill = am4core.color('#ffff00'); // does also not work.
For my second goal setting up a color property for the font I didn't find a property, same with the box-shadow css property.
Is it possible to attach a css class for the tooltip so I can easily style it via CSS? And how do I style the tooltip with the
requirements im facing?
By default, tooltips pull colors from their relevant object, so to manipulate their styles you'll first have to turn that off, e.g.:
this.mapImageSeries.tooltip.getFillFromObject = false;
You can then do:
this.mapImageSeries.tooltip.background.cornerRadius = 0;
this.mapImageSeries.tooltip.background.fill = am4core.color("#ffff00");
Instead of modifying CSS box-shadow, you can apply the DropShadow SVG filter. Tooltips have a single filter, actually a DropShadow filter out the box, which we can modify:
var dropShadow = this.mapImageSeries.tooltip.filters.getIndex(0);
dropShadow.dx = 3;
dropShadow.dy = 3;
dropShadow.blur = 5;
dropShadow.opacity = 0.7;
To modify Tooltip text styles, they actually have their own Label child via their label property. There are two ways you can modify color, first is like the method above, e.g. if you want to set a default color for tooltip text:
this.mapImageSeries.tooltip.label.fill = am4core.color("#e97f02"); // color from lolcolors: https://www.webdesignrankings.com/resources/lolcolors/#palette_18
Another way to color the text, as well as apply other CSS styles, is to use Visual formatting in your tooltipText string, e.g.:
this.mapImageSeries.tooltipText = "[font-size: 20px; #bd1550]{companyTitle}:[/]\n{locationTitle} branch";
One style that won't work via visual formatting is text-align, you'll need to do that through via SVG properties, e.g.
this.mapImageSeries.tooltip.label.textAlign = "middle";
I've made a demo for you here:
https://codepen.io/team/amcharts/pen/f6d4167ea7ccd5dd47054d2430443c0a/
Hope this helps, let me know if it's all making sense.
If you're still looking to use literally CSS for your own needs, let me know and I'll try to sort that out with you.
I want the radarchart to display the labels with customized font styles and oriention (in terms of rotation).
Basically I want to decrease the font size and rotate the text, can some body give me an example of tickFormmater in PolarAngleAxis.
`
`
To format label you can use tick={{ fontSize: 11 }} in
<PolarAngleAxis tick={{ fontSize: 11 }} >
Try this code option
<YAxis tickFormatter={this.customTickFormatter}/>
customTickFormatter(e){
//e holds the actual value
return (<div className="custom-tick">
e
</div>)
}
Use .custom-tick for to apply font, rotation css.
How can I change the background color of every second column using interactive report.
First of all I recommend using css. If you don't like CSS just go directly to IR section in my answer
CSS
th:nth-child(even),
td:nth-child(even){
background-color: red !important
}
or
th:nth-child(2),
td:nth-child(2) {
background-color: red !important
}
th:nth-child(4),
td:nth-child(4) {
background-color: blue !important
}
or
th#C152380905075548116,
td[headers="C152380905075548116"] {
background-color: red !important;
}
th#C152381026269548117,
td[headers="C152381026269548117"] {
background-color: blue !important;
}
where C152380905075548116 and C152381026269548117 are columns id that should be replaced.
IR
If you really need to use native IR functionalities you should follow 3 steps:
Change report SQL query so the column contains name of the color you want to use as background
eg:
select
...
VALUE1||'<span style="display: none">red</red>' as Artikl
VALUE2||'<span style="display: none">blue</red>' as "Broj gresaka"
..
from
..
Add IR highlights Actions > Format > Highlight
Name = Red background (Artikl)
Sequence = Sequence
Enabled = Yes
Highlight Type = Cell
Background Color = #FF7755
Text Color = null
Column = Artikl
Operator = Contains
Expression = red
and
Name = Blue background (Broj gresaka)
Sequence = Sequence
Enabled = Yes
Highlight Type = Cell
Background Color = #99CCFF
Text Color = null
Column = Artikl
Operator = Contains
Expression = blue
Set columns attribute Security > Escape special characters to No
It is not the perfect solution but it works :-)
Here is the plunker created http://plnkr.co/edit/5DhDmI1Odhrys4jYDwIB?p=preview
I have associated textbox with ng-grid filter.
$scope.filterOptions = {
filterText:''
}
$scope.$watch('filterText',function(){
$scope.filterOptions.filterText=$scope.filterText;
});
If you enter "moroni" in the text box, only one row in grid will be displayed. But at the right, white space is visible. Is there a way to fix it.
First row in the plunker example is having very big string, When text is very long, only part of it is displayed. Is it possible to break the string and display it in multiple lines.
You can fix the text not wrapping issue by setting the rowHeight in gridoptions to value that fits your longest string:
rowHeight:50
And add this definition to your css:
.ngCellText {
white-space: unset;
}
The width whitespace issue is clearly a bug in ng-grid. This grid is not really a table but a lot of positioned and measured divs that look like a table. Seems the developers forgot to add some extra width to the row when no scrollbar is visible. You can only overcome this if you patch the code (not recommended) or setting the gridheight to a value in which all rows can be displayed without scrollbars.
.gridStyle {
border: 1px solid rgb(212,212,212);
width: 500px;
height: 300px
}
Look at this Plunker.
Anyhow, since these are mere unpractical hacks, I suggest you have a look at table based directive like trNgGrid which has all the features of ng-grid but is way more flexible when it comes to dynamic row heights.
How can I change the color or the transparency of the popup's overlay? I want to have another color and alpha 1.
http://mprami.wordpress.com/2008/04/22/alert_popup_modal_transparancy_color_blur_changes/
In flex ‘’ tag has mainly four attributes related to modal properties of pop-ups.
modalTransparency
modalTransparencyBlur
modalTransparencyColor
modalTransparencyDuration
In spark it looks like these were renamed slightly:
modal-transparency
modal-transparency-color
modal-transparency-duration
modal-transparency-blur (guessing on this one)
To extend on artjumble's answer, if you're using a css file, you can also declare it like that in the css file:
global {
modalTransparencyBlur: 0;
modalTransparency: 0.3;
modalTransparencyColor: black;
modalTransparencyDuration: 500;
}