Goody day guys, i am trying create a page using bootstrap and interactjs, yes, I've heard about jQueryUI's draggable and droppable, but it's conflicts with the main jQuery file, is a bit annoying so i turned to interactjs, and it actually did what i wanted it to do per se, the problem is that i can't drag an element across two columns(sidebar to main panel), what happens when i try is that the element goes "Underneath" the other column/panel.
The code that's responsible for moving the element
This is the HTML code, the element starts at the element with the angular repeat directive (div... ng-repeat=...)
<!DOCTYPE html>
<html lang="en" ng-app="Drag-on IDE">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="Integrated Learning Object Development Environment">
<meta name="author" content="">
<link rel="icon" href="http://getbootstrap.com/favicon.ico">
<title>Drag-on IDE</title>
<link rel="stylesheet" type="text/css" href="node_modules/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="node_modules/bootstrap/dist/css/bootstrap-theme.min.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div ng-controller="LEQueryController">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div id="navbar" class="navbar-collapse collapse">
<div class="nav navbar-nav navbar-right">
<li><button class="btn btn-default btn-info">Upload a Learning Element</button></li>
<li><button class="btn btn-default btn-success">Upload Material</button></li>
</div>
<form class="navbar-form navbar-left" ng-submit="controller.query()">
<input class="form-control" placeholder="Search Learning Element..." type="text" ng-model="searchText">
</form>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<!--SIDE BAR-->
<div class="sidebar col-sm-4 col-md-3">
<div class="list-group nav nav-sidebar" >
<a href="#" class="list-group-item draggable" ng-repeat="result in results">
<span class="badge">{{result.type}}</span>
<span class="badge">{{result.size}}</span>
<h4>
{{result.title}}
<br /><small>{{result.author}}</small>
<br /><small>{{result.publishingDate}}</small>
</h4>
</a>
</ul>
</div>
</div>
<!--SIDE BAR END-->
<div class="col-sm-8 col-sm-offset-4 col-md-9 col-md-offset-3 main">
<div class="container" id="lo-workspace">
<div class="draggable jumbotron text-center">
<h1>Drag-on IDE <small>by Team Akura</small></h1>
</div>
<div class="jumbotron">
<h1>Drag-on IDE <small>by Team Akura</small></h1>
</div>
<div class="jumbotron">
<h1>Drag-on IDE <small>by Team Akura</small></h1>
</div>
<div class="jumbotron">
<h1>Drag-on IDE <small>by Team Akura</small></h1>
</div>
<div class="jumbotron">
<h1>Drag-on IDE <small>by Team Akura</small></h1>
</div>
<div class="jumbotron">
<h1>Drag-on IDE <small>by Team Akura</small></h1>
</div>
<div class="jumbotron">
<h1>Drag-on IDE <small>by Team Akura</small></h1>
</div>
</div>
</div>
</div>
</div>
</div>
<!--
******* ******* ***** *******
* * * * * * *
* * * * * * *
* * * * * * *
* ******* ***** *******
TO : Alfonso
Draggable mechanism is acting like a *,
complaining something like "$(...).draggable isn't a function because i'm having my period today".
-->
<script type="text/javascript" src="node_modules/jquery/dist/jquery-1.9.1.js"></script>
<script type="text/javascript" src="node_modules/bootstrap/dist/bootstrap.min.js"></script>
<script type="text/javascript" src="node_modules/interact.js/interact.js"></script>
<script type="text/javascript" src="node_modules/angular/angular.min.js"></script>
<script type="text/javascript" src="utilities.js"></script>
<script type="text/javascript" src="controllers.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="ie10-viewport-bug-workaround.js"></script>
</body></html>
What causes this problem? how do i fix it? thanks.
Related
I have the following code and I am not sure why bg-info doesn't work for the whole body as I am new to bootstrap.
<!--http://v4-alpha.getbootstrap.com/getting-started/introduction/-->
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">
</head>
<body class="bg-info">
<div class="container text-xs-center">
<h1 class="display-1">Fullstack Conference</h1>
<p class="lead">Coming soon!! A one day conference about all things Javascript!!</p>
</div>
<div class="col-lg-6 col-lg-offset-3">
<div class="input-group">
<input type="text" class="form-control" placeholder="Enter your Email for info...">
<span class="input-group-btn">
<button class="btn btn-secondary" type="button">Sign Up!</button>
</span>
</div>
</div>
</div>
<!-- jQuery first, then Bootstrap JS. -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>
</body>
</html>
Here's what I see:
Note: According to this video it should work though https://teamtreehouse.com/library/bootstrap-4-basics/getting-to-know-bootstrap-4/enhancing-the-page
You are using the alpha 4 of bootstrap(js), use bootstrap 3.x.
Also you have an extra </div> in the code.
This works:
<!--http://v4-alpha.getbootstrap.com/getting-started/introduction/-->
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous" />
</head>
<body class="bg-info">
<div class="container text-xs-center">
<h1 class="display-1">Fullstack Conference</h1>
<p class="lead">Coming soon!! A one day conference about all things Javascript!!</p>
</div>
<div class="col-lg-6 col-lg-offset-3">
<div class="input-group">
<input type="text" class="form-control" placeholder="Enter your Email for info...">
<span class="input-group-btn">
<button class="btn btn-secondary" type="button">Sign Up!</button>
</span>
</div>
</div>
</body>
<!-- jQuery first, then Bootstrap JS. -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</html>
What do you mean by doesn't work for the whole body? Try to add this CSS property to your custom CSS:
.bg-info {background: #5bc0de!important;
}
Not sure if you are allowed to link your website but if it's allowed.
So I can hover all links in the navbar but I can't click them and the pictures of S's is hoverable but not clickable, what am I doing wrong?
<!doctype html>
<html>
<head lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Nickeb0i Scripts - Landing Page</title>
<meta property="og:title" content="">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" href="fancybox/jquery.fancybox-v=2.1.5.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href='http://fonts.googleapis.com/css?family=Titillium+Web:400,600,300,200&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link rel="prefetch" href="images/zoom.png">
</head>
<body>
<div class="navbar navbar-fixed-top" data-activeslide="1">
<div class="container">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="nav-collapse collapse navbar-responsive-collapse">
<ul class="nav row">
<li data-slide="1" class="col-12 col-sm-2"><a id="menu-link-1"> <span class="icon icon-home"></span> <span class="text">HOME</span></a></li>
<li data-slide="2" class="col-12 col-sm-2"><a id="menu-link-2" href="/services"> <span class="icon icon-user"></span> <span class="text">SERVICES</span></a></li>
<li data-slide="3" class="col-12 col-sm-2"><a id="menu-link-3" href="/scripts"> <span class="icon icon-briefcase"></span> <span class="text">SCRIPTS</span></a></li></ul>
<div class="row">
<div class="col-sm-2 active-menu"></div>
</div>
</div><!-- /.nav-collapse -->
</div><!-- /.container -->
</div><!-- /.navbar -->
<div class="slide story" id="slide-1" data-slide="1">
<div class="container">
<div id="home-row-1" class="row clearfix">
<div class="col-12">
<h1 class="font-semibold">NICKEB0I <span class="font-thin">SCRIPTS</span></h1>
<br>
<br>
</div><!-- /col-12 -->
</div><!-- /row -->
<div id="home-row-2" class="row clearfix">
<div class="col-12 col-sm-4"><div class="home-hover navigation-slide" data-slide="4"><img src="images/s03.png"></div><span>SCRIPTS</span></div>
<div class="col-12 col-sm-4"><div class="" data-slide="3"></div></div>
<div class="col-12 col-sm-4"><div class="home-hover navigation-slide" data-slide="5"><img src="images/s03.png"></div><span>SERVICES</span></div>
</div><!-- /row -->
</div><!-- /container -->
</div><!-- /slide1 -->
<footer>
<div class="container">
<p><font color="white">Copyright © Nickeb0i 2016</font><p>
</div>
</footer>
</body>
<script src="js/html5shiv.js"></script>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery-migrate-1.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="fancybox/jquery.fancybox.pack-v=2.1.5.js"></script>
<script src="js/script.js"></script>
<script>
$(document).ready(function(e) {
var lis = $('.nav > li');
menu_focus( lis[0], 1 );
$(".fancybox").fancybox({
padding: 10,
helpers: {
overlay: {
locked: false
}
}
});
});
</script>
</html>
You have written href = "/services", add a forward-slash and write href = "/services/". This should work.
I'm not entirely sure that this is related to it but if I click a button my console immediately shows an error:
script.js:187 Uncaught TypeError: Cannot read property 'top' of undefined
You're getting this error
Uncaught TypeError: Cannot read property 'top' of undefined
Because you're trying to select a DOM object that doesn't exist:
var offset_top = ( dataslide == 1 ) ? '0px' : $('.slide[data-slide="' + dataslide + '"]').offset().top;
Adding the class slide to your elements with data-slide attributes stops the error.
But you should ask yourself, do you really need javascript like this for navigation and hover effects?
I'm working on a site and my goal is to make it responsive by reducing the background associated by when the site is reduced.
I want the grey area to reduce simultaneously when the site is reduced horizontally.
How can I achieve this?
Here is my code so far. I'm using bootstrap.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta tags -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="#CurrentPage.siteDescription">
<title>#CurrentPage.pageTitle|Gymnasiestudera</title>
<!-- Fonts -->
<link href="//fonts.googleapis.com/css?family=Merriweather:400,700,300,900" rel="stylesheet" type="text/css">
<link href="//fonts.googleapis.com/css?family=Lato:300,400,700,900" rel="stylesheet" type="text/css">
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="/css/reset.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/css/fanoe.css">
<link rel="stylesheet" type="text/css" href="/css/style.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="//oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="//oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="wrapper col-md-12 col-lg-8 col-lg-offset-2">
<header>
<div class="row col-md-12">
<nav class="entry-links">
<ul>
<li class="">
För elever
</li>
<li>
För skolpersonal
</li>
<li>
Ungdom och elevdatabas
</li>
</ul>
</nav>
</div>
<div class="row">
<div class="col-xs-8 col-sm-12 col-md-4">
<a href="#home.Url">
<div class="brand" style="background-image:url('#(home.SiteLogo)?height=100&width=700&')"></div>
</a>
</div>
</div>
<div class="row">
<div class="col-md-12 main-nav">
<nav id="cbp-hrmenu" class="meny cbp-hrmenu col-md-10 col-md-offset-1">
#{ Html.RenderPartial("MainNavigation"); }
</nav>
</div>
<br />
<br />
</div>
<div class="container-fluid">
<div class="container">
</div>
</div>
<div id="toggle" class="toggle">
<span></span>
</div>
</header>
#RenderBody()
<div class="foot-line-background">
<div class="foot"></div>
</div>
<footer class="field dark">
<div class="row">
<div class="col-md-4">
<br />
#home.sidfotKolumn1
</div>
<div class="col-md-4">
<br />
#home.sidfotKolumn2
</div>
<div class="col-md-4">
<br />
#home.sidfotKolumn1
</div>
</div>
</footer>
<!-- Javascripts -->
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="/js/jquery.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/scripts/fanoe.js"></script>
<script src="/scripts/Custom.js"></script>
</div>
</body>
</html>
If I'm understanding you correctly, you really just need to have a max-width on your "content container" to do the job. As the window width decreases, the gray area will also decrease until the container takes up the full window.
.my-container {
max-width: 800px;
}
http://jsfiddle.net/agentfitz/6s4u14yd/1/
When I put my textarea which I want to be the wysihtml5-editor i get the following error message:
Uncaught TypeError: Cannot read property 'document' of null at wysihtml5-0.3.0.js:5460
Here's the html-code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="ThemeBucket">
<link rel="shortcut icon" href="images/favicon.png">
<title>TTZ - Fragebogen erstellen</title>
<!--Core CSS -->
<link href="bs3/css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-reset.css" rel="stylesheet">
<link href="font-awesome/css/font-awesome.css" rel="stylesheet" />
<link rel="stylesheet" href="css/jquery.steps.css?1">
<!-- Custom styles for this template -->
<link href="css/style.css" rel="stylesheet">
<link href="css/style-responsive.css" rel="stylesheet" />
<!-- Html5 Editor -->
<link href="js/bootstrap-wysihtml5/bootstrap-wysihtml5.css" rel="stylesheet">
<link href="css/questionForm.css" rel="stylesheet">
</head>
<body>
<section class="panel">
<header class="panel-heading">
Fragebogen Erstellen
</header>
<div class="panel-body">
<div id="wizard">
<!-- Step 1 start -->
<h2>Eigentschaften</h2>
<section>
<form class="form-horizontal" action="" enctype="multipart/form-data">
<div class="row">
<div class="col-md-8">
<div class="form-group">
<label class="col-lg-2 control-label">Titel</label>
<div class="col-lg-10">
<input type="text" class="form-control" placeholder="Titel">
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label">Beschreibung</label>
<div class="col-lg-10">
<textarea class="htmlEdit form-control" cols="60" rows="8"></textarea>
</div>
</div>
</div>
<div class="col-md-4">
<label class="control-label">Bild zum Fragebogen:</label>
<div class="fileupload fileupload-new" data-provides="fileupload">
<div class="fileupload-new thumbnail" style="width: 200px; height: 150px;">
<img src="http://www.placehold.it/200x150/EFEFEF/AAAAAA&text=no+image" alt="" />
</div>
<div class="fileupload-preview fileupload-exists thumbnail" style="max-width: 200px; max-height: 150px; line-height: 20px;"></div>
<div>
<span class="btn btn-white btn-file">
<span class="fileupload-new"><i class="fa fa-paper-clip"></i> Select image</span>
<span class="fileupload-exists"><i class="fa fa-undo"></i> Change</span>
<input type="file" class="default" />
</span>
<i class="fa fa-trash"></i> Remove
</div>
</div>
</div>
</div>
</form>
</section>
<!-- Step 1 end -->
<!-- Step 2 start -->
<h2>Fragen hinzufügen</h2>
<section>
Some content here
</section>
<!-- Step 2 end -->
<!-- Step 3 start -->
<h2>Abschlusstext konfigurieren</h2>
<section>
Some content here
</section>
<!-- Step 3 endt -->
<h2>Abschluss</h2>
<section>
Some content here
</section>
</div>
</div>
</section>
</div>
</div>
<!-- page end-->
</section>
</section>
<!--main content end-->
</section>
<!--Core js-->
<script src="js/jquery.js"></script>
<script src="bs3/js/bootstrap.min.js"></script>
<script class="include" type="text/javascript" src="js/jquery.dcjqaccordion.2.7.js"> </script>
<script src="js/jquery.scrollTo.min.js"></script>>
<script src="js/jQuery-slimScroll-1.3.0/jquery.slimscroll.js"></script>
<script src="js/jquery.nicescroll.js"></script>
<script src="js/jquery-steps/jquery.steps.js"></script>
<!-- HTML5 Editor -->
<script src="js/bootstrap-wysihtml5/wysihtml5-0.3.0.js"></script>
<script src="js/bootstrap-wysihtml5/bootstrap-wysihtml5.js"></script>
<!-- Our main JS file -->
<script src="js/mini-upload-form/assets/js/script.js"></script>
<script type="text/javascript" src="js/bootstrap-fileupload/bootstrap-fileupload.js"> </script>
<script type="text/javascript" src="js/bootstrap-inputmask/bootstrap-inputmask.min.js"></script>
<!--common script init for all pages-->
<script src="js/scripts.js"></script>
<script type="text/javascript">
$(function ()
{
$("#wizard").steps({
headerTag: "h2",
bodyTag: "section",
transitionEffect: "fade"
});
$('.htmlEdit').wysihtml5();
});
</script>
</body>
</html>
When i move my textarea out of my jquery steps div it works perfectly fine... But I need to have a wysihtml5 inside of my steps. Any ideas?
Edit: Here's the code which seems to have a problem:
// Create the basic dom tree including proper DOCTYPE and charset
iframeDocument.open("text/html", "replace");
iframeDocument.write(sandboxHtml);
iframeDocument.close();
this.getWindow = function() { return iframe.contentWindow; };
this.getDocument = function() { console.log(iframe); return iframe.contentWindow.document; };
I already watched at the iframe at that point and it's null. I just don't know why and I am just not capable to understand the whole 10000 lines of code ;)
I am using Intel XDK for Mobile UI Design and I have inserted a header which contains pictures and text. However i am unable to add anything in the body. I try to drag different components into the body but nothing happens. Seems that i can only add anything into the header. Here is my code: The content inside the<h4> does not appear on the screen. (this is in <!-- /upage-content -->)
<!DOCTYPE html>
<!--HTML5 doctype-->
<html>
<head>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="media_button_bar/css/media_button_bar.css">
<link rel="stylesheet" type="text/css" href="css/design.css">
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/index_main.less.css" class="main-less">
<title>Your New Application</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<style type="text/css">
/* Prevent copy paste for all elements except text fields */
* { -webkit-user-select:none; -webkit-tap-highlight-color:rgba(255, 255, 255, 0); }
input, textarea { -webkit-user-select:text; }
</style>
<script src="intelxdk.js"></script>
<script type="text/javascript">
/* Intel native bridge is available */
var onDeviceReady=function(){
//hide splash screen
intel.xdk.device.hideSplashScreen();
};
document.addEventListener("intel.xdk.device.ready",onDeviceReady,false);
</script>
<script type="application/javascript" src="js/jquery.min.js"></script>
<script type="application/javascript" src="marginal/marginal-position.min.js"></script>
<script src="cordova.js"></script>
<script type="application/javascript" src="bootstrap/js/bootstrap.min.js"></script>
<script type="application/javascript" src="modal/js/modal.js"></script>
<script type="application/javascript" src="js/index_user_scripts.js"></script>
</head>
<body class="body">
<!-- content goes here-->
<div class="uwrap">
<div class="upage" id="mainpage">
<div class="upage-outer">
<div class="uib-header header-bg container-group inner-element uib_w_1 uib-header-fixed" data-uib="layout/header" data-ver="0" id="header">
<img class="header_image" src="images/hku_logo.png">
<div class="header_text">
HKU Mobile
</div>
<div class="widget-container content-area horiz-area wrapping-col right">
<a class="uib-graphic-button default-graphic-sizing hover-graphic-button default-graphic-button widget uib_w_2 d-margins" data-uib="media/graphic_button" data-ver="0" id="login_lock">
<img src="images/Login_lock.png">
<span class="uib-caption"></span>
</a>
</div>
</div>
<!-- /upage-content -->
<h4> sdsajidojasid</h4>
</div>
<!-- /upage-outer -->
<!-- popup Portal Login box -->
<div class="modal outer-element uib_w_4 Portal_popup" data-uib="twitter%20bootstrap/modal" data-ver="0" id="Portal_popup" data-backdrop="false" data-keyboard="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal">x</button>
<h4 class="modal-title">Login to HKU Portal</h4>
</div>
<div class="modal-body">
<div class="col uib_col_1 single-col" data-uib="layout/col" data-ver="0">
<div class="widget-container content-area vertical-col">
<div class="table-thing widget uib_w_5 popup_text1" data-uib="twitter%20bootstrap/input" data-ver="0">
<label class="narrow-control label-top-left">HKU Portal ID</label>
<input class="wide-control form-control input-sm" type="text" placeholder="Enter your HKU Portal UID" id="portal_id">
</div>
<br>
<div class="table-thing widget uib_w_6 d-margins" data-uib="twitter%20bootstrap/input" data-ver="0">
<label class="narrow-control label-top-left">HKU Portal PIN</label>
<input class="wide-control form-control input-sm" type="password" placeholder="Enter your HKU Portal PIN" id="portal_pin">
</div>
<br>
<br>
<button type="button" class="btn widget uib_w_7 d-margins btn-primary" data-uib="twitter%20bootstrap/button" data-ver="0"><i class="glyphicon button-icon-left" data-position="left"></i>Log in</button>
<span class="uib_shim"></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /upage -->
</div>
<!-- /uwrap -->
</body>
</html>
This was missing from my code:
<div class="upage-content" id="mainsub"> when the header <div> closes