When I call the simplemodal method, I do that like so:
jQuery("#stats").modal({
maxWidth: 400,
maxHeight: 300,
onOpen: function (dialog) {
dialog.overlay.fadeIn('slow', function () {
dialog.data.hide();
dialog.container.fadeIn('slow', function () {
dialog.data.slideDown('slow');
});
});
},
onClose: function (dialog) {
dialog.data.fadeOut('slow', function () {
dialog.container.hide('slow', function () {
dialog.overlay.slideUp('slow', function () {
jQuery.modal.close();
});
});
});
}
});
However, when the modal is rendered, both max values are ignored. The resulting element with inline styles is
<div id="simplemodal-container"
class="simplemodal-container"
style="height: 697px; width: 1861px; left: 231px; top: 85.5px; position: fixed; z-index: 1002;">
Is there an issue with the way I specified the max values? Or, is there an issue with simplemodal?
Thanks! E
I think those min/max settings are used to just set the actual height/width for SimpleModal. The modal's container will be sized according to the content as long as the content's size is within the min/max settings. Otherwise, the modal container size will be set at to the min/max values. That's all it does. For example, if the content is bigger than maxHeight & maxWidth settings, then there will be scroll bars:
See this fiddle here
Your content
<div id="stats" style="width:400px; height:400px;">
Your content will show in modal with scroll bars,
because it is bigger than maxWidth, maxHeight.
</div>
The modal
jQuery("#stats").modal({
maxWidth: 300,
maxHeight: 300,
minWidth: 100,
minHeight: 100,
...
If you don't want the modal to shrink/expand with the content, you can force the modal to stay at a specified width & height. Some people even swap out classes (one for normal modal, one for long modal, etc.):
#simplemodal-container {
height: 360px;
width: 600px;
}
If you dynamically change the content of the div (like from an ajax call) you can also do this:
$("#simplemodal-container").css('height', 'auto'); //Resets container height
$("#simplemodal-container").css('width', 'auto'); //Resets container width
$(window).trigger('resize.simplemodal'); //Refresh the modal dialog
Related
I am trying to render a simple Azure Map in a vue.js single-file component. I can get the map to draw at a specified center and zoom. And draw a line segment exactly where I want it.
But I cannot draw a marker properly. It does draw, but it is seriously south-west from the specified coordinate (which is on the an endpoint of a line segment drawn previously).
Here's a single page Vue.js 'App.vue':
<template>
<div id="myMap"></div>
</template>
<script>
import * as atlas from "azure-maps-control";
export default {
mounted: function() {
this.map = new atlas.Map("myMap", {
center: [-113.666783, 53.806008],
zoom: 7,
view: "Auto",
authOptions: {
authType: "subscriptionKey",
subscriptionKey: "<redacted>",
},
});
let self = this;
//Wait until the map resources are ready.
this.map.events.add("ready", function() {
//Create a data source and add it to the map.
var dataSource = new atlas.source.DataSource();
self.map.sources.add(dataSource);
//Create a line and add it to the data source.
dataSource.add(
new atlas.data.LineString([
[-112.926043, 53.803],
[-113.666783, 53.806],
])
);
//Create a line layer to render the line to the map.
self.map.layers.add(
new atlas.layer.LineLayer(dataSource, null, {
strokeColor: "blue",
strokeWidth: 5,
})
);
//Create an HTML marker and add it to the map.
var marker1 = new atlas.HtmlMarker({
color: "DodgerBlue",
position: [-112.926043, 53.803],
anchor: "bottom",
htmlContent: '<div class="pulseIconNormal"></div>',
popup: new atlas.Popup({
content:
'<div style="padding:10px">Sensor</div>',
pixelOffset: [0, -30],
}),
});
self.map.markers.add(marker1);
//Add a click event to toggle the popup.
self.map.events.add("click", marker1, () => {
marker1.togglePopup();
});
});
}
}
</script>
<style>
#myMap {
height: 100vh;
width: 100vw;
}
.pulseIconNormal {
display: block;
width: 10px;
height: 10px;
border-radius: 50%;
background: blue;
}
</style>
When I looked at DOM for the marker (in Firefox dev tools), this is the style that I see:
transform: translate(-50%, -100%) translate(737px, 235px) rotateX(0deg) rotateZ(0deg);
This isn't coming from CSS, but is in inline. That's the reason, but not the explanation why. It appears the control itself is generating this.
I found the problem. I am using NPM to load azure-maps-control and I had to explicitly add
<style src='azure-maps-control/dist/atlas.min.css'></style>
to the .vue file.
The map div in your code isn't closed properly. Instead of <div id="myMap" /> it should be <div id="myMap"></div>. HTML standards say self closing div's are invalid. Give that a try and see if it helps.
If it doesn't try inspecting the HTML marker DOM to see if any CSS is being appended to it by your app and try adjusting to see if it addresses the issue.
Looking at your code, the HTML marker should be anchored bottom center to its position.
For the same problem with Angular (11), I had to add the azure css file to my angular.json like so:
"styles": [
"src/styles/styles.scss",
"node_modules/azure-maps-control/dist/atlas.min.css"
],
I'm using some echarts in my Vue application with vue-echarts. All charts have :autoresize="true".
My problem is, that if I try to print the page, the width of the charts are set to match the width of the browser. If browser is full screen then some charts get clipped.
CSS:
.echarts {
width: 100%;
min-height: 200px;
}
#media print {
#page { margin: 1cm }
body {
width: 110mm;
height: 297mm;
margin: 25mm 25mm 25mm 25mm;
}
.echarts {width: 600px !important;} /* This does not work! */
}
In the generated DOM there is a container, and inside that another div with the style: position: relative; width: 567px; height: 400px; padding: 0px; margin: 0px; border-width: 0px; cursor: pointer;
Width of the inner container is updated when browser is resized.
Yes, I have faced the same problem. I have also tried before print and after print and call function to redraw the chart but some times its break when Brower gets a zoom out and zoom in.
I say it's not the best solution but it works perfectly.
Solution -
Overwrite the window.print method in mounted.
window.print = function () {
setTimeout(function () {
_print();
}, 500);
};
use flag print_mode for printing.
let self = this;
window.addEventListener('afterprint', function () {
self.print_mode = false;
});
user ref of the chart instance to get base64 data. call getDataURL() to get image data.
chart = echarts.init(chart_dom);
chart_img = chart.getDataURL()
<img v-if="print_mode" class="print-only" :src="chart_img"></img>
so while printing it display image and print and in normal mode, it shows a chart.
I want to create a Tabcontainer and fill its TabPage contents programmatically, but the TabPages won't be displayed. So far my Code:
_buildUI: function () {
var bordercontainer = new dj_BorderContainer({ style: "height: 100%; width: 100%;", gutters: false, region: "top" });
var tabcontainer = new dj_TabContainer({ useMenu: false, region: "center", tabposition: "top", doLayout: "false", style: "height: 100%; width: 100%;" });
for (var i = 0; i < ki_KisConfig.widgets.movingwindow.calccount; i++) {
var contentpane = new dj_ContentPane({ title: "Calculation " + (i + 1), content: "content", style: "height: 100%; width: 100%;" });
//contentpane.startup();
tabcontainer.addChild(contentpane);
}
tabcontainer.startup();
bordercontainer.addChild(tabcontainer);
bordercontainer.startup();
do_domConstruct.place(bordercontainer.domNode, this.interface, "first");
bordercontainer.resize({ h: "265px", w: "432px" });
},
I've googled around and tried different things. As you cann see I'm setting the doLayout-Property mentioned here. I also use a BorderContainer like mentioned here in the last posting and I'm trying to resize it after creating the TabContainer like mentioned here.
It doens't matter if I'm calling the method in the postCreate- or the startup-function of the containing widget.
I'm trying to set the width and height via style or to startup every "sub"widget.
Nothing works and the TabContainer only gets displayed when I'm resizing the browserwindow or resizing it by opening/closing the developertools (F12). If it gets displayed it looks like I want it. The only problem is that the TabList has a size of 0x0 and the same with the TabPaneWrapper when I'm inspecting directly the DOM.
Has anyone any idea?
Edit
After calling startup only on the BorderContainer I get this result:
The tablist layout is strange and also the content of the programmatic selected tab isn't displayed. Everything is again fine after a window resize:
Solution (summary)
I retrieved the best result with defining the BorderContainer and the TabContainer in the HTML-template. Unfortunately the layout of the tablist still failed. This answer delivered the solution for correct tablist layout: My widget didn't contain resize() so I added it and everything is now working fine.
resize: function() {
var tabcontainer = dj_registry.byId("tabContainerMW");
if (tabcontainer) {
tabcontainer.resize(arguments);
}
},
Some notes to your code:
The region attribute is here not required. Its only used to indicate the position for BorderContainer children.
var bordercontainer = new dj_BorderContainer({
style: "height: 100%; width: 100%;",
gutters: false,
region: "top"
});
You don't need to set a width and height on your ContentPane, let this do the TabContainer.
var contentpane = new dj_ContentPane({
title: "Calculation " + (i + 1),
content: "content",
style: "height: 100%; width: 100%;"
});
I've created a sample for you, maybe this helps you out.
require(["dijit/layout/BorderContainer", "dijit/layout/TabContainer",
"dijit/layout/ContentPane", "dojo/domReady!"],
function(BorderContainer, TabContainer, ContentPane) {
// first create the BorderContainer without any arguments.
let bc = new BorderContainer({}, "bc");
// then create your TabContainer with region center.
let tc = new TabContainer({
region: 'center'
}, document.createElement("div"));
// add it to your BorderContainer
bc.addChild(tc);
// then create three tab panes (ContentPane) and add them to your TabContainer
let cp = new ContentPane({
content: "My tab pane!",
title: "My tab title"
}, document.createElement("div"));
tc.addChild(cp);
let cp2 = new ContentPane({
content: "My second tab pane!",
title: "My second tab title"
}, document.createElement("div"));
tc.addChild(cp2);
let cp3 = new ContentPane({
content: "My closable tab pane!",
title: "My closable tab title",
closable: true
}, document.createElement("div"));
tc.addChild(cp3);
// call startup on your BorderContainer. startup of BorderContainer will call also the startup methods of all children (TabContainer, ContentPane's).
bc.startup();
});
body, html {
height: 100%;
width: 100%;
overflow: hidden;
margin: 0 auto;
}
<link href="//ajax.googleapis.com/ajax/libs/dojo/1.4/dijit/themes/tundra/tundra.css" rel="stylesheet"/>
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<span class="tundra" style="width: 100%; height: 100%;">
<div id="bc" style="width: 100%; height: 100%;"></div>
</span>
Edit
As an addition:
I was able to create a fiddle, which reproduces the failure. The problem here is that the createDialogContent() method is getting called after the dialog show's up. As I mentioned below in the comments section, it is important to create a dialog's content before showing it.
In this fiddle (bottom end of code) are two sections, which call both the same methods, just transposed. In the first snippet, the methods are called in the wrong order. Int the second snippet, they're called in the right order.
// uncomment this
createDialogContent();
dialog.show();
// comment this
// dialog.show();
// createDialogContent();
How can I apply a dynamic width and height to a react-bootstrap modal window?
I have checked the react-bootstrap docs here but could not figure out how to do that.
Actually the value of width and height props would be dynamic (could be any values) as this will be a reusable component in my app (to be used on many pages) thus can't apply width/height through some CSS class.
'bsSize' property as mentioned in docs also not working, although predefined sizes of xs, md, lg is not what I exactly want, rather I need width and height to be set on modal via props.
Here is my sample JSX code:
var MyWindow = React.createClass({
getInitialState() {
return { show: true };
},
close() {
this.setState({ show: false });
},
open() {
this.setState({ show: true });
},
save() {
},
render: function () {
var Button = ReactBootstrap.Button,
Modal = ReactBootstrap.Modal,
ModalBody = ReactBootstrap.ModalBody,
ModalHeader = ReactBootstrap.ModalHeader,
ModalFooter = ReactBootstrap.ModalFooter,
ModalTitle = ReactBootstrap.ModalTitle;
return (
<Modal show={this.state.show} onHide={this.close}>
<ModalHeader closeButton>
<ModalTitle>My Cool Window</ModalTitle>
</ModalHeader>
<ModalBody>
<h4>Text in a modal</h4>
<p>Duis mollis, est non commodo luctus</p>
</ModalBody>
<ModalFooter>
<Button onClick={this.close}>Cancel</Button>
<Button bsStyle="primary" onClick={this.save}>Save</Button>
</ModalFooter>
</Modal>
);
}
});
React.render(<MyWindow width={700} height={400} />, mountNode);
According to its documentation, you have to customize your own css class to achieve the style you want via modal's prop dialogClassName.
So we might have my.jsx code below:
<Modal dialogClassName="my-modal">
</Modal>
With my.css below:
.my-modal {
width: 90vw /* Occupy the 90% of the screen width */
max-width: 90vw;
}
Then you will have your custmized modal!
.my-modal{
min-width: 50%
}
Works for me!!!
The other mentioned solution only works for setting the width.
For editing the height, you need to add your custom css class to the contentClassName attribute.
For Example:
<Modal contentClassName="modal-height"></Modal>
Css Class:
.modal-height {
height: 70%;
}
For editing the width you need to add your custom css class to the dialogClassName attribute.
For Example:
<Modal dialogClassName="modal-width"></Modal>
Css Class:
.modal-width {
width: 70%;
}
Possible Issues:
Sometimes you will have to use !important to over-ride bootstrap imposed CSS, so experiment with that as well.
Credits: Found the solution here.
var galWin = Ti.UI.createWindow({
title: "Alejandro's Big Adventure",
modal: true,
backgroundColor: "828F99",
layout: "horizontal"
});
var border = Ti.UI.createView({
backgroundColor: "2585CC",
height: 1,
width: pWidth,
top: 30
});
var bottomButton = Ti.UI.createView({
backgroundColor: "828F99",
height: "10%",
width: pWidth,
bottom: 0
});
var galContainer = Ti.UI.createScrollView({
top: 0,
width: pWidth,
height: pHeight - border.height - border.top,
backgroundColor: "2585CC",
layout: "horizontal",
contentWidth: pWidth,
showVerticalScrollIndicator: true
});
for(var i = 0; i < myImages.length; i++){
var view = Ti.UI.createView({
borderRadius: 10,
top: margin,
left: margin,
width: size,
height: size
});
var img = Ti.UI.createImageView({
image: "images/" + myImages[i],
top: 0,
width: view.width * 1.25,
height: view.height * 2
});
view.add(img);
galContainer.add(view);
};
Firstly: for the title if you want to get the title of the window
so you can get it with getTitle() method like this
galWin.getTitle()
secondly: for the bottom
if you want to get the bottom of the window here you can't do that because the window is the top element in you hierarchy and is the doc
Window's bottom position, in platform-specific units.
On Android, this property only works with lightweight windows. See "Android Heavyweight and Lightweight Windows" in the main description of Titanium.UI.Window for more information.
so you get the bottom of the element according to it's parent so here the window have no parent
but in general if you want to get the bottom of any element
you can use getBottom() but be aware that this method will return a number only if you provide a bottom property inside the element other than that you will get Nan
and if you want to get the bottom of an element after the layout drawn on the screen you can you postlayout event and using rect.y to get the top of the element and then you can add the element height and finally minus it from the window height and for that if you don't have the window height you can use displayCaps.contentHeight to get the screen height
sorry for Long hope it help