I have created a button. On click of the button an overlay panel is made visible.
Since modal = true , rest of the page is masked. (from top = 0px)
My requirement is that I need to mask only a part of my page(from top = 125 px) .
I have tried to override the css class .x-mask . But it didn't help !!
Here is the sample code ,
xtype: 'panel',
baseCls: 'overlay-panel', // it styles the overlay panel and not the underlying mask
modal: {
id: 'myModalClass',
style:'background-color:black;opacity:0.8;top:125px;'
},
I could see the bgcolor and opacity getting applied.
But I am unable to override the attribute ' top = 0px !important '
Kindly provide your valuable suggestions , TIA !
go with your panel, but instead use the following values:
xtype: 'container',
top: 125,
bottom: 0,
left: 0,
right: 0,
style: 'background-color: rgba(0,0,0,0.8)'
basically it's only important to set the top value and the other values can be set inside your css.
That will create a floating container (or panel if needed).
But on the other side you could also use:
Ext.Viewport.setMasked({xtype:'loadmask',message:'goto heaven', top:125});
Related
I am working on one fabric js editor, in which I need to implement TextBox as a Button look and feel,
For that, I Have implemented TextBox with Background, But Problem is that Height of TextBox.
I am trying this kind of code :
var text = new fabric.Textbox("this is text", {
top: 0,
left: 0,
width: 300,
height: 500,
fill: 'red'
})
canvas.add(text);
Now my Textbox is rendered of width: 300 but height is not rendered. how can I set Height to My TextBox
And another Thing, when I set Height to TextBox, I need to keep text in Center of height (vertical center)
what should I do, I can't understand, how to override default fabtic.Textbox class.
Please help me, If any one have Any suggestion.
Quick question:
Is there a way to add class and/or ID of the elements in the path of TinyMCE status bar under content?
TinyMCE has no such capability built into its status bar. If you wanted to add that you could do so by modifying the code. I would note that with any type of longer ID or Class labels that status bar will get filled up quickly which is why it does not do so by default.
The Elements in the Statusbar have a bunch of classes from Tiny Editor, you can examine it in the browser (chrome or firefox) with f12.
From there, it is no problem to override the current styling with some code like
.mce-statusbar.mce-container {
position : relative;
height : 0;
margin-top : -20px;
opacity : 0.5;
background-color :#fff;
border : 1px solid #333;
}
Beside, you can manipulate the code, where content is written in the Statusbar. See Plugin Wordcount for example. They are using some code like this to update the statusbar and enter a class name:
if (statusbar) {
Delay.setEditorTimeout(editor, function () {
statusbar.insert({
type: 'label',
name: 'wordcount',
text: ['Words: {0}', getCount()],
classes: 'wordcount',
disabled: editor.settings.readonly
}, 0);
editor.on('setcontent beforeaddundo undo redo keyup', debouncedUpdate);
}, 0);
}
Having a small issue with tooltips in the editor, read the api but can't understand what it is saying and I can't seem to find examples anywhere that I can understand either.
I have set up a Classic Editor build, and all the buttons on the toolbar have tooltips with the default position below the button, I want to be able, just for this one instance of the editor, to change the tooltip position to above the buttons instead. The instance is set up like this:
ClassicEditor.create( document.querySelector( '#content' ) )
.then( editor => {
console.log( 'Editor was initialized', editor );
this.annEditorInstance = editor;
} )
.catch( err => {
console.error( err.stack );
} );
That creates an editor instance that is set up exactly as I want, except for the issue with the tooltip. How do I change this? Thanks in advance.
There are two approaches to the problem:
CSS
Tooltips elements have either .ck-tooltip_s or .ck-tooltip_n class. By default all CKEditor 5 tooltips have the former so you could override it in your styles and make it act like the later:
<style>
.ck.ck-tooltip.ck-tooltip_s {
bottom: auto;
top: calc(-1 * var(--ck-tooltip-arrow-size));
transform: translateY( -100% );
}
.ck.ck-tooltip.ck-tooltip_s .ck-tooltip__text::after {
top: auto;
bottom: calc(-1 * var(--ck-tooltip-arrow-size));
transform: translateX( -50% );
border-color: var(--ck-color-tooltip-background) transparent transparent transparent;
border-width: var(--ck-tooltip-arrow-size) var(--ck-tooltip-arrow-size) 0 var(--ck-tooltip-arrow-size);
}
</style>
JS
The UI of the editor is an MVC(VM) structure. The position of the tooltip can be controlled using the JS and the Button#tooltipPosition property ('s' or 'n').
E.g. you can access the toolbar UI elements using editor.ui.view.toolbar and change their properties:
editor.ui.view.toolbar.items.map( item => item.tooltipPosition = 'n' )
but note that not all toolbar items are buttons. Some, for instance, are dropdowns so you'd need to use item.buttonView.tooltipPosition = 'n' in that case. So unless you really want to use JS, I'd go with a simple CSS solution.
I have a FormPanel being created like this:
Modal.EmailPanel = Ext.extend(Ext.form.FormPanel, {
dock: 'top',
id: 'emailPanel',
name: 'emailPanel',
standardSubmit : false,
styleHtmlContent: false,
width: 200,
height: window.innerHeight - (Ext.is.Phone ? 20 : g_topToolbarHeight),
scroll: 'vertical',
layout: {
type: 'vbox',
align: 'stretch'
},
items: [
... etc.
What happens is that at first it displays correctly:
http://i.imgur.com/TOjG3fQ.png
But as soon as it is scrolled, part of it disappears under Safari's URL bar:
http://i.imgur.com/E2LAwQR.png
I am new to Sencha Touch so I'm not very sure what the issue could be. Any input would be appreciated.
So the problem is that when you scroll down your page that cannot fir inside the browser windows it reveals the bottom section and hides the upper?
Well this is the natual scroll behavior of any browser... even in this page, that cannor fit he window, when you scroll it the upper part slide under the url bar... am i missing something?
I'm trying to nest an image in a div and make it draggable on the X axis within this div.
Here's a jsFiddle to illustrate my point
I'd like the blue box to stop dragging once the user reaches its left/right edges, he shouldn't be able to see any of the red wrapper anymore.
Imagine the blue box is a very wide image, I want to be able to drag it from its left side to its right side without exceeding its width. It means you can't drag it to the right when you reached its left edge, and you can't drag it to the left when you reached its right side.
In a nutshell, when you reach the edges of the image, you can't drag it any more.
How can I set that kind of behavior ?
I tried playing with containment but I couldn't achieve what I wanted.
Thanks for your help.
HTML :
<div id="wrapper">
<p id="timeline"><img src="" alt="Timeline" width="2000" height="400"/></p>
</div>
CSS :
#wrapper {
width: 800px;
height: 400px;
background-color : red;
overflow: hidden;
cursor: w-resize;
}
#timeline {
width: 2000px;
height: 400px;
margin: 0 auto;
background-color: blue;
}
JS :
$("#timeline").draggable({
axis: "x"
});
You were correct to use the containment option but you'll want to pass in array of coordinates to constrain the draggable.
Per the jQuery UI docs the containment option can take an Array in format [x1, y1, x2, y2]. In your case the y values are irrelevant because you are already constraining the draggable to the x axis, so you can simply pass in 0.
For the x values 0 will work for x1 since the image is already starting on the right edge. For x2 you'll need to use:
(width of parent - width of image)
So
(800 - 2000) = -1200
Therefore you can pass the following in for the containment option:
containment: [-1200, 0, 0, 0]
Live Example - http://jsfiddle.net/LMXLj/