I have sidebar having body height 100%. If i use md-select inside md-content, the options are displaying at top of the page.
How do i fix the issue?
body,
body > div {
max-width: 100%;
max-height: 100%;
overflow: hidden;
}
body > div {
height: 100%;
}
I have fixed the issue by applying the display: flex to body element,
html, body {
height: 100%;
}
body {
display: flex;
}
Refer This
<html lang="en" >
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
</head>
<body ng-app="BlankApp" ng-cloak>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
<script type="text/javascript">
angular.module('BlankApp', ['ngMaterial']);
</script>
<md-input-container flex >
<label >Type</label>
<md-select ng-model="txtType" style="width:250px;">
<md-option>First</md-option>
<md-option>Second</md-option>
</md-select>
</md-input-container>
</body>
</html>
Related
I've checked the code over meticulously but I cant find anything wrong with it.
I modeled it after the menu here but that's not really working out for me. Basically, all that comes up is ur run of the mill ul.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type ="text/javascript">
<!-- Dropdown menu -->
<script>
$( function() {
$( "#dropMenu" ).menu();
} );
</script>
<style>
.ui-menu { width: 150px; }
body{
background-image: url("background.jpg");
background-repeat: no-repeat;
background-size: cover;
}
h1{
font-family:"Lucida Calligraphy","Lucida Fax", Arial;
color: Beige;
text-align:center;
}
#footer{
position: absolute;
bottom: 0;
background-color: rgba(20,90,50,.8);
margin-bottom: 0px;
padding-bottom: 0px;
border-radius:10%;
text-align:center;
color:beige;
margin-bottom: 0px;
}
#square{
height:200px;
width: 350px;
background-color:rgba(20, 90,50);
}
#wrapper{
background-color: rgba(20, 90,50, .5);
margin: auto;
border-radius:6%;
}
</style>
</head>
<body>
<div id="wrapper">
<h1>Serenity Landscaping <br /> and Property Management</h1>
<!-- <div id="square"></div> -->
<ul id="menu">
<li><div>Menu</div>
<ul>
<li><div>Home</div></li>
<li><div>Side Biz</div></li>
<li><div>Portfolio</div></li>
<li><div>Contact Us</div></li>
</ul>
</li>
</ul>
<div id="footer"><p>SLPM is owner operated and is dedicated to providing the highest quality service to all customers.
<br/>Services in the landscape and property maintenance field</p></div>
</div>
<script type ="text/javascript">
var windowWidth=$(window).width();
var wrapperWidth=(windowWidth/2);
var windowHeight=$(window).height();
var wrapperHeight=windowHeight;
$("#wrapper").height(wrapperHeight+"px");
$("#wrapper").width(wrapperWidth+"px");
<!-- footer width resizing -->
var footerWidth;
footerWidth = $("#footer").css("width", wrapperWidth);
<!-- footer width resizing -->
<!--alert(wrapperWidth);-->
<!--alert(windowWidth);-->
</script>
</body>
</html>
The first issue I have seen is you are using wrong id for initializing your menu.
I have created a fiddle for your code and did some minor change and it is working fine.
There were only silly mistakes.
Here is working fiddle.
Working Fiffle
I'm using dragging by jquery ui and have a strange effect. On start dragging an object it replacing to a new position depend of cursor offset on start dragging. Here example
Can somebody help me? Thank you
Your html should look like this:
<!DOCTYPE html>
<html>
<head>
<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="show_dlg" style="display: block;"><div id="zoomimg"><img src="http://mmyers.cloudaccess.net/accelerometer/images/638/1600/piece/Kane_Gold_6.jpg" class="ui-draggable ui-draggable-handle" style="position: absolute;"></div></div>
</body>
</html>
I have just removed this part:
-webkit-transform: rotate3d(-0.862, -0.744, 0, 22.7734933639967deg); transform: rotate3d(-0.862, -0.744, 0, 22.7734933639967deg); margin-left: -500px; margin-top: -500px; width: 1500px; height: 1500px; max-width: none; left: -179.902038574219px; top: -190.568115234375px;
as this is what was causing the problem
I am trying to use Google's Material desingn.
I have a component below whose path is epimss_design/lib/component/menu/main-menu-form.html; epimss_design is the app's name.
<!DOCTYPE html>
<link rel="import" href="../../../../packages/polymer/polymer.html">
<link rel="import" href="../../../../packages/core_elements/core_drawer_panel.html">
<link rel="import" href="../../../../packages/core_elements/core_icon_button.html">
<link rel="import" href="../../../../packages/core_elements/core_toolbar.html">
<link rel="import" href="../../../../packages/paper_elements/roboto.html">
<link rel="import" href="../../../../packages/core_elements/core_toolbar.html">
<link rel="import" href="../../../../packages/paper_elements/paper_icon_button.html">
<polymer-element name="main-menu-form">
<style>
:host {
position: absolute;
width: 100%;
height: 100%;
box-sizing: border-box;
}
#core_drawer_panel {
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 10px;
}
#section {
box-shadow: rgba(0, 0, 0, 0.0980392) 0px 2px 4px, rgba(0, 0, 0, 0.0980392) 0px 0px 3px;
background-color: rgb(250, 250, 250);
}
#section1 {
height: 100%;
box-sizing: border-box;
background-color: rgb(221, 221, 221);
}
#core_toolbar {
right: 0px;
color: rgb(255, 255, 255);
fill: rgb(255, 255, 255);
background-color: rgb(79, 125, 201);
}
</style>
<template>
<core-drawer-panel id="core_drawer_panel">
<section id="section" drawer></section>
<section id="section1" main>
<core-toolbar id="core_toolbar">
<core-icon-button icon="menu" id="core_icon_button"></core-icon-button>
<div id="div" flex>Toolbar</div>
</core-toolbar>
</section>
</core-drawer-panel>
</template>
<script type="application/dart">
import 'package:polymer/polymer.dart';
import 'dart:html';
//import 'package:epimss_polymer/.dart';
#CustomTag( 'main-menu-form' )
class MainMenuForm extends PolymerElement
{
MainMenuForm.created() : super.created();
void menuAction()
{
print ( 'Menu tapped' );
}
}
</script>
</polymer-element>
The entry_point epimss_design.html is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ePIMSS</title>
<!-- <script src="packages/web_components/platform.js"></script>
not necessary anymore with Polymer >= 0.14.0 -->
<script src="packages/web_components/dart_support.js"></script>
<link rel="import" href="packages/polymer/polymer.html">
<link rel='import' href='packages/epimss_design/component/menu/main-menu-form.html'>
<script type="application/dart">
export 'package:polymer/init.dart';
</script>
<!-- <script src="packages/browser/dart.js"></script> -->
<link rel="stylesheet" href="epimss_design.css">
</head>
<body unresolved>
<main-menu-form></main-menu-form>
</body>
</html>
When I run the application I am consistently getting the following error
Uncaught SyntaxError: Failed to execute 'querySelector' on 'Element':
'#packages/epimss_design/component/menu/menu' is not a valid selector. (http://127.0.0.1:8080/epimss_design.html:1509)
Exception caught during observer callback: Error: Failed to execute 'querySelector' on 'Element': '#packages/epimss_design/component/menu/menu' is not a valid selector.
at Error (native)
at core-iconset-svg.Polymer.iconById (http://127.0.0.1:8080/epimss_design.html:1509:59)
at core-iconset-svg.Polymer.cloneIcon (http://127.0.0.1:8080/epimss_design.html:1513:25)
at core-iconset-svg.Polymer.applyIcon (http://127.0.0.1:8080/epimss_design.html:1557:24)
at core-icon.Polymer.updateIcon (http://127.0.0.1:8080/epimss_design.html:1461:17)
at core-icon.g.invokeMethod (http://127.0.0.1:8080/packages/polymer/src/js/polymer/polymer.js:12:13320)
at core-icon.g.notifyPropertyChanges (http://127.0.0.1:8080/packages/polymer/src/js/polymer/polymer.js:12:11606)
at Object.Observer.report_ (http://127.0.0.1:8080/packages/web_components/platform.js:12:12616)
at Object.createObject.check_ (http://127.0.0.1:8080/packages/web_components/platform.js:12:18105)
at c (http://127.0.0.1:8080/packages/web_components/platform.js:12:5467) (http://127.0.0.1:8080/packages/web_components/platform.js:12)
The last menu in the exception is meaningless to me. I have no clue where it is coming from. I expect the last menu to be main-menu-form, the name of the component. I hope it makes sense to someone.
Thanks
It seems to be caused by this bug https://code.google.com/p/dart/issues/detail?id=19770
see also https://groups.google.com/a/dartlang.org/forum/#!topic/web/Jbiml0hFH40
The transformer seems to have an error in how it handles the src attribute of the img element (in core-icon)
UPDATE
These attributes need special treatment because they are evaluated by the browser before Polymer has a chance to evaluate the binding. The solution provided by Polymer is to bind to the attributes _src and _img instead.
Jquery Mobile Iscroll Header hiding when focus on text field form in IOS app .
How to make fixed header while focus to text field when keyboard appears.
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>Hello World</title>
<link rel="stylesheet" href="js/jquery.mobile-1.4.2.css">
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.mobile-1.4.2.min.js" type="text/javascript">
</script>
<script src="js/iscroll.js" type="text/javascript"></script>
<style type="text/css">
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
overflow: hidden; /* this is important to prevent the whole page to bounce */
}
#wrapperGemini {
position: absolute;
z-index: 1;
top: 45px;
bottom: 20px;
left: 0;
width: 100%;
overflow: hidden;
}
#scroller {
position: relative;
z-index: 1;
-webkit-tap-highlight-color: rgba(0,0,0,0);
width: 100%;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;
-o-text-size-adjust: none;
text-size-adjust: none;
}
</style>
<script type="text/javascript">
var myScroll;
function loaded () {
myScroll = new IScroll('#wrapperGemini', {
scrollbars: true,
mouseWheel: true,
bounce:false
});
}
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
</script>
</head>
<body onload="loaded();">
<div data-role="page" >
<!-- data-position="fixed" -->
<div data-role="header" data-position="fixed" data-transition="none" data-tap-toggle="false" data-theme="b" >
<h1>INDEX PAGE</h1>
</div>
<div data-role="content" >
<div id="wrapperGemini" >
<div id="scroller">
<p>some content that will be scrolled</p>
<p>Some more content that will be scrolled</p>
<input type="text" placeholder="1" />
<input type="text" placeholder="2" />
<input type="text" placeholder="3" />
<input type="text" placeholder="4" />
<input type="text" placeholder="5" />
<input type="text" placeholder="6" />
<input type="button" value="GO!!!" />
</div>
</div>
</div>
<div data-role="footer" data-position="fixed" data-transition="none" data-tap-toggle="false" data-theme="b" >
<h1>My Footer</h1>
</div>
</div>
<script type="text/javascript" src="phonegap.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
How to display header fixed when keypad appears?
My suggestion is Use iScroll for resolve this issue
position: fixed not to play well on iOS - Check it
Check these SO Questions for your reference!
CSS “position: fixed;” into iPad/iPhone?
Fixed positioning in Mobile Safari
I'm having issues with my website rendering on iOS devices. I have an iframe that wont scroll on iOS devices at all (testing on iOS 5.1.1). Here is the site: http://pixel2html.sitesbycoop.com/fanwu/ I just need help on this one...I've tried to -webkit-overflow-srolling:touch; on every parent element possible. Please help, I'm more than happy to give more info if needed.
I'm using jquery to load the iframe in from a click function into the following code:
Markup of iframe container on main page:
<div class="overlay">
<div class="frame-container"></div>
</div>
Markup of Iframe Template
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Fan Wu | Welcome</title>
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/foundation.min.css" type="text/css" />
<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/style.css" type="text/css" />
<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/css/port-set-viewer-styles.css" type="text/css" />
</head>
<body class="port-set">
<div class="row" style="width: 100%; height: 100%; overflow: auto; -webkit-overflow-scrolling: touch;">
<!--content and more markup -->
</div>
</body>
</html>
CSS
.overlay{
position: fixed;
background: rgba(0,0,0,0.9) url('img/loader.gif') no-repeat center center;
top: 0px; bottom: 0px;
left: 0px; right: 0px;
z-index: 100;
display: none;
}
.frame-container {
width: 100%;
height: 100%;
}
.frame-container iframe {
position: fixed;
top: 0px;
z-index: 1000;
border: none;
transition: opacity 1s;
left: -100%;
height: 100%;
width: 100%;
}
.frame-container iframe.active{
opacity: 1 !important;
left: 0;
}
JS
jQuery.noConflict();
jQuery(document).ready(function(){
jQuery(".image-box").click(function(e){
/* Store link into variable, href */
var href = jQuery(this).find("a").attr("href");
/* Activate overlay */
jQuery(".overlay, body, .close").addClass("active");
/* Set iframe's src attribute to the stored href */
jQuery(".frame-container").html('<iframe style="opacity: 0;" width="100%" height="100%" src="'+href+'"></iframe>');
/* Animate iframe into view */
jQuery('iframe').load(function(){
jQuery(this).addClass("active");
jQuery(".overlay").addClass("remove-graphic");
});
e.preventDefault();
});
jQuery(".close").click(function(e){
jQuery(".overlay, .frame-container, iframe, body, .close").removeClass("active remove-graphic");
e.preventDefault();
});
jQuery(function(){
jQuery(".image-box").preloader();
});
});