I want to give vertical height manually in a bootbox prompt.
Here is the bootbox, We can fix it exactly in the center but I want to place it slightly above.
$('#btnNewPra').on('click',function(){
bootbox.prompt({
size: "small",
title: 'Spot',
margin: '50px' ,
// centerVertical: true,
callback: function(result){
}
})
})
Your simplest option is to use the className option and some custom CSS, like so: https://jsfiddle.net/6vmjpx3y/
bootbox.prompt({
size: "small",
title: 'Spot',
className: 'mini-box',
centerVertical: true,
callback: function(result) {
}
})
and
.mini-box .modal-dialog-centered .modal-content {
margin-top: -50px;
}
The className value would be whatever makes the most sense for you. There are probably other ways of accomplishing this, but using the centerVertical option adds the .modal-dialog-centered class to the dialog wrapper. You can then apply a negative margin to the .modal-content class (the outermost "visible" part of the modal) to pull the dialog up your desired amount from the center of the viewport.
Related
I'm creating labels for polygons with the following code:
L.marker(polygon.getBounds().getCenter())
.bindTooltip('County Name', {permanent: true, direction: 'center'})
.addTo(mymap);
However, the result isn't exactly what I'd call centered. Like the majority of the tooltip is on the right side of the marker whereas I'd expect the marker to be smack dab in the middle of the tooltip.
Any ideas as to what I can do to improve the situation?
If I can get this working I'll hide the marker by doing {opacity: 0} but if I do that now it'll look off center without a frame of reference.
If you want to add labels to the polygon you can use instead customised Tooltip.
In your Javascript code :
let custom_popup = L.popup()
.setLatLng(polygon.getBounds().getCenter())
.setContent('County name')
.addTo(map);
Then you can customise to make it look like a Marker using CSS :
.leaflet-popup-close-button // we remove the X to close the popup
{
display: none;
}
.leaflet-popup-tip // We remove the arrow pointing at the coordinates
{
display: none;
}
.leaflet-popup-content // We center the text inside the Tooltip
{
text-align: center;
}
Here's the result :
How can I change a style of a component easy? I just want limit a text-field height in a sanity user inerface.
It is uncomfortable to scroll all the text every time. Where can I write something like that:
{
overflow-y: auto;
height: 200px;
}
From the screenshot provided in the question, it seems you're using rexxars markdown plugin for Sanity. When defining the markdown field in your schema, you have some options to choose from. I'm guessing what you want is a low minimum number of rows and to disable auto grow? E.g.:
export default {
name: 'blogPost',
title: 'Blog Post',
type: 'document',
fields: [
// ... other blogPost fields
{
name: 'body',
title: 'Body',
type: 'markdown',
options: {
minRows: 10,
autoGrow: false
}
}
]
}
If the options you need aren't available, try creating an issue or submit a pull request, proposing the change you need?
I've tried patch-package. Just followed instructions in the package.
The control sap.m.MessagePopover has an attribute _oPopover (containing sap.m.Popover inside).
Using this attribute, I could set the popover width:
messagePopover._oPopover.setContentWidth("450px");
However, as SAP attributes starting from _ should not be used, does anybody know a cleaner way?
As of UI5 version 1.46, a more flexible control sap.m.MessageView can be used instead of the old sap.m.MessagePopover.
There is no need to access internal properties or apply custom CSS style classes to manipulate the width as you can put MessageView anywhere you want (Still, Fiori Guideline recommends to use it only within a responsive popover or a dialog).
const popover = new ResponsivePopover({
contentWidth: "450px",
contentHeight: "450px",
content: [
/*myMessageView*/
],
});
// ...
popover.openBy(...);
Compared to MessagePopover, MessageView can group items and more.
Internally, MessagePopover uses MessageView too.
Another solution would be to use CSS class. However, there is a catch. As you can see from below generated DOM of the message popover, inline styling has been used :( .
Only way to override inline-style is by using !important in CSS which is again not recommended approach. However, considering inline CSS has been used, I would go with using !important keyword. Below is the working code:
XML Code ( for adding Class):
<MessagePopover id='myMP' class='myPopoverClass'>
<items>
<MessagePopoverItem title='Title' subTitle='SubTitle'></MessagePopoverItem>
</items>
</MessagePopover>
CSS:
.myPopoverClass {
width:100rem;
}
.myPopoverClass .sapMPopoverCont {
width:100% !important;
}
You can play around with how much width you need for message Popover.
EDIT: This is from the source code:
MessagePopover.prototype.init = function () {
var that = this;
var oPopupControl;
this._oResourceBundle = sap.ui.getCore().getLibraryResourceBundle("sap.m");
this._oPopover = new ResponsivePopover(this.getId() + "-messagePopover", {
showHeader: false,
contentWidth: "440px",
placement: this.getPlacement(),
showCloseButton: false,
modal: false,
afterOpen: function (oEvent) {
that.fireAfterOpen({openBy: oEvent.getParameter("openBy")});
},
afterClose: function (oEvent) {
that._navContainer.backToTop();
that.fireAfterClose({openBy: oEvent.getParameter("openBy")});
},
beforeOpen: function (oEvent) {
that.fireBeforeOpen({openBy: oEvent.getParameter("openBy")});
},
beforeClose: function (oEvent) {
that.fireBeforeClose({openBy: oEvent.getParameter("openBy")});
}
}).addStyleClass(CSS_CLASS);
I'm using the jeditable plugin for making some values editable. I noticed that when a value is empty the default text 'Click top edit' appears which I don't want. But I still want to make that field editable too. How to manage this?
I noticed a suggestion at http://www.datatables.net/forums/discussion/5865/jeditable-and-default-click-to-edit/p1, but that does not seem to work - at least not for me; when using the placeholder : "" the field is not editable anymore.
My related code:
$('.edit').editable('edit_save.php', {
cancel : 'Cancel',
submit : 'OK'
});//$('.edit').editable('jeditable_save.php', {
Without any text to fill it, the editable element needs to be an inline block with height and width like this:
.edit {
border: 1px solid red;
display: inline-block;
min-height: 20px;
min-width: 100px;
}
and set a blank placeholder like you mentioned:
$('.edit').editable(function (value, settings) {
return value;
}, {
cssclass: 'editing',
placeholder: '',
});
See this fiddle http://jsfiddle.net/chrisdillon/37JqF/
I tried add this row: placeholder:'
&
nbsp;' and it works.
If you can add this row, you see your input is empty.
$('.edit').editable('Something', {
something,...
placeholder:' ',
})
So to give you an idea of what I am working with, I have a popped up modal that contains a series of individual forms in the modal. Based off the current selection, the forms will be either disabled, or enabled. If they are disabled, I would like to display a message box over the disabled form in the modal explaining why it is disabled.
I've tried using Ext.msg.alert and other forms of Ext.msg, however I am unsuccessful in getting them to remain over the forms. I can align them over the form, but upon scrolling it doesn't stay over the form, it just stays fixed in the main window position, instead of follow the form inside the modal. Is this possible to do?
I then tried to do it in a hackish way and set a loading mask over the form, which displays the message, but that as well moves when you scroll down.
I attempted to use the 'fixed' property of the components, but it seemed to do nothing.
I am not sure if I am looking at this from the wrong angle or what, but things don't seem to be working out for me.
Any ideas?
listeners:{
afterlayout: function(form, eOpts){
if(form.disabled){
var msg = Ext.Msg.alert({title:'Disabled', modal: false, fixed: true, msg:'Blah blah blah mmmkay.'});
msg.alignTo(form.el, 'c-c');
//fixed
}
}
},
Try this and let me know the result. Basically, we can override the base components or write our components.
Ext.define('Artlantis.view.OverlayWindow', {
extend: 'Ext.window.Window',
alias: 'widget.overlaywin',
defaults: {
autoScroll: true
},
layout: 'fit',
width: '50%',
height: '50%',
modal: true,
closeAction: 'destroy',
initComponent: function() {
this.callParent(arguments);
}
});
// to call this component
Ext.create('Artlantis.view.OverlayWindow',{
title: 'Disabled',
items: [
{
xtype: 'panel',
items: [
...
]
}
]
});
// or call by xtype
...
xtype: 'overlaywin'