I am using deltaDecorations to show errors in my editor.
here is my code: https://gist.github.com/dinager/41578bd658b60cc912a6023f80431810
Here is the result:
I am trying to add resize property to the editor by adding to the style
resize: both;overflow: auto;
But then the hover message is partly hidden by the edges of the editor
As you can see in below attached image - the editor can resize now (bottom right), but the hover message is partly hidden
How can I add resize property to not hide elements?
Another question: can I make the hover message float inside the editor, meaning if it's at the top line it should float to the bottom, if at the side of the editor float to the middle, etc..
Attaching the code adding the markerDecorations (exists also in the gist link at the top):
this.markerDecorations = codeEditor.deltaDecorations(this.markerDecorations, [
{
range: new monaco.Range(pos.startLine, pos.startColumn, pos.endLine, pos.endColumn),
options: {
className: 'squiggly-error',
minimap: {
color: { id: 'minimap.errorHighlight' },
position: monaco.editor.MinimapPosition.Gutter,
},
overviewRuler: {
color: { id: 'editorOverviewRuler.errorForeground' },
position: monaco.editor.OverviewRulerLane.Full,
},
stickiness: monaco.editor.TrackedRangeStickiness.AlwaysGrowsWhenTypingAtEdges,
zIndex: 1,
hoverMessage: { value: parseResponse.error, isTrusted: false },
},
},
]);
solved it by adding fixedOverflowWidgets: true on monaco.editor.create options.
this.editor = monaco.editor.create(el, {
// ...
fixedOverflowWidgets: true
});
Related
While using DataTables for my project, When i align the Export buttons to the right side of the table using float:right. It is not properly aligned with the right edge of the table. Whereas it is properly aligned when i set float:left.
Please suggest a solution for this.
$(" #adminMainTable,#managerMainTable").DataTable( {
scrollY: '50vh',
scrollCollapse: true,
paging: false,
dom: 'frtpB', //This changes the position to Bottom
buttons: [
{ extend: 'excelHtml5', text: 'To Excel' },
{ extend: 'csvHtml5', text: 'To CSV' },
{ extend: 'pdfHtml5', text: 'To PDF' }
]
});
//The below code is for changing the position of buttons to right side of the table
$("div#adminMainTable_wrapper,div#managerMainTable_wrapper").find($(".dt-buttons")).css("float","right");
Using a similar approach to your code for floating right, you can do this:
$(your selector in here).find($(".dt-buttons button.dt-button:nth-child(3)")).css("margin-right","0");
In other words, remove the right-padding from the final button.
Instead of :nth-child(3), you can use :last-child. That may be safer if the number of buttons ever changes.
I have a hard time figuring out how b-table adds the thick border when you click on a b-table row, when the b-table has selectable on.
//someidea component
<template>
<b-table striped hover
:items="ideas"
:fields="ideaFields"
#row-clicked="markRead" //this turns on selectable by default.
ref="table">
</b-table>
</template>
<script>
export default {
name: 'someidea',
data()
{
return {
ideas: [{
title: 'Some idea',
description: 'Some description',
_rowVariant: 'warning',
}],
ideaFields: [
{
key: 'title',
sortable: false,
},
{
key: 'description',
sortable: false,
}
],
}
},
mounted()
{
},
methods: {
markRead(record, data, datax)
{
record._rowVariant = '';
},
},
}
</script>
Before clicking
After clicking
Now when you click on the row, it does empty the _rowVariant, changing it from yellow bg to white bg as expected. The problem that the row gets a thick border for getting focus(dont know if it really is focus but cannot describe it any better). I've checked in the inspector in both chrome and firefox(both recently updated) and I do not see any change in the focussed row, but it does get the border so im not sure how they applied it.
One important sidenote based on b-table documentation(first example table):
b-table supports programmatically selecting and de-selecting the selected row. This does sadly not apply to my situation. The clicked row is not really selected, more like focussed. If you click twice on the row in the documentation(again first table), you see that it becomes deselected but still has the border.
Ive tried this too(without success):
tr:focus {
border: none !important;
}
I hope anyone can help me out with this because even though having an ugly border is not the end of the world, it bugs me I cannot find how this style is being applied.
Thanks in advance.
Solution
Change border to outline like this:
tr:focus {
outline: none;
}
You can also do this:
tr:focus {
outline: 0;
}
The outline property is used by :focus styles by default. The purpose of outline is to make the element stand out. outline is drawn around the border.
The difference between outline & border
Outlines are not a part of the box model.
Outlines do not change the size or position of the element.
Outlines cant set each edge to a different width, or set different
colours and styles for each edge. An outline is the same on all sides
(All sides must be uniform in colour, width and style).
Outlines do not take up space they are placed on top of the element
(outlines do not interfear with the element itself or other elements
around them).
Outlines can not be circular.
I'm using the latest version of Bootbox and need to display a very large amount of text. The text is overflowing out of the Bootbox modal window and off the browser. I need the text contained and with a vertical scrollbar when appropriate. I've tried wrapping the message in various html elements, but no luck.
Here's my code:
bootbox.dialog({
onEscape: function () { },
message: JSON.stringify(data),
title: "View",
buttons: {
main: {
label: "Cancel",
className: "btn-default",
callback: function () {
//close popup and do nothing
return true;
}
}
}
});
Demo
Your JSON data is one long string, which forces the paragraph element to exceed normal width unless you specify word breaks.
.modal-body p {
word-wrap: break-word;
}
Demo
Longer demo
For when including table you may use following,
.bootbox-body table{
width:100% !important;
}
I am using ExtJs 4.2
My app needs to a have a button that will invoke a panel, that holds the navigation tree show once clicked.
This button needs to be visible at all times, and centered vertical to the middle and to the right of the screen.
How do I achieve this behavior? I don't want to nest the button in a panel, it should be a part of the view port...
Here is what I have tried:
Ext.define('NG.view.Viewport', {
extend: 'Ext.container.Viewport',
layout: 'border',
id: 'appviewport',
items: [{
itemId: 'app-header',
xtype: 'appheader',
region: 'north',
weight: 10,
border: false,
height: 60
}, {
itemId: 'navigation',
xtype: 'button',
region: 'west',
weight:15
}, {
xtype: 'carddeckmanager',
region: 'center',
weight:10,
border: false,
cls:'n-cardmanager-box',
items: [{
itemId: 'dashboard',
xtype: 'dashboard'
}]
}]
});
but this makes the button expand as the height of the viewport.
If you really want to float that button, there's no sense in adding it to a container or the viewport. Render it to the document body, configure it with floating: true, and give it a z-index that will ensure that it remains above any window (if that's what you want).
Then you can position it where you want with its alignTo method but, better yet, use anchorTo so that it sticks where you put it, even when the browser is resized.
All of this gives us:
var body = Ext.getBody();
// Create the button
var button = Ext.widget('button', {
text: "Yo"
,floating: true
,renderTo: body
});
// z-index
// Ext4's windows default z-index starts from 29000
button.setZIndex(40000);
// Anchor the right of the button to the right of the document body
// with a 5px horizontal offset.
button.anchorTo(body, 'r-r', [-5, 0]);
Put this code somewhere in the startup process of your application. Candidates could be the init method of your application, the initComponent method of your viewport, or a single afterrender listener on the viewport...
Now, if what you want is just that the button remains visible in the right border of the viewport but without it filling the whole region, you need to wrap it in a container with an appropriate layout. For example, add this to your viewport:
{
region: 'west',
layout: {type: 'hbox', pack: 'center', align: 'middle'},
items: [{
xtype: 'button',
text: "Viewport button"
}]
}
I have two questions regarding the back button in the Navigationbar element of Sencha Touch 2.
My Code
var oNavigationbar = {
docked: 'top',
backButton : {
margin: 7,
docked: "left",
ui : 'back'
},
items: [
Ext.create("Ext.Button", {
text: "Button1"
},
Ext.create("Ext.Button", {
text: "Button2",
align: "right",
}
],
};
Question 1
How do I stick the back button to the left side of the navigation bar?
If I set align:"left" Button1 is still on its left side.
But if I dock it to the left side I have to set a margin, which I rather avoid.
Question 2
How do I set the default text of the back button to something else then "Back".
Which configuration properties do I have to set?
not sure what you mean in q1... AFAIK Navigation Bar (as a subcomponent of Ext.navigation.View) has back button already left aligned.
Q2:
Ext.define('MyNavigator', {
extends: 'Ext.navigation.View',
xtype: 'mynavigator',
config: {
defaultBackButtonText: 'Go Back',
// back button a-la iPhone
// useTitleForBackButtonText: true
....
})
see at http://docs-devel.sencha.com/touch/2-0/#!/api/Ext.navigation.View-cfg-defaultBackButtonText for more info...
Cheers, Oleg