In html, we can use display:none, font-size:0, or visibility:hidden to hide text, is there a similar way in quill editor?
e.g., can set some op.attributes, then can hide text
Inside de Quill container there is a div tag with the "ql-editor" class.
You can target CSS to this class to change the visibility. The div tag is the parent element of all quill content, if you want to hide a portion of text you can target the children to hide. You can use jquery to.
CSS example to hide all the text:
.ql-editor{
visibility:hidden;
}
CSS example to hide a specified line of the text:
.ql-editor p:nth-child(7){
visibility:hidden;
}
Remember the differences in "visibility:hidden;" and "display:none;"
What is the difference between visibility:hidden and display:none?
Thanks for all your answers.
I found a solution for that,
1)Register a attribute:
const HideAttribute = new Parchment.Attributor.Attribute('hidden', 'hidden', config);
Quill.register( HideAttribute, true);
2)For the text need to be hidden, in delta,
op.attributes.hidden = true
Then the text for op.insert will be hidden
Thanks!
Related
I'm trying to customize a single component CSS, avoid to customize all component.
Ext.define('MyApp.tab.Panel', {
extend: 'Ext.tab.Panel',
header:{
xtype: 'myWorkspacesToolbar',
items:[
....
]
},
items:[
....
]
I want to customize only HEADER style and his sub items (added dynamically) and not Panel items.
Using scss file myWorkspacesToolbar.scss for example:
$button-toolbar-color: #F00;
I change all button color (header and panel items and sub items).
Using theme mixing variable I have to set UI for single field in header to obtain CSS changes.
What is the best way to do that?
Use extjs-button-ui mixin for create needed button and set ui property to your button in header
I'm using antd in React.
There is a Modal, the content inside is very long (is a long ). After opening this Modal, the page will jump to the end of Modal. I want Modal to start display from the top after it pops up.
How to do that?
You can do it by scrolling the window to 0th position while you set the state value which sets the modal visibility to true like,
this.setState({showModal:true},()=>window.scrollTo(0, 0));
I ran into the same issue. My hacky fix was to set a timeout that selected the div used by the modal and scroll that up.
Modal.confirm({
content: <SomeReactComponent />,
});
// scroll it up, kinda hacky
setTimeout(() => document.getElementsByClassName('ant-modal-wrap')[0].scrollTo(0, 0), 100);
You're probably getting focus'd on one of the footer's buttons. Antd has a way to remove focus (thus, setting your position at 0,0) for functional Modal, and that's autoFocusButton.
Modal.confirm({
centered: true,
bodyStyle: {overflowY: 'inherit', maxHeight: "90vh"},
autoFocusButton: null,
content: <ReactNode />,
});
The CSS styling in bodyStyle + centered is completely optional, but it could help you keep some padding outside the modal while still be able to scroll.
I have a react bootstrap tooltip that works well unless I'm close to the edges of the window. In that case I want the tooltip not to be cut off but resized to accomadate the full text and have borders on all sides.
I also want the tooltip arrow to point just above the trigger element (in my case the 'i' icon).
My guess is that this requires working with the DOM once the ReactBootstrap.Tooltip has been rendered. I need to be able to calculate it's current size and window top and left offset positions and then re-position/re-size it.
Here's my current code (in CoffeeScript):
define [
'jquery',
'es6-shim',
'react',
'react-bootstrap'
], ($, _shim, React, ReactBootstrap) ->
{div, i, h2} = React.DOM
ToolTipHint = React.createFactory(
React.createClass
render: ->
tooltip = ReactBootstrap.Tooltip className: 'hint-content',
h2 className: 'hint-title', #props.fieldName
div className: 'hint-text', #props.tooltip
ReactBootstrap.OverlayTrigger(
trigger: ['hover']
placement: 'top'
overlay: tooltip
delayShow: 300
deplayHide: 150,
div className: 'hint-icon-container',
i className: 'gg-icon-tooltip hint-icon'
)
)
And here's the screenshot of the problem:
How can I fix this problem?
I had this very same problem when my trigger was close to the right side of the window. I fixed it by overwriting the max-width of the .popover class to:
.popover{
max-width: none;
}
and defining a width to the element inside the popover.
The tooltip has a "container" (just like the original bootstrap component that you can set). By default it is the body.
Try to play a bit with this option. I can't tell from what you provided what value you should use.
Is there any config option to put the lavel on top with center align for a textfield.
{
xtype:'numberfield',
labelAlign:'top',
labelSeparator:'',
fieldLabel: 'Title',
flex:1
}
Its working fine with label on top but aligned to left. I want to be centeraligned with top.
Thanks for your help in advance!!!
Just add a class to the label using labelClsExtra:
An optional string of one or more additional CSS classes to add to the
label element. Defaults to empty.
For example:
labelClsExtra: 'your-class'
And in your style sheet:
.your-class {
text-align: center
}
Working example: http://jsfiddle.net/qazN3/
How can I control to opacity of a disabled panel with a mask.
I would like to disable to the panel (meaning It will be touchable) and leave its opacity as is.
Thx
You can create your own CSS style sheet that overrides ExtJS's default style sheet for disabled items. In ext-all.css, there are several style configurations for the .x-item-disabled class that you can take a look at. For example, they specify the opacity for toolbar button icons like so:
.x-toolbar .x-item-disabled .x-btn-icon {
opacity: .35;
-moz-opacity: .35;
filter: alpha(opacity=35);
}
So you'll have to look up what class your panel belongs to and construct a style sheet that includes specification for your particular selectors.
CSS Syntax (Wikipedia)
I would recommend to whoever lands on this post, to create a class for the panel disabled state in your own css file and then configure the panel disabled state class as follows, so you will only affect the desired panel and not the entire application:
In your CSS
.my-disabled-panel {
opacity: .35;
-moz-opacity: .35;
filter: alpha(opacity=35);
}
And in the panel config...
Ext.create('Ext.panel.Panel', {
[...],
disabledCls: 'my-disabled-panel',
[...]
}