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
Related
I'm using ngx-bootstrap for datepicker. But when I use this datepicker inside modal, It opens under modal.
My issue is similar to this . But css changes are not working for me. Any help whould be appreciated.
I think You need to change the parent class style .
this will work for ngx-bootstrap calendar
follow this code
bs-datepicker-container, bs-daterangepicker-container { z-index: 2000; }
You are probaly using the wrong class if you follow that answer.
I took a look at the github code and saw that the class name used there is bs-calendar-container.
You might want to verify that this is the case for your wrongly z-indexed elements by inspecting them in your developer tools(F12) and verifying the class name on them.
Then you might want to change the z-index to have them appear above the modal.
The problem is caused by the modal being a direct child of the body element, and the datepicker date chooser also being a direct child of the body element, so they are competing for the same z-index space.
The bootstrap modals usually have an z-index of 1000. So setting the z-index of your datepicker item to 1200 should help, to make sure they also appear above elements that are present within the modal.
In case your datepicker has the class bs-calendar-container your CSS would look like this:
.bs-calendar-container {
z-index: 1001;
}
I am trying to use select in a card.
Problem is that when the select list is open and it should overflow outside of card, it doesn't.
The overflowing part is hidden/blocked/gone.
I've tried following and failed:
overflow:visible
increasing z-index
changing position to relative (this would dynamically increase the card to fit the select - not desired outcome)
on a side question, is it not a proper material design to use select (or other inputs) in a card?
This is because the .card class has the style overflow: hidden on it. If you remove this from your card, it will allow the content of the select to flow outside of its boundaries.
Adding overflow: visible to .card works. Here's a codepen. Just make sure you are correctly overriding the .card class styles.
You have to initialize the select manually
something like :
$(document).ready(function(){
$('select').formSelect();
});
Or
M.AutoInit();
If you dont want to initialize manually on pages all just add above one line in your script tag.
follow their documentation https://materializecss.com/select.html navigate to the initialization section
https://materializecss.com/auto-init.html
I am drawing an image inside panel and slider field using ExtJS 4. I want to change opacity of image whenever of value of slider field changes.
I am aware that opacity and filter:alpha(opacity=); rule of CSS can be applied to image which will change its opacity.
However I do not know how to apply this css rule to the image. Can anyone please guide me on this?
You can use Ext.dom.Element.setOpacity method:
Ext.fly('image-id').setOpacity(0.5); // this will make img with id 'image-id' become half-transparent
Here is live demo
Update
If you are using Ext.Img component you will have to do something like the following:
imgCmp.getEl().setOpacity(0.5);
I am using CSS3 resizable property to resize an HTML Div element.
Here is sample code : http://jsfiddle.net/blunderboy/nMTm9/1/
But, I want to update the value inside input element as soon as width of div changes. How can we achieve this ?
With setInterval, you can do this:
http://jsfiddle.net/nMTm9/3/
It's not perfect but works great.
var input = $('input'), div = $('#resizable');
function calculate(){
input.val(div.width()+"px");
}
setInterval(calculate,500);
No, CSS cannot change the value attribute of an input, or indeed any attribute of any element.
The close change content by style is if you put content in the input field or erased the content input field the label change by css.
enter link description here
I just wrote a tinymce plugin, which has a drop down box. I can increase the size of the select box, by manipulating the CSS file of the advanced theme (the theme I am using). Is there any other way to do it, without changing the CSS? Say in the function of the javascript code that actually creates the select box?
Edit:
I did set the max_width property while creating the listbox, in the createListBox function. But it only changes the width of the elements in the dropdown, not the drop down itself :(
You can always change the css using javascript:
document.getElementById("ATTRIBUTE_ID").style.width = "1000px";
See this SOF link for more details: Change an element's class with JavaScript
You should have a closer look at the tinymce configuration option editor_css.
Using this setting you may configure a css file which will overwrite the default css for the toolbar stuff. This way you don't need to change anything of the core css.
tinymce dropdown generates internally and it's hard to do this in right way, but you always can access the needed element by CSS like:
div[id*='mceu_'].mce-container.mce-panel.mce-floatpanel.mce-menu.mce-animate.mce-fixed.mce-menu-align.mce-in div.mce-container-body.mce-stack-layout {
max-height: 200px !important;
}
for me it works for all dropdown select lists inside modal windows like link-plugin - reduce height of select list block.