What is the best way to open the datepicker calendar upwards? The default is to open downwards. I have changed the margin to a negative value on datepicker-calendar-wrapper class and it works fine, but wondering if theres any other way to do this.
JSFiddle
.datepicker-calendar-open-up {
margin: -356px 0 0;
}
Add dropup class to datepicker wrapper.
<div class="datapicker dropup">
...
</div>
http://jsfiddle.net/nvrfat1y/1/
The datepicker is is built around bootstrap dropdowns control which includes a dropup variation.
http://getbootstrap.com/components/#btn-dropdowns-dropup
Related
The Materialize CSS Autocomplete opens in the upward position when at the lower end of the screen and it has a larger list to display, the problem is that the text input area with the blinking cursor gets covered and the user doesn't get the idea that he can type.
1) How can you force it to always go downwards? or, 2) How can you tell it to open above the input area without covering it when it decides to open in the upwards position? Ether of these solutions would be OK.
The closest solution I found is here (for the dropdown menu) and here, however these solutions look to me like jQuery which I am not familiar with (yet) and would need a plain JavaScript solution.
I use MaterializeCSS version 1.0.0 through the CDN.
Pictures: Autocomplete Closed and Autocomplete Open
hi the autocomplete is going upward because there is not space below but use can try this code
<style>
#autocomplete-options-509040f2-ba4c-72d4-413d-2e375f5c25f8
{
position: initial;
}
</style>
or you can add jquery to add height of the parent div when the auto complete has been click
$("#idofautocomplte").on("click", function () {
$("#parentDivId").css("height", "400px");
});
try use this style:
.autocomplete-content{
top: 46px !important;
max-height: 300px !important;
}
this keep autocomplete always downward
To me it is working very well
I am using material-ui v3.1.2 with react js v16.5.2. In my page, there are many places where i am using <TextField> with select attribute. So, whenever i click on that TextField and when the dropdown appears, it hides my parent vertical scrollbar causing some ui shifting towards right as it hides the scrollbar. I don't want that to happen, so any solution would be of great help.
Here is the screenshot of before opening the dropdown,
Here is the screenshot of after opening the dropdown,
A workaround for this issue can be to use the Select component of material-ui and use the 'disableScrollLock: true' property. But in that case, the scroll bar will not disappear on opening select, so the whole page will be scrollable while the select options are open.
<Select
MenuProps={{
disableScrollLock: true,
}}
...
/>
I have a problem using Select component, so The solution using a textField:
<TextField select SelectProps={{ MenuProps: { disableScrollLock: true } }}/>
Answering only if it helps somebody.
By default whenever you open the dropdown using mat <Menu></Menu> it will add overflow: hidden; to the body node.
One possible solution is that you add overflow-y: auto !important; on the body element and this also worked for me.
For example:
Here you see I have added overflow-y: auto !important; in my body style
Now here you see mat is automatically assigning overflow: hidden; to my body element. Which I have catered by !important;
i am trying to implement the multiple date picker option in bootstrap modal popup. I have used jquery plugin for the same. However nothing seems to work. Please help me with the implementation.
project files
Set datepicker's z-index above the modal's which is 1050.
<style>
.datepicker {
z-index: 1600 !important; /* has to be larger than 1050 */
}
I am using angular 6 with angular material design.I make simple application of slidebar with toggle menu icon. I am facing one issue .whenever I am selection any item from slidebar menu currently I have 3 items select any item .It close my slide bar navigation , but my menu button is auto focus .
here is my code
https://stackblitz.com/edit/angular-353qur?file=src%2Fapp%2Fcontactmanager%2Fcomponents%2Ftoolbar%2Ftoolbar.component.html
Steps to reproduce this bug
Select menu button or icon .it shows sidebar having three option.
Select any option it close sidebar and menu icon is auto focus .why ??
I want to remove auto focus after selection of item from sidebar
Update
Please check on mobile .click on F12 and selection mobile.
please check on small device
const SMALL_WIDTH_BREAKPOINT = 560;
Important point
you will only reproduce this bug when you output window in less than 500px
add the below style in styles.css
// remove blue border focus
button:focus {
outline: none !important;
}
you have to remove css hover effect. add a class to the mat-button ('no-hover')
<button mat-button (click)="toggleSidenav.emit()" class="sidenav-toggle no-hover">
<mat-icon>menu</mat-icon>
</button>
and inside template css
.mat-button.no-hover ::ng-deep .mat-button-focus-overlay {
background: none;
}
I want to create a website where the user has to enter soma data. To make this as easy as possibble, i just show the main input elements and let a helper panel slide down if needed. As possible, these panels should be draggable (i am looking for javascript for that in the moment). My main problem is that when the panel slides down, the content at the top is shown first, but i want to slide down like shown below:
Is there any way to make this?
Thanks in advance.
Look at this JSFiddle.
This should show the principle to achieve this effect. You need a container div with overflow: hidden; and a child positioned to the bottom of the container div, then you can change the height of the container with jQuery to show/hide the content.
Also, to make the panels draggable, jQuery UI has a great function called draggable which works great. Give it a try.
Quick access: Fiddle: http://jsfiddle.net/VuPyL/1/ (updated) , BTW: I made it toggle-like.
Generally it seems to be only solve-able with animate,
if you dont want to have any wrapper element you would really like to use DOM's native property "scrollHeight" - that allows you to scroll always to bottom, in combination with a height toggle, it does exactly what you need.
Overflow: hidden dont have to be in the CSS - jQuery is adding it itself while toggling height.
This solution may seem a bit longer, but is more clear in what is actually happening :) :
HTML
<div id="helper-panel">
Here's
<br />
My
<br />
Content
</div>
<button id="show-helper">Show/hide Helper Panel</button>
CSS
#helper-panel{
height: 70px;
width: 375px;
position: relative;
overflow: hidden; /*optional - jQuery is adding it*/
display: none;
}
JS/jQuery
$('#show-helper').click(function(){
var $helper = $('#helper-panel');
$helper.animate({
height: "toggle"
},{
duration: 800,
progress: function(){
$helper.scrollTop( $helper[0].scrollHeight );
}
});
});
As suggested by #Andrew Pope to have item draggable/droppable it is best to use jQuery UI's draggables&droppables.
Also check sortable if you just want to change the order of the helper-menu items using drag&drop ;)
jQuery UI is not a standard part of jQuery - so dont forget to include it.
When using these it is good to wrap each draggable element. So the HTML would be:
<div id="helper-panel">
<div>Here's</div>
<div>My</div>
<div>Content</div>
</div>
And the jQuery (with jQuery UI):
$('#helper-panel').sortable() //make the items inside #helper-panel sortable
.disableSelection() //when sorting, you dont want selecting
.css('cursor','default'); //looks better with default cursor