I wanted to build a simple template like Youtube with angular material.
But I am kinda stuck with a sidebar navigation issue. The following should be possible in the template
1. The sidebar should be opened on load (depending on the size of the screen)
2. If the browser is resized, the sidebar should autohide/show
3. If the menu button on the top-left is clicked, the sidebar should toggle as a part of the page (and not an overlay). It can be an overlay only when the screensize is small enough.
The menu button in the navigation bar and the sidebar are in different controllers. So I have written a factory to share the click event and its outcome
The html code for the html is as below
<html>
<head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css" />
<style>
.add-vertical-shadow{
-webkit-box-shadow: 0px 4px 18px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 4px 18px 0px rgba(0,0,0,0.75);
box-shadow: 0px 4px 18px 0px rgba(0,0,0,0.75);
}
</style>
<!-- Angular Material requires Angular.js Libraries -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<!-- Angular Material Library -->
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.1/angular-material.min.js"></script>
<!-- User js files here -->
<script src="main.js"></script>
<script>
</script>
</head>
<body ng-app="mainApp" layout="column">
<div ng-cloak="" class="toolbardemoBasicUsage" layout="column">
<md-toolbar class="md-hue-2 add-vertical-shadow" ng-controller="navCtrl">
<div class="md-toolbar-tools">
<md-button class="md-icon-button" aria-label="menu" ng-click="toggleClicked()">
<md-icon aria-label="Menu" class="material-icons">menu</md-icon>
</md-button>
<h2 flex="" md-truncate="">MyApp</h2>
<md-button class="md-icon-button" aria-label="more_vert">
<md-icon aria-label="more_vert" class="material-icons">more_vert</md-icon>
</md-button>
</div>
</md-toolbar>
<!-- this will contain the main body and the sidebar -->
<md-content flex >
<div layout="vertical" ng-controller="sidebarCtrl" layout-fill>
<!-- Sidebar start -->
<md-sidenav class="md-sidenav-left md-whiteframe-4dp" md-component-id="leftSideBar" md-is-locked-open="{{hide}}">
<form>
<md-input-container>
<label for="testInput">Test input</label>
<input id="testInput" type="text" ng-model="data" />
</md-input-container>
</form>
</md-sidenav>
<!-- Sidebar end -->
<!-- Main Body start -->
<md-content flex layout-padding>
Main body
</md-content>
<!-- Main Body end -->
</div>
</md-content>
</div>
</body>
</html>
and the js file
var mainApp = angular.module('mainApp',['ngMaterial']);
mainApp.factory('toggleSidebar', function($mdSidenav, $mdMedia){
return {
hide : $mdMedia('gt-xs'),
toggle : function(sidebarElement){
$mdSidenav(sidebarElement).toggle();
this.hide = !this.hide;
}
};
});
mainApp.controller('navCtrl', function($scope, toggleSidebar) {
$scope.toggleClicked = function(){
toggleSidebar.toggle('leftSideBar');
console.log('hide : ' + toggleSidebar.hide);
}
});
mainApp.controller('sidebarCtrl', function($scope, toggleSidebar) {
$scope.hide = toggleSidebar.hide;
});
Any help is greatly appreciated.
The problem was, "Any changes in the service parameter wasn't reflecting sidebarCtrl controller."
I can't pinpoint the reason, but the bonding somehow wasn't 2-way, although I expected it to be
The below code helped
mainApp.controller('sidebarCtrl', function($scope, toggleSidebar) {
$scope.hide = function(){
return toggleSidebar.hide;
};
});
Related
TODO: Create an AngularJS directive to display list of images in an endless, smooth left to right scrolling loop. To keep it simple you can assume the fixed height/width for the images indicated above.the work should be done in the directive and styles without adding supporting libraries or plugins.
angular.module('myApp', [])
.controller('myCtrl', function ($scope) {
// list of images to scroll, each image is 280px x 200px
$scope.images = [
'http://build.ford.com/dig/Ford/Mustang/2018/BP3TT-TILE-EXT/Hero/EXT/4/vehicle.png',
'http://build.ford.com/dig/Ford/Mustang/2018/BP3TT-TILE-EXT/Hero[EcoBoost®%20Fastback]/EXT/4/vehicle.png',
'http://build.ford.com/dig/Ford/Mustang/2018/BP3TT-TILE-EXT/Hero[EcoBoost® Premium Fastback]/EXT/4/vehicle.png',
'http://build.ford.com/dig/Ford/Mustang/2018/BP3TT-TILE-EXT/Hero[EcoBoost® Convertible]/EXT/4/vehicle.png',
'http://build.ford.com/dig/Ford/Mustang/2018/BP3TT-TILE-EXT/Hero[GT Fastback]/EXT/4/vehicle.png',
'http://build.ford.com/dig/Ford/Mustang/2018/BP3TT-TILE-EXT/Hero[GT Premium Convertible]/EXT/4/vehicle.png',
'http://build.ford.com/dig/Ford/Mustang/2018/BP3TT-TILE-EXT/Hero[Shelby® GT350R]/EXT/4/vehicle.png',
'http://build.ford.com/dig/Ford/Mustang/2018/BP3TT-TILE-EXT/Hero[Shelby GT350®]/EXT/4/vehicle.png'];
})
.directive('myScroller', function () {
return {
// >> your directive code <<
};
});
.container {
width: 700px;
margin: 0 auto 100px;
padding: 20px;
overflow: hidden;
}
.container .image-list {
height:200px;
width:2240px;
}
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#1.1.5" data-semver="1.1.5" src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="myCtrl">
<div class="container">
<h1>Static Images</h1>
<div class="image-list">
<img ng-repeat="image in images" ng-src="{{image}}" />
</div>
</div>
<div class="container">
<h1>Scrolling Images</h1>
<!-- use my scroller directive, see script.js file for directions -->
<div my-scroller="images"></div>
</div>
</div>
</div>
</body>
</html>
I have read a lot of articles about how to check if the device can hover for making a good responsive design, but still no solution. I tried with media(hover:not) but it works only on Google Chrome on mobile. Can you help me? Thank you in advance.
The following demo utilizes MediaQueryList API to control the Drawer plugin at the breakpoint of 1025px (just a guess since you didn't provide any info in regards to your iPad). Details of what to remove, add, and change are commented in demo.
Basically after page loads, if the screen is > 1025px then the Drawer plugin is removed and the side menu is hidden. If it's < 1025px, then plugin is loaded and side-menu is visible. This will occur should there ever be a resizing of the screen as well.
For the touch issue I have added jQuery UI Touch Punch. You have jQuery UI loaded (although I haven't noticed it being used on your site). jQuery UI does not recognize touch events so this plugin will translate touch events into equivalent versions of the mouse events so that jQuery UI will react to touch events. Not really sure it matters if you only have mouse events registered on desktop and touch events only on mobile. If you decide that you aren't going to use jQuery UI, then use this polyfill Pointer Events jQuery which allows you to use touch, mouse, etc. pointer type events.
Demo
<!DOCTYPE html>
<html lang="bg">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--|SWAP| positions of <link>s~~~~~~~~~~~~~~|BEGIN|-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/css/drawer.min.css">
<link rel="stylesheet" href="style.css">
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~|END|-->
<!--|ADD| media query here or in style.css|BEGIN|~~~-->
<style>
#media (min-width: 1025px) {
.drawer-toggle.drawer-hamburger { display: none !important }
}
</style>
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~|END|-->
<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 src="https://cdn.jsdelivr.net/npm/jquery-ui-touch-punch#0.2.3/jquery.ui.touch-punch.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/iScroll/5.2.0/iscroll.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/js/drawer.min.js"></script>
<!--|REMOVE| this <script> tag~~~~~~~~~~~~~~~~|BEGIN|->
<script>$(document).ready(() => $('.drawer').drawer())</script>
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~|END|-->
<title>Счетоводна къща Елина</title>
</head>
<body class="drawer drawer--left">
<div id="wrapper" role="main">
<!--|ADD| an #id to this <div>~~~~~~~~~~~~|BEGIN|-->
<div id='mobNav' role="banner">
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~|END|-->
<button type="button" class="drawer-toggle drawer-hamburger"> <span class="sr-only">toggle navigation</span>
<span class="drawer-hamburger-icon"></span>
</button>
<nav class="drawer-nav" role="navigation">
<ul class="drawer-menu">
<li><a class="drawer-brand" href="#">Начало</a></li>
<li><a class="drawer-brand" href="./services.html">Услуги</a></li>
<li><a class="drawer-menu-item" href="./accounting-services.html">Счетоводни услуги</a></li>
<li><a class="drawer-menu-item" href="./taxing-services.html">Данъчни услуги</a></li>
<li><a class="drawer-menu-item" href="./administration-of-remuneration.html">Администриране на възнаграждения</a></li>
<li><a class="drawer-menu-item" href="./others.html">Други</a></li>
<li><a class="drawer-brand" href="./prices.html">Цени</a></li>
<li><a class="drawer-brand" href="./about-us.html">За нас</a></li>
<li><a class="drawer-brand" href="./contacts.php">Контакти</a></li>
</ul>
</nav>
</div>
<!-- header -->
<header>
<img src="./images/logo.png" alt="Лого">
<nav>
<ul>
<li>Начало</li>
<li>Услуги
<ul class="dropdown">
<li>Счетоводни услуги</li>
<li>Данъчни услуги</li>
<li>Администриране на възнаграждения</li>
<li>Други</li>
</ul>
</li>
<li>Цени</li>
<li>За нас</li>
<li>Контакти</li>
</ul>
</nav>
<hr>
</header>
<!-- slider -->
<div id="slider">
<img id="left-arrow" src="./images/arrow.png" alt="left-arrow" class="controllers">
<img id="right-arrow" src="./images/arrow.png" alt="right-arrow" class="controllers">
<div id="circle-controllers-section">
<div id="0" class="circle-controllers"></div>
<div id="1" class="circle-controllers"></div>
<div id="2" class="circle-controllers"></div>
</div>
</div>
<script src="./scripts/get-content.js"></script>
<script src="./scripts/slider.js"></script>
<!-- email form -->
<form id="email-form" method="GET">
<div id="email-container">
<h2>Пишете ни</h2>
<label for="myEmail">Имейл:</label>
<input id="myEmail" type="email" name="myEmail" placeholder="Въведете имейл" required>
<label for="myName">Имена:</label>
<input id="myName" type="text" name="myName" placeholder="Въведете име и фамилия" required>
<label for="subject">Предмет:</label>
<select name="subject" required>
<option value="" disabled selected hidden>Изберете предмет</option>
<option value="Счетоводни услуги">Счетоводни услуги</option>
<option value="Данъчни услуги">Данъчни услуги</option>
<option value="Администриране на възнаграждения">Администриране на възнаграждения</option>
<option value="Друго">Друго</option>
</select>
<label for="message">Съобщение:</label>
<textarea id="message" rows="4" cols="40" name="message" placeholder="Въведете съобщение" required></textarea>
<div id="mistake-field"> </div>
<input type="submit" name="button" value="Изпрати"/>
</div>
</form>
<!-- footer -->
<footer>
<hr>
<div id="footer">
<div>
<img id="logo" src="./images/logo.png" alt="Лого">
<a target="_blank" href="https://www.facebook.com/%D0%A1%D1%87%D0%B5%D1%82%D0%BE%D0%B2%D0%BE%D0%B4%D0%BD%D0%B8-%D1%83%D1%81%D0%BB%D1%83%D0%B3%D0%B8-%D0%95%D0%BB%D0%B8%D0%BD%D0%B0-%D0%95%D0%9E%D0%9E%D0%94-368462670244655/?modal=admin_todo_tour">
<img id="facebook" src="./images/facebook-logo.png" alt="Фейсбук">
Посетете и харесайте нашата страница във Фейсбук.</a> </div>
<p>Copyright © 2017 All Rights Reserved</p>
</div>
</footer>
</div>
<!--|ADD| <script> here or on external file |BEGIN|-->
<script>
/* Create a mediaQueryList (mql) with the breakpoint
|| matching your iPad width when in landscape mode
*/
var mql = window.matchMedia('(min-width: 1025px)');
// The callback function passing the Event Object
function modDrawer(e) {
// if change media event matches the mql...
if (e.matches) {
// ...close .drawer...
$('.drawer').drawer('close');
//...remove the plugin...
$('.drawer').drawer('destroy');
//...and hide the menu.
document.querySelector('#mobNav').style.display = 'none';
// Otherwise...
} else {
//...start the plugin...
$('.drawer').drawer();
//...make the menu...
document.querySelector('#mobNav').style.display = 'block';
//...and the button visisble.
document.querySelector('.drawer-toggle.drawer-hamburger').style.cssText = 'block !important';
}
}
/* Register the mql to listen for a media change
|| modDrawer() is the callback
*/
mql.addListener(modDrawer);
</script>
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~|END|-->
</body>
</html>
I need a top right menu in the nav bar. But on mouseover, the sub-menu appears truncated above the window.
How to make it appear so that the right of the submenu is next to the window border ?
new Vue({
el: '#app'
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/element-ui/1.4.7/theme-default/index.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/element-ui/1.4.7/index.js"></script>
<div id="app">
<el-menu class="el-menu" mode="horizontal">
<el-submenu index="4" style="float: right;">
<template slot="title"><i class="el-icon-menu"></i></template>
<el-menu-item index="4-1"><i class="el-icon-setting"></i> Settings</el-menu-item>
<el-menu-item index="4-2"><i class="el-icon-information"></i> About</el-menu-item>
<el-menu-item index="4-3"><i class="el-icon-circle-close"></i> Logout</el-menu-item>
</el-submenu>
</el-menu>
</div>
You can change the position properties of the menu in the css. Reset the left value, and add right: 0
new Vue({
el: '#app'
});
.el-menu--horizontal .el-submenu > .el-menu {
left: initial !important;
right: 0;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/element-ui/1.4.7/theme-default/index.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/element-ui/1.4.7/index.js"></script>
<div id="app">
<el-menu class="el-menu" mode="horizontal">
<el-submenu index="4" style="float: right;">
<template slot="title"><i class="el-icon-menu"></i></template>
<el-menu-item index="4-1"><i class="el-icon-setting"></i> Settings</el-menu-item>
<el-menu-item index="4-2"><i class="el-icon-information"></i> About</el-menu-item>
<el-menu-item index="4-3"><i class="el-icon-circle-close"></i> Logout</el-menu-item>
</el-submenu>
</el-menu>
</div>
I can not seem to style my website... for example the <pre> tags.
Nothing I do works. I am trying to style the whois results, I've tried wrapping it in a div and styling that, styling the pre tags only, styling everything. I just can't seem to get it working. I am hoping I am missing something stupid. You can see from the CSS I have tried numerous combinations (tried deleting them all just having pre ect)
Nav bar:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="javascript.js"></script>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title>CWCS Domain Checker Tool</title>
</head>
<body>
<!--- This Keeps the navbar from staying right near top -->
<div class="header">
</div>
<!---- Nav bar, Using bootstrap ----->
<nav class="navbar navbar">
<div class="container-fluid">
<div class="navbar-header">
<div class="nav-bar-logo">
<img src="images/cwcs-logo.png">
</div>
</div>
<div class="nav-list-container">
<ul class="nav navbar-nav">
<li>Domain Diagnostics</li>
<li><a id="sd" href="#">Server Diagnostics</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Second Line Tools
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a id="dc" href="#">Daily Checklist</a></li>
<li><a id="bt" href="#">Backup Tracker</a></li>
<li><a id="tl" href="#">Task List</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<!------- End of nav bar ---->
Main page -
<?php
## Includes nav bar
include('navbar.php');
include('phpfiles/domainclass.php');
if (isset($_GET['userInput']))
{
$domainName = $_GET['userInput'];
}
?>
<!---- The input form ---->
<form class="form">
<div class="domainquery">
<div class="input-group">
<input id="domainName" name="userInput" class="form-control input-md" type="text" placeholder="example.com" value="<?php if (isset($domainName)) echo $domainName ?>" autocomplete="off" autofocus>
<div class="input-group-btn">
<button type="submit" class="btn btn-primary btn-md">Query Domain</button>
</div>
</div>
</div>
</form>
<!---- End of input form --->
<!---- start of content --->
<div class ="container-fluid">
<!----- Check of the variable has been set before showing --->
<?php
##checks if the variable name $domainName is set, before loading everything below
if (isset($domainName)):
?>
<div class="container-fluid">
<div class="row">
<div class="col-lg-6 col-md-5 col-sm-12 col-xs-12">
<h3>DNS Records </h3>
<div class="dnscontain">
<script>
// Loads the return vaue of the call into the "dnscontain" div.
$(".dnscontain").load("ajaxhandler.php",
{ // ajax call to pass variable to ajax handler, which then decides what to do with it
d: "<?php echo $domainName ?>",
q: 'dns'
});
</script>
</div>
<h3>SSL Result</h3>
<h3>NMAP Result</h3>
<div class="nmapcontain">
<script>
// Loads the return vaue of the call into the "dnscontain" div.
$(".nmapcontain").load("ajaxhandler.php",
{ // ajax call to pass variable to ajax handler, which then decides what to do with it
d: "<?php echo $domainName ?>",
q: 'nmap'
});
</script>
</div>
<h3>PING Result</h3>
<div class="pingcontain">
<script>
// Loads the return vaue of the call into the "dnscontain" div.
$(".pingcontain").load("ajaxhandler.php",
{ // ajax call to pass variable to ajax handler, which then decides what to do with it
d: "<?php echo $domainName ?>",
q: 'ping'
});
</script>
</div>
<!--- Closing div tag for left column -->
</div>
<!--- starting right column -->
<div class="col-lg-6 col-md-5 col-sm-12 col-xs-12">
<h3>WHOIS Result</h3>
<div class="whoiscontain">
<script>
// Loads the return vaue of the call into the "whoiscontain" div.
$(".whoiscontain").load("ajaxhandler.php",
{ // ajax call to pass variable to ajax handler, which then decides what to do with it
d: "<?php echo $domainName ?>",
q: 'whois'
});
</script>
<!--Whoiscontain div end -->
</div>
<!--- right column div end -->
</div>
<!--- closing div tag for 1st row --->
</div>
</div>
<!---- ends the check on if the variable is set -->
<?php
###End the "IF" check
endif
?>
<!---- Closing div tag for container-fluid --->
</div>
</body>
</html>
Ajax return page --
<?php
include 'domainclass.php';
$result = domain::getWhois($domainName);
?>
<pre class="whois"> <?php echo $result ?> </pre>;
Style sheet
.header
{
margin:1%;
}
.domainquery
{
margin-bottom:3%;
padding:40px 50px;
}
.nav-bar-logo
{
margin-right:20px;
padding-right:20px;
}
.table
{
font-size:5px;
}
pre .whois
{
white-space:pre-wrap;
background-color:black;
color:white;
word-wrap: break-word;
}
.whoiscontain
{
white-space:pre-wrap;
background-color:black;
width:100%;
color:white;
word-wrap: break-word;
}
pre
{
white-space:pre-wrap;
background-color:black;
color:white;
word-wrap: break-word;
}
HTML output of page as requested (ignore style sheeting being above the bootstrap stylesheet, was trying something.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="javascript.js"></script>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title>CWCS Domain Checker Tool</title>
</head>
<body>
<!--- This Keeps the navbar from staying right near top -->
<div class="header">
</div>
<!---- Nav bar, Using bootstrap ----->
<nav class="navbar navbar">
<div class="container-fluid">
<div class="navbar-header">
<div class="nav-bar-logo">
<img src="images/cwcs-logo.png">
</div>
</div>
<div class="nav-list-container">
<ul class="nav navbar-nav">
<li>Domain Diagnostics</li>
<li><a id="sd" href="#">Server Diagnostics</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Second Line Tools
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a id="dc" href="#">Daily Checklist</a></li>
<li><a id="bt" href="#">Backup Tracker</a></li>
<li><a id="tl" href="#">Task List</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<!------- End of nav bar ---->
<!---- The input form ---->
<form class="form">
<div class="domainquery">
<div class="input-group">
<input id="domainName" name="userInput" class="form-control input-md" type="text" placeholder="example.com" value="lomcn.org" autocomplete="off" autofocus>
<div class="input-group-btn">
<button type="submit" class="btn btn-primary btn-md">Query Domain</button>
</div>
</div>
</div>
</form>
<!---- End of input form --->
<!---- start of content --->
<div class ="container-fluid">
<!----- Check of the variable has been set before showing --->
<div class="container-fluid">
<div class="row">
<div class="col-lg-6 col-md-5 col-sm-12 col-xs-12">
<h3>DNS Records </h3>
<div class="dnscontain">
<script>
// Loads the return vaue of the call into the "dnscontain" div.
$(".dnscontain").load("ajaxhandler.php",
{ // ajax call to pass variable to ajax handler, which then decides what to do with it
d: "lomcn.org",
q: 'dns'
});
</script>
</div>
<h3>SSL Result</h3>
<h3>NMAP Result</h3>
<div class="nmapcontain">
<script>
// Loads the return vaue of the call into the "dnscontain" div.
$(".nmapcontain").load("ajaxhandler.php",
{ // ajax call to pass variable to ajax handler, which then decides what to do with it
d: "lomcn.org",
q: 'nmap'
});
</script>
</div>
<h3>PING Result</h3>
<div class="pingcontain">
<script>
// Loads the return vaue of the call into the "dnscontain" div.
$(".pingcontain").load("ajaxhandler.php",
{ // ajax call to pass variable to ajax handler, which then decides what to do with it
d: "lomcn.org",
q: 'ping'
});
</script>
</div>
<h3>Tracert Result</h3>
<div class="tracecontain">
<script>
// Loads the return vaue of the call into the "dnscontain" div.
$(".tracecontain").load("ajaxhandler.php",
{ // ajax call to pass variable to ajax handler, which then decides what to do with it
d: "lomcn.org",
q: 'trace'
});
</script>
</div>
<!--- Closing div tag for left column -->
</div>
<!--- starting right column -->
<div class="col-lg-6 col-md-5 col-sm-12 col-xs-12">
<h3>WHOIS Result</h3>
<div class="whoiscontain">
<script>
// Loads the return vaue of the call into the "whoiscontain" div.
$(".whoiscontain").load("ajaxhandler.php",
{ // ajax call to pass variable to ajax handler, which then decides what to do with it
d: "lomcn.org",
q: 'whois'
});
</script>
<!--Whoiscontain div end -->
</div>
<!--- right column div end -->
</div>
<!--- closing div tag for 1st row --->
</div>
</div>
<!---- ends the check on if the variable is set -->
<!---- Closing div tag for container-fluid --->
</div>
</body>
</html>
to style bootstrap you can over ride bootstrap styles or make your own new styles.
They recommend not editing the bootstrap .CSS directly so updates to bootstrap will not change your design.
You are correct to place your own style sheet call below the bootstrap call, so yours will override.
Even though your styles will over ride you might not be able to over ride a bootstrap rule that has the !important tag. You can either use the bootstrap classes and ID's in your stylesheet and make new rules, using your own !Important to force them through if necessary, or add additional classes for your styles:
a bit of code
was `<div class="col-md-12">`
make `<div class="col-md-12 myCol">`
and then make rules on your stylesheet for
.myCol{
these styles should persist
}
I have an md-card that consists of an md-header and scrollable md-card-content. As the scrollable content gets taller, the header gets smaller and smaller for some reason. The width of the card can change and the header can possibly wrap around to 2 or 3 lines so a min-height on the header isn't a solution. The problem exists in latest IE and Chrome, not FF.
Click The "Add 5 Rows" button a few times to see the header shrink
http://plnkr.co/edit/wgBKnXh7FSn1VLO8mST0?p=preview
<html>
<head>
<title>angular material</title>
<link rel="stylesheet" href="https://rawgit.com/angular/bower-material/master/angular-material.css">
</head>
<body ng-app="app" ng-controller="ctrl" layout="column" layout-fill>
<md-card style="height: 200px; width: 500px">
<md-card-header style="border-bottom: 1px solid grey">
<md-card-header-text>
<span class="md-title">Long Header Long Header Long Header Long Header Long Header Long Header Long Header Long Header </span>
</md-card-header-text>
</md-card-header>
<md-content-card style="overflow-y: auto" >
<ul>
<li ng-repeat="x in getArray() track by $index"></li>
</ul>
</md-content-card>
</md-card>
<button style="width: 200px" ng-click="addRows()">
Add 5 Rows
</button>
<!-- Angular Material Dependencies -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-animate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-aria.js"></script>
<!-- Angular Material Javascript using RawGit to load directly from `bower-material/master` -->
<script src="https://rawgit.com/angular/bower-material/master/angular-material.js"></script>
<script>
var app = angular.module('app', ['ngMaterial']);
app.controller("ctrl", function($scope) {
$scope.rows = 0;
$scope.addRows = function() {
$scope.rows += 5;
};
$scope.getArray = function() {
return new Array($scope.rows);
};
});
</script>
</body>
</html>
You just need to move the fixed height declaration from md-card to md-content-card - Plunker
Markup
<md-card style="width: 500px">
<md-card-header style="border-bottom: 1px solid grey">
<md-card-header-text>
<span class="md-title">Long Header Long Header Long Header Long Header Long Header Long Header Long Header Long Header </span>
</md-card-header-text>
</md-card-header>
<md-content-card style="height: 200px; overflow-y: auto" >
<ul>
<li ng-repeat="x in getArray() track by $index"></li>
</ul>
</md-content-card>
</md-card>