i am using a md-toolbar for my page and it is not adjusting to full window, how to make it responsive(media queries ) in desktop as well as mobiles ?
index.html
<md-toolbar>
<div class="md-toolbar-tools">
<!-- Logo -->
<img src="img/logo/1.png">
<!-- navbar Search -->
<div class="navbar-collapse" id="navbar-collapse-1">
<div id="right">
<form class="navbar-form" role="search">
<div class="input-group add-on">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
<input type="text" class="form-control" placeholder="Search Properties" >
</div>
</form>
</div>
</div>
<button type="button" class="btn btn-info">For Landlords</button>
<!-- Side Menu -->
<md-button type="button" class="btn btn-info" >
Menu
</md-button>
</div>
</md-toolbar>
Include a viewport-meta-tag like <meta name="viewport" content="width=device-width">
Related
Here is a codepen link
I'm trying to make an Angular sidenav, that must be aligned in a row with some form (which contains search box) which are in a md-toolbar and below of toolbar.
I am having someother stuff, like in the link above, the p tag text should be immediately after the md-toolbar but my sidenav is occupying much space below and I am not able to adjust the layout.
Can anyone help me fixing this out?
Got it fixed. Actually i was trying to keep the sidenav content in the md-toolbar itself ,but when i separated it the issue fixed. here's the code
header.html file
<md-toolbar ng-controller="toolBarController">
<div class="md-toolbar-tools">
<img src="img/logo/oxkey.png">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<div id="right">
<form class="navbar-form" role="search">
<div class="input-group">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
<input type="text" class="form-control" placeholder="Search Properties" name="q">
</div>
</form>
</div>
</div>
<button type="button" class="btn btn-info">For Landlords</button>
<md-button class="md-icon-button" ng-click="toggleRight()" ng-hide="isOpenRight()" class="md-primary">
Menu
</md-button>
</md-toolbar>
sidenav.html
<md-toolbar class="md-theme-light">
<h1 class="md-toolbar-tools">Menu</h1>
</md-toolbar>
<md-content ng-controller="RightCtrl" layout-padding="">
<form>
<md-input-container>
<label for="testInput">Test input</label>
<input type="text" id="testInput" ng-model="data" md-autofocus="">
</md-input-container>
</form>
<md-button ng-click="close()" class="md-primary">
Close
</md-button>
</md-content>
</md-sidenav>
Can you please let me know how I can show and Hide an element in angular? in following example I want to initially hide the #item-details and show it if check box checked or Hide if un-check
<!DOCTYPE html>
<html ng-app="app">
<body>
<div class="container" ng-controller="checkController">
<div class="row">
<div class="col-md-2"><input type="checkbox" name="item" value="new" />Add New Item <br /></div>
<div class="col-md-6" id="item-details" ng-show="">
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js">/script>
<script>
var app = angular.module('app', [])
.controller('checkController', function() { });
this.
});
</script>
</body>
</html>
First assign an model to the check box
<div class="col-md-2"><input type="checkbox" name="item" value="new" ng-model="checked" />Add New Item <br /></div>
then simply assign the same model value to item-details in ng-show
<div class="col-md-6" id="item-details" ng-show="checked">
you are done
Example
var app = angular.module('app', []);
app.controller('checkController', function($scope) {
$scope.hide = false;
$scope.checkboxClick = function() {
$scope.hide = !$scope.hide;
};
});
HTML:
<body ng-app="app">
<div ng-controller="checkController" class="container">
<div class="row">
<div class="col-md-2">
<input type="checkbox" ng-click="checkboxClick()" value="new" name="item" /> Add New Item
<br />
</div>
<div ng-show="hide" id="item-details" class="col-md-6">
<div aria-label="..." role="group" class="btn-group">
<button class="btn btn-default" type="button">Left</button>
<button class="btn btn-default" type="button">Middle</button>
<button class="btn btn-default" type="button">Right</button>
</div>
</div>
</div>
</div>
</body>
In one way or the other, the ng-show is not working but I use the ng-if as a work around which work perfectly.
<!DOCTYPE html>
<html ng-app="app">
<body>
<div class="container" ng-controller="checkController">
<div class="row">
<div class="col-md-2"><input type="checkbox" name="item" ng-model="item" value="new" />Add New Item <br /></div>
<div class="col-md-6" id="item-details" ng-if="item == true">
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
</div>
</div>
</div>
hope is helps thanks.
<div class="container" ng-controller="checkController">
<div class="row">
<div class="col-md-2"><input type="checkbox" name="item" value="new" ngmodel="checked" ngchecked="checked == '1'"/>Add New Item <br /></div>
<div class="col-md-6" id="item-details" ngshow = "checked == '1'">
<div class="btn-gr`enter code here`oup" role="group" aria-label="...">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
</div>
</div>
</div>
Just do above
I using angularjs bootstrap modal, and i want to validate form before submit, so i use required in input tag like this:
<div ng-controller="ModalDemoCtrl">
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title">Add</h3>
</div>
<div class="modal-body">
<form id="productForm" novalidate>
<div>
<label for="ProductName"> ProductName:</label>
<input type="text" name="ProductName" id="ProductName" ng-model="model.ProductName" value="" required />
</div>
<div style="margin:10px">
<label for="Price">Price:</label>
<input type="text" name="Price" id="Price" ng-model="model.Price" required />
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="button" ng-click="Save()" ng-disabled="productForm.$invalid">Save</button>
<button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
</div>
</script>
<button type="button" class="btn btn-default modalBtn" ng-click="open()">addProduct</button>
</div>
but it doesn't work, what is the problem?
Trying adding a name to the form. productForm.$invalid refers to the name of the form. Towards the bottom of the docs there are some examples.
EDIT: I would also move the buttons into the form
<div ng-controller="ModalDemoCtrl">
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title">Add</h3>
</div>
<form name="productForm" novalidate>
<div class="modal-body">
<form id="productForm" name="productForm" novalidate>
<div>
<label for="ProductName"> ProductName:</label>
<input type="text" name="ProductName" id="ProductName" ng-model="model.ProductName" value="" required />
</div>
<div style="margin:10px">
<label for="Price">Price:</label>
<input type="text" name="Price" id="Price" ng-model="model.Price" required />
</div>
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="button" ng-click="Save()" ng-disabled="productForm.$invalid">Save</button>
<button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
</div>
</form>
</script>
<button type="button" class="btn btn-default modalBtn" ng-click="open()">addProduct</button>
</div>
I have the following Bootstrap UI modal template that displays a list of customers in a scrolling DIV.
<div>
<div class="modal-header">
<h3 class="modal-title">Select a customer</h3>
</div>
<div class="modal-body">
<div class="modal-container">
<label data-ng-repeat="cust in customers">
<input name="customer" type="radio" data-ng-value="{{cust}}" value="{{cust}}" data-ng-checked="{{cust}}.name==$parent.selected.item.name" ng-model="$parent.selected.item" />{{cust.name}}<span class="text-muted"> - {{cust.address}}</span>
</label>
</div>
<div class="modal-footer">
<button class="btn btn-success pull-left" data-ng-click="new()">New</button>
<button class="btn btn-primary" data-ng-click="ok()">OK</button>
<button class="btn btn-default" data-ng-click="cancel()">Cancel</button>
</div>
<div id="newCustomer" class="collapse">
<div class="form-group">
<label for="customerName" class="col-sm-5 control-label">Customer Name</label>
<div class="col-sm-5">
<input id="customerName" class="form-control" type="text" data-ng-model="newCustomer.name" placeholder="New customer name" />
</div>
</div>
<div class="form-group">
<label for="customerAddress" class="col-sm-5 control-label">Address</label>
<div class="col-sm-5">
<input id="customerAddress" class="form-control" type="text" data-ng-model="newCustomer.address" placeholder="New customer address" />
</div>
</div>
</div>
</div>
</div>
There are three buttons at the bottom New, OK and Cancel. What I want to happen is when the New button is clicked, the newCustomer div block should be toggled between expanded and collapsed states and importantly to resize the modal so that when expanded the modal will resize to fit the space taken up by the div block, and also to shrink the modal when the div block is collapsed.
Can this be done using a pure Bootstrap and AngularJS solution?
I am using Bootstrap v3.3.1 and AngularJS v1.3.9.
What I'd do is to actually use bootstrap collapse within your modal. This way you'd have everything done with boostrap.
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<label data-ng-repeat="cust in customers">
<input name="customer" type="radio" data-ng-value="{{cust}}" value="{{cust}}" data-ng-checked="{{cust}}.name==$parent.selected.item.name" ng-model="$parent.selected.item" />{{cust.name}}<span class="text-muted"> - {{cust.address}}</span>
</label>
<div class="collapse" id="collapseExample">
<div class="well">
<div class="form-group">
<label for="customerName" class="col-sm-5 control-label">Customer Name</label>
<div class="col-sm-5">
<input id="customerName" class="form-control" type="text" data-ng-model="newCustomer.name" placeholder="New customer name" />
</div>
</div>
<div class="form-group">
<label for="customerAddress" class="col-sm-5 control-label">Address</label>
<div class="col-sm-5">
<input id="customerAddress" class="form-control" type="text" data-ng-model="newCustomer.address" placeholder="New customer address" />
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-success" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
NEW BUTTON
</button>
<button class="btn btn-primary" data-ng-click="ok()">OK</button>
<button class="btn btn-default" data-ng-click="cancel()">Cancel</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
http://jsfiddle.net/tea6gj4e/1/
I am using AngularJS as my front-end, below is my HTML file
<div >
<div class="modal-dialog ">
<div class="modal-content">
<div class="modal-body">
<div style="margin-bottom: 10px;">
<button type="button" ng-click='cancel()' class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">{{alert.summary}}</h4>
</div>
<form name="alertForm" novalidate>
<div ng-if="!displayMap">
<alert ng-if='displayAlertMsg' type="alertMsg.type">{{alertMsg.message}}</alert>
<input type="hidden" ng-model="alert.source" />
<div class="field-box">
<span class="checkboxLabel">Public: </span><input type="checkbox" id='updateType' ng-true-value="1" ng-false-value="0" ng-model="alert.publicAlert"></input>
</div>
<div class="field-box">
<label>qweqwName:</label>
<input class="span5" id='updateName' ng-model="alert.summary" required />
</div>
<div class="field-box">
<label>Notes:</label>
<textarea id='updateNotes' ng-model="alert.details" rows="2" required ></textarea>
</div>
<div class="span3" style="margin-left: 0px;">
<div class="field-box">
<label>Priority:</label>
<select ng-model="updatePriority" ng-options="p.name for p in priorities" ng-change='updateP(updatePriority)'></select>
</div>
<div class="field-box">
<label>Status:</label>
<select ng-model="updateState" ng-options="s.name for s in statusList" ng-change="updateS(updateState)"></select>
</div>
</div>
</div>
<div id="alertmap-buttons" class="span2 no-margin">
<button id="alert-add-location" class="btn btn-default pull-left" ng-click="displayMap = !displayMap"><span ng-if="!displayMap">Add Location</span><span ng-if="displayMap">Done</span></button>
<button id="alert-cancel-location" class="btn btn-danger" ng-if="displayMap">Cancel</button>
</div>
<div id="latlng-label" class='span3 pull-right no-margin'>
<div class="pull-left"><label class="latlng-label">lat: {{alert.latitude}}</label></div>
<div class="pull-right"><label class="latlng-label">long: {{alert.longitude}}</label></div>
</div>
<!--Select Coords from map-->
<!--Google Map Directive-->
<div ng-init="displayMap = false" ng-if="displayMap">
<google-map class="create-alert-map angular-google-map-container" center="map.center" zoom="map.zoom"
draggable='true'
events="mapEvents">
<markers models="themarkers"
coords="'self'"
>
</markers>
</google-map>
</div>
<!--Lat and Long
<input placeholder="Latitude" class="span2" id='updateLat' ng-model="alert.latitude" />
<input style="float: right" placeholder="Longitude" class="span2" id='updateLong' ng-model="alert.longitude" /-->
</form>
</div>
<div ng-if="!displayMap" class="modal-footer">
<button type="button" class="btn btn-default" ng-click="submit()" ng-disabled="alertForm.$invalid">Save</button>
<button type="button" class="btn btn-default" ng-click="cancel()">Close</button>
</div>
</div>
</div>
This file is given to me by client and he want some CSS changes etc in that. But when I try to edit the file nothing is happening to the modal dialog box, for example if I change button text from Save to Submit it's not applying in the file. How come this???
If this information is not enough I can give controller JS file also. Thanks..