Is there a way to assign ContainerClass instead of ContainerCss in Simple Modal?
I am working on a website which should be responsive based on which device is being used, so for example for iPad I want the width and height of container smaller than larger screens. I have a CSS class based on #Media and would like to know if I could assign a class instead of CSS which creates style attribute in simple-modal container div.
Thanks.
Some simple jQuery in a callback should do the trick:
http://www.ericmmartin.com/projects/simplemodal/
$("#myModal").modal( {
onShow: function (dialog) {
$(this).addClass('myClass');
});
}});
Related
I'm working on Angular table with usage of cdk Virtual Scroll. Do you know if there is any way to set the dynamic height of scroll viewport? Everything works fine with standard style property but I can't set the value using ngStyle.
I would be grateful for any help.
What you can do, try pass Height of viewport you want, as a #Input to your Component.
Second option that comes to my mind is you could try to pass as ElementRef component it self in constructor:
constructor (private _elementRef: ElementRef){ ... }
And then take its Parent Height, in, for example ngOnInit:
const elHeight = this._elementRef.nativeElement.parentElement.offsetHeight;
Hope it helps.
Materialize's Datepicke rmakes use of modal (popup).
http://materializecss.com/forms.html#date-picker
Is there a way to use Materialize's Datepicker, without the modal (popup), like embed it to the webpage instead? If possible how can I achieve that?
You can probably do couple of things, such as:
1) Set the container to match the element you want datepicker to be embedded into. Materialize Datepicker has that option. See the docs.
2) Override .modal-overlay class and set its display property to none
3) Override .modal class by setting its position to relative and margin to 0
4) Override .datepicker class by setting visibility to hidden and position to fixed in order to hide the input element
The rest is up to you. But it's all about playing with CSS
EDIT: Also you will probably need to make sure that Datepicker is always open
I am working on project which needs multiple ace editor instances running, all with auto completion feature enabled
I want increase the width of suggestion window presented by one particular alone. Changing the width using the below class works, but it applies for all the error instance, which i don't need.
div.ace_editor.ace_autocomplete {
width: 40%
}
Is there a way where i can specifically target one particular ace editor instance alone?
Autocompleters for each editor do not have any specific classes, so you need to modify them by javascript, either adding class or style
if (!editor.completer) {
// make sure completer is initialized
editor.execCommand("startAutocomplete")
editor.completer.detach()
}
editor.completer.popup.container.style.width="40%"
editor.completer.popup.container.classList.add("foo")
You could even use resize() to change the width of the specific editors instance:
var popup = editor.completer.popup;
popup.container.style.width="100px";
popup.resize();
Here is my plunker. I have passing json object to chart, i want to give width 100% to line chart and height to 100px, but when we minimizing height css does not work expected. The chart does not take height and width of its parent div/panel.
Use custom CSS to specify the dimensions:
CSS:
.panel{width:100%;height:300px;}
.panel-body{width:100%;height:270px;}
.chart-container{height:100%!important;}
canvas{width:100%;height:100%!important;}
Demo: http://plnkr.co/edit/gVRwrEKWA9HaTCWgbyIS?p=preview
When a window is resized, the canvas and the graph gets new dimension as inline style which overrides the css rules in the stylesheets. To prevent this override, use !important
Finally i have to manage to resize chart by adding one more global variable in chart.js and assigning its value from our controller where we defined our chart.
In chart.js we can assign our new height as:
canvas.height = this.chart.height = Chart.defaults.global.defaultHeight; // newHeight;
In our controller we can change/update it as:
Chart.defaults.global.defaultHeight = 250;
I did not know any other way which will be better, any other suggestion will be appreciated.
I'm getting familiar with AngularJS. I'm trying to be as 'pure' as I can. For that reason, I'm trying to avoid including jQuery. However, I'm having a challenge getting an HTML element's height. Currently, I'm trying the following:
angular.module('myModule', [])
.directive('myDirective', function() {
return {
restrict: 'A',
link: function(scope, element) {
console.log(element.css('height'));
}
};
})
;
However, when this code gets executed, an empty line gets written to the console. I'm trying to display the height of the element. Is there a way to do this in AngularJS without using jQuery?
Thank you!
It appears this is working correctly and gives the same result if you use:
element.style.height
Since no inline style or CSS height is set on the element a blank line is shown. Instead of relying on the style you can get the HTML elements height directly.
console.log(element[0].offsetHeight);
http://plnkr.co/edit/03YWwjBjYpid4fVmDxlM?p=preview
How do I retrieve an HTML element's actual width and height?
The small wrapper around element provided by angular allows you to ask for properties, so:
element.prop('offsetHeight');
Will just work fine, see: http://plnkr.co/edit/pFHySDo7hjEcMKCqGuiV?p=preview