I've upgraded to Angular Material 0.11.1. I'm using Angular JS v1.4.6. I'm trying to implement the new date-picker function. The issue I have is when I use the standard code as follows:
<md-content>
<h4>Standard date-picker</h4>
<md-datepicker ng-model="myDate" md-placeholder="Enter date"></md-datepicker>
</md-content>
When I select the picker, I get a wierd display issue where half the screen is grey and can see part of the datepicker box. Once this is executed and try to select anything else with pop-up box the same thing happens. Anyone knows why this happening and how to fix it?
Images below:
I myself was having the exact same issue, every time I clicked to open the md-datepicker, I had a large white block at the bottom of my page.
After spending some time monitoring the page behaviour on clicking the md-datepicker, I realised that on clicking the md-datepicker, angular material was dynamically changing the css styling of the <html> and <body> classes in my css stylesheets, like so:
<body class="" style="position: fixed; width: 100%; top: -231px;">
<html lang="en" style="overflow-y: scroll;">
as a quick fix, I have set my body class like so, to override the dynamic changes:
body {
top: 0px !important;
}
Hopefully this will help others with the same issue.
I faced the same issue and applied the following tag in md-datepicker, it worked all fine for me :)
style="position:fixed;"
Related
I have being trying to resolve this issue for more than 9 hours but have no idea how to solve it even in angular js material demo site this problem is occuring.
My problem is with body scrollbar getting hidden when the md-select dropbox is open. Does anyone know how can i get both scrollbar working at the same time. I am using angular js material 1.1.0
Here is a demo with the issue.
Codepen Demo
When you click on a select, the rule :
position: fixed;
Is applied to the body so the scroll-bar is removed, so you need to override this rule by this one :
body {
position: static !important;
}
Here is your codepen with the scroll-bar.
after clicking on any of md-dialog buttons (ok,cancel,create..) the dialog it self diaper but a <div class="md-dialog-container"></div> which is part of the default dialog code dose not diaper and act as a cover to the all web page, turning it unresponsive..
i have found this link https://github.com/angular/material/issues/3782 but the solution suggested doesn't seem to work..
any advice would by highly appreciated
i ended up using some basic js to solve this problem
js:
$scope.removeDialogContainer=function(){
$('.md-dialog-container').addClass('display-none-md-dialog-container');
};
css:
.display-none-md-dialog-container{
display: none !important;
}
adding this code ($scope.removeDialogContainer()) to the relevant dialog buttons seems to work
in my opinion it's not the best solution, would have preferred a css or html solution, not using js..
I am new to Bootstrap and Angular. In my webpage there is a button and i am providing a popover for a span like this
<span popover="Download Project History" popover-trigger="mouseenter" tooltip-placement="top" style="padding: 5px" translate="DOWNLOAD">DOWNLOAD</span>
But its getting hidden under navbar.
Based on my googling i found to provide data-container="body" in the html element. But its not working too.
Can anyone please help me?
Thanks
I had a similar problem where the popover was hidden behind overflow content and adding the following attribute fixed it:
popover-append-to-body="true"
tooltip-append-to-body="true"
attaches the tooltip to the body and makes it visible.
You need to override the z-index value, you can have a look for the default values (for navbar and popover) in original Bootstrap's CSS file. In my case this helped:
.popover {
/* just in case it would overlap with fixed navbar, then show this over the navbar. Original value 1010, value for navbar is 1030 */
z-index: 1030;
}
I am using the YUI multi page calendar on my website. I would like to center this on my web page but I am unsure of how to do this due to the complex CSS I am not used to. I have tried adding margin-left & margin-right: auto but this is not working.
An example of this multi-page calendar can be found here: http://developer.yahoo.com/yui/examples/calendar/calgrp_clean.html
Would somebody be able to help me center this calendar?
Thanks in advance.
This is extremely simple. You just need to define a width for the main div so the margin can center it. You also need to put a div right before the main div closes to clear the months so the main div has a distinct height/width.
Add this style to the main Div:
<div id="cal1Container" class="yui-calcontainer multi" style="margin: 0 auto; width: 500px; float: none;">
And before this Div closes add this
<div style="clear: both;"></div>
Now it works! Floats are pretty confusing at first, but often that's something that needs to be done. Other than that it's basic CSS.
I am using CSS3 hover and transitions to show and hide an image. On mobile devices I would like to use the same transition for touch events.
Basically, the first touch would perform the hover effect or rollover, and the touch up would perform the roll off.
I would like to stay away from using JavaScript to do this. If there is a way to do it with pure CSS3 that would be the best option.
Use the :active pseudo-class in your css, then add ontouchstart="" and onmouseover="" to the body tag.
The following code is excerpted from my site, in which I have buttons that get smaller and glow white when hovered(on pcs) or held down(on touch devices)
<style>
.boxbutton:active{
-webkit-transform:scale(0.9);
-moz-transform:scale(0.9);
-ms-transform:scale(0.9);
-o-transform:scale(0.9);
transform:scale(0.9);
-webkit-box-shadow:0px 0px 20px #FFF;
-moz-box-shadow:0px 0px 20px #FFF;
-o-box-shadow:0px 0px 20px #FFF;
box-shadow:0px 0px 20px #FFF;
}
</style>
<body ontouchstart="">
<a href="#teamdiv">
<div class="boxbutton" id="teambb">
<h5>Team</h5>
</div>
</a>
</body>
The following edits are no longer relevant because I have deleted the original, incorrect instructions, but if you were here before these may still be helpful
EDIT: I have discovered it works more reliably if, rather than putting ontouchstart="" in each link, put it in the <body> tag. So your body tag should look like this<body ontouchstart=""> and your links look like this
<a href="#teamdiv">
<div class="boxbutton" id="teambb">
<h5>Team</h5>
</div></a>
EDIT 2: I have figured out that, rather than copying your CSS and use screen size queries for desktop, just add `onmouseover="" to the body tag also, so the :active pseudo class will be called by the mouse on the desktop AND by touches on mobile. You can just ignore the rambling about media queries if you do this.
If you don't want to modify your HTML code, you could try this:
<script>
document.body.addEventListener('touchstart',function(){},false);
</script>
If anyone is still having this issue in 2020 and beyond this article helped me.
My issue was that :hover effect wasn't working on iPhones in the Safari browser. I couldn't really use the JS solutions I found on other answers and resources because the elements I wanted to attach :hover to were created dynamically on fetching data from a 3rd party API. Just adding ontouchmove to the root HTML element and :hover to the appropriate element in the CSS folder fixed it. (Sorry for my English, I'm not a native speaker :p)