I have implemented EditorJS in a website, and everything is working.
The problem is that I don't know how to configure the Editor JS to reduce his width and height, and how to appear aligned on the left.
This is my code to instantiate EditorJS:
<!-- html -->
<div id="editorjs" name="detailed_draft"></div>
//javascript
const TOOLS = {
list: {
class: List,
inlineToolbar: true
},
header: {
class: Header,
inlineToolbar: true
},
underline: {
class: Underline
}
}
const editor = new EditorJS({
/**
* Id of Element that should contain the Editor
*/
holder: 'editorjs',
tools: TOOLS,
placeholder: 'Write some Details!',
data: obj
})
image showing the EditorJS display
As you can see on this discussion the solution is to override the EditorJS CSS.
<style>
.ce-block__content,
.ce-toolbar__content {
max-width: unset;
}
</style>
Related
HoverExample
How to add hover text like that of the above image to a custom extension in jupyterlab. I'm making an extension in jupyter lab using react, but I want to add a description of the extension in a hoverbox. However I cant figure it out.
To add a hover box in the extension, you have to pass value to [widgetInstance].title.caption
For example:
const extension: JupyterFrontEndPlugin<void> = {
id: 'some-id',
autoStart: true || false,
activate: async(app: JupyterFrontEnd, palette: ICommandPalette) => {
const { commands } = app;
let widget1: widget= new widget(); // create the widget
widget1.id = 'widget1-id';
widget1.title.label = 'widget Label';
widget1.title.caption="widget hovering text description"; // this will show the text when you hover over an extension
app.shell.add(widget1, 'right', { rank: 1 });
...
...
... rest of your code ...
}
I want to change the color of the label circled here:
How would I go about doing so?
I have tried changing the color of the primary colors on the palette. Also, there does not seem to be a way to do it through CSS without affecting other components.
Here's my current code for the theme:
const calendarTheme = createMuiTheme({
overrides: {
MuiPickersDay: {
day: {
color: "#436E70",
},
daySelected: {
backgroundColor: "#436E70",
},
dayDisabled: {
color: "#436E70",
},
current: {
color: "#436E70",
},
},
},
});
Material-UI pickers v3.3.10
https://material-ui-pickers.dev/guides/css-overrides
Variant: static
Npm package used: #material-ui/pickers
Someone suggested this post: Change header color of Material-UI Date Picker
That solution is 5+ years old already,getMuiTheme is not part of v3.3.10. Also the way described in that post does not work anymore, it does not matter where in the createMuiTheme object I put
datePicker: {
color: palette.primary1Color,
textColor: palette.alternateTextColor,
calendarTextColor: palette.textColor,
selectColor: palette.primary2Color,
selectTextColor: palette.alternateTextColor,
calendarYearBackgroundColor: palette.canvasColor,
headerColor: palette.pickerHeaderColor || palette.primary1Color,
},
It does not work, it doesn't have any effects. And the documentation also doesn't bring much light to the case.
Thanks in advance.
According to the documentation from your link the datepicker has a rule (sometimes called slot) called MuiPickersCalendarHeader. This rule is used to provide styling to a <div> tag that is an ancestor to the <p> tag that contains the text you've circled in your sample image (i.e. "July 2022"). You can see how these tags are structured in the Inspector tab of the Developer Tools Window in Firefox (in the browser highlight the text "July 2022", right-click the highlighted text, then from the context menu choose Inspect). Knowing the tag structure, we can apply a CSS selector to target the <p> tag like so:
const calendarTheme = createMuiTheme({
overrides: {
MuiPickersDay: {
...
// MuiPickersCalendarHeader rule
MuiPickersCalendarHeader: {
switchHeader: {
['& > div > p']: {
// backgroundColor: lightBlue.A200,
// color: "white",
},
},
},
...
}
}
The above code is untested. If you have problems with it say so in a comment, and I'll try to test it.
Currently using react-data-grid and it only shows a single line text, however I am trying to display multi line text.
sandbox:
https://codesandbox.io/s/5vy2q8owj4?from-embed
You can override the data-grid cell content class to your file.
Render:
<div class="react-grid-multiline-content">
<ReactDataGrid columns={columns} rowGetter={i => rows[i]} rowsCount={rows.length}/>
</div>
Style:
.react-grid-multiline-content .react-grid-Cell__value {
white-space: normal !important;
}
I was able to solve a similar problem by resetting the cells' line-height CSS property.
Before:
After:
My columns:
const columns: Column<MyRow>[] = [
{
key: "id",
name: "ID"
},
{
key: "addressSummary",
name: "Address",
formatter: (formatterProps) => <AddressBlock {...formatterProps.row} />,
cellClass: "normalLineHeight" // Need to reset the line height on affected cells
}
];
CSS:
.normalLineHeight {
line-height: normal;
}
Here is the sample code: https://codesandbox.io/s/react-data-grid-multi-line-content-fix-u6im0
getRowHeight={() => 'auto'}
It will break lines automaticaly in mui DataGrid
I need to use inline styles so I used this code:
var BackgroundStyle = Quill.import('attributors/style/background');
var ColorStyle = Quill.import('attributors/style/color');
var SizeStyle = Quill.import('attributors/style/size');
Quill.register(BackgroundStyle, true);
Quill.register(ColorStyle, true);
Quill.register(SizeStyle, true);
If I just add this code nothing works. So, I changed the toolbal config:
var config = {
modules: {
toolbar: [
...
[{ 'size': ['10px', false, '18px', '32px'] }], // custom dropdown
]}};
editor = new Quill(editorElem, config);
It starts working but in the dropdown for the size all the values look like "Normal":
So how to change the dropdown too?
Change the styles too. Add this code to make everything work (do the same for other styles):
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="32px"]::before{
content: 'Huge';
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="32px"]::before {
content: 'Huge';
font-size: 32px;
}
This answer was posted as an edit to the question Can't make Quill editor name size options when I use inline styles by the OP mimic under CC BY-SA 3.0.
I just added FontAwesome to my ExtJS application.
I added a Glyph to my tab:
items: [
{
title: 'Dashboard',
glyph: 0xf009,
padding: '5',
I would like to change the Glyph color, is that possible?
This should work:
.x-panel-header .x-panel-header-glyph {
opacity: 1;
color: red;
}
You can see it in action here: http://extjs.eu/examples/#complex-data-binding
I tried the Saki way
.x-panel-header .x-panel-header-glyph {
opacity: 1;
color: red; }
but then you don't have the control to change attributes for specific glyph and if I want to set it for individual glyph I will need to work harder.
I use a simple way:
Step 1: add a link to the css file
link rel="stylesheet"
href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"
Step: 2:
use iconCls
iconCls: "fa fa-lg fa-futbol-o glyph"
here I used the awesome classes "fa fa-lg-fa-futbol-o" but I added "glyph" so it will looks better than without.
Step 3:
define "glyph" in your css file.
.glyph { margin-top: 3px; }
Step 4:
define any css you can apply to the glyph like color.
The result:
in css file:
.glyph { margin-top: 3px; }
.youname { color: #15498B; }
in js ( every where you have config iconCls )
iconCls: "fa fa-lg fa-futbol-o glyph youname"
I know this is a little late but for anyone else in the future who wants change Glyph icons when using custom fonts with Exts.
I used the reference to the button in my controller passed in during the event. I then got the buttons ID then target the button using the get method and concatenating "-btnIconEl" to the the button ID as any glyph/icon will have that CSS.
'button[action=displayGrids]' : {
click: function(button) {
Ext.get(button.id + '-btnIconEl').setStyle('color', '#ffffff');
}
}