bootstrap-wysihtml5 doesn't work inside jquery steps - html

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 ;)

Related

Disable and Enable Text when button is pressed in HTML?

How should i disable my text Click Begin Game to start when Begin Button is pressed ? It keep displaying after begin button is pressed.
HTML CODE:
<html>
<head>
<link rel="icon" href="./arrows/clubbackground.jpg" type="image/gif" sizes="16x16">
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="jsRev.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<title>DDR-Project 1</title>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="BackgroundScene">
<div id="DanceScoreboard">
<div id="GameStopped"><button id="StartBtn" class="btnStyle" onclick="gameStarted=true;">Begin Game</button>
<br><br><br>
<div class="Status">Click Begin Game to start</div>
</div>
<div id="GameRunning"><button id="StopBtn" class="btnStyle" onclick="history.go(0);">Stop Game</button>
<div id="Status" class="Status"></div>
</div>
</div>
<p style="color:blue;">Points Earned:</p>
<div id="dancePoints" class="Points"><div class="OutputText" id="CorrectCount">0</div>
</div>
<div class="stage"></div>
<!-- ENDS .STAGE -->
<div id="controls">
<img id="left" src="./arrows/staticLeft.png">
<img id="up" src="./arrows/staticUp.png">
<img id="down" src="./arrows/staticDown.png">
<img id="right" src="./arrows/staticRight.png">
</div>
<!-- ENDS #CONTROLS -->
</body>
</html>

I think this is what your are looking for . please check...
<html>
<head>
<link rel="icon" href="./arrows/clubbackground.jpg" type="image/gif" sizes="16x16">
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="jsRev.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<title>DDR-Project 1</title>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="BackgroundScene">
<div id="DanceScoreboard">
<div id="GameStopped"><button id="StartBtn" class="btnStyle" onclick="gameStarted=true;">Begin Game</button>
<br><br><br>
<div class="Status">Click Begin Game to start</div>
</div>
<div id="GameRunning"><button id="StopBtn" class="btnStyle" onclick="history.go(0);">Stop Game</button>
<div id="Status" class="Status"></div>
</div>
</div>
<p style="color:blue;">Points Earned:</p>
<div id="dancePoints" class="Points"><div class="OutputText" id="CorrectCount">0</div>
</div>
<div class="stage"></div>
<!-- ENDS .STAGE -->
<div id="controls">
<img id="left" src="./arrows/staticLeft.png">
<img id="up" src="./arrows/staticUp.png">
<img id="down" src="./arrows/staticDown.png">
<img id="right" src="./arrows/staticRight.png">
</div>
<!-- ENDS #CONTROLS -->
<script>
jQuery('#StartBtn').click(function(){
jQuery('.Status').hide();
})
</script>
</body>
</html>

You could add an additional line to the onclick event for the Begin Game button.
HTML
<div id="GameStopped"><button id="StartBtn" class="btnStyle" onclick="beginGame()">Begin Game</button>
<br><br><br>
<div class="Status" id="ClickToBeginMessage">Click Begin Game to start</div>
</div>
JS
function beginGame(){
gameStarted=true;
$("#ClickToBeginMessage").hide()
}

bg-info doesn't work for the whole body in bootstrap

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;
}

Adding search functionality in select options using Bootstrap

I have been trying to add search functionality in the select form using bootstrap. This is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<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="">
<meta name="author" content="">
<link rel="icon" href="http://getbootstrap.com/favicon.ico">
<title>Depots list</title>
<!-- Bootstrap core CSS -->
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Latest compiled and minified bootstrap-select CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css">
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="http://getbootstrap.com/assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="http://getbootstrap.com/examples/starter-template/starter-template.css" rel="stylesheet">
<link href="./css/st.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="http://getbootstrap.com/assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="http://getbootstrap.com/assets/js/ie-emulation-modes-warning.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="box">
<!-- /.box-header -->
<div class="box-body">
<form>
<div class="form-group row">
<label for="" class="col-sm-2 form-control-label">Country</label>
<div class="col-sm-10">
<select class="form-control selectpicker" id="select-country" placeholder="" data-live-search="true">
<options>China</options>
<options>Malaysia</options>
<options>Singapore</options>
</select>
</div>
</div>
</form>
</div><!-- /.box-body -->
</div><!-- /.box -->
</div><!-- /.col -->
</div><!-- /.row -->
</div><!-- /.container -->
I have problem with contradiction between form-control and selectpicker classes in select form. My code works only for form-control class.
For selection searches I have used this: https://developer.snapappointments.com/bootstrap-select/examples/#live-search
My question is: How can I use both of the form-control and selectpicker classes in select tag? I have used normal procedure to write the class name with a space. But it seems not to work.

To get a search functionality you must set the data-tokens attribute for each options. Here is your code after adding it. Let me know if you need additional help.
$(function() {
$('.selectpicker').selectpicker();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="box">
<!-- /.box-header -->
<div class="box-body">
<form>
<div class="form-group row">
<label for="" class="col-sm-2 form-control-label">Country</label>
<div class="col-sm-10">
<select class="form-control selectpicker" id="select-country" data-live-search="true">
<option data-tokens="china">China</option>
<option data-tokens="malayasia">Malayasia</option>
<option data-tokens="singapore">Singapore</option>
</select>
</div>
</div>
</form>
</div>
<!-- /.box-body -->
</div>
<!-- /.box -->
</div>
<!-- /.col -->
</div>
<!-- /.row -->
</div>
<!-- /.container -->

Multi Selection Form and searchable
$(function() {
$('.selectpicker').selectpicker();
});
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="js/script.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css" rel="stylesheet" />
<script src="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js"type="text/javascript"></script>
<link href="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css"rel="stylesheet" type="text/css" />
<script>
$(function () {
$('#lstFruits').multiselect({
includeSelectAllOption: true
});
$('#btnSelected').click(function () {
var selected = $("#lstFruits option:selected");
var message = "";
selected.each(function () {
message += $(this).text() + " " + $(this).val() + "\n";
});
});
});
</script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="box">
<div class="box-body">
<form action="#" method="POST">
<div class="form-group row">
<div class="col-sm-10">
<select class="form-control selectpicker" id="select-country lstFruits" multiple="multiple" data-live-search="true">
<option data-tokens="china">China</option>
<option data-tokens="malayasia">Malayasia</option>
<option data-tokens="singapore">Singapore</option>
</select>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.min.css" />
<select class="selectpicker" data-show-subtext="true" data-live-search="true">
<option data-tokens="name">name</option>
<option data-tokens="family">family</option>
</select>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.min.js"></script>

#Search Box in Select Option in Asp.net Core#
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.17/css/bootstrap-select.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.17/js/bootstrap-select.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
-At View Page
<select id="empselect" class="form-control selectpicker" data-live-search="true" asp-for="EmpId" asp-items="#(new SelectList(#ViewBag.empInilistvb,"EmpId", "EmpInitial"))"></select>
I think data-token= is not mandatory attribute.
I used Search Box in Select Option in Asp.net Core.

Just add an HTML attribute into the select tag if you are using the bootstrap selectpicker and initialize it on your script.
data-live-search="true"
<script>
$(document).ready(function(){
$('.classname').selectpicker();
});
</script>

Reduce the background simultaneously as site reduction - Bootstrap

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/

Unable to add anything in the body - Intel XDK App Designer

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