Google analytics how long to show? - google-analytics

GA is reporting not installed even though i've got the script in the HEAD location as specified, should it show straight away?
I've followed the full instruction on how to do it, or do I just need to sit and wait?
Code is
<?php
require("config.php");
$submitted_username = '';
if(!empty($_POST)){
$query = "
SELECT
id,
username,
password,
salt,
email
FROM users
WHERE
username = :username
";
$query_params = array(
':username' => $_POST['username']
);
try{
$stmt = $db->prepare($query);
$result = $stmt->execute($query_params);
}
catch(PDOException $ex){ die("Failed to run query: " . $ex->getMessage()); }
$login_ok = false;
$row = $stmt->fetch();
if($row){
$check_password = hash('sha256', $_POST['password'] . $row['salt']);
for($round = 0; $round < 65536; $round++){
$check_password = hash('sha256', $check_password . $row['salt']);
}
if($check_password === $row['password']){
$login_ok = true;
}
}
if($login_ok){
unset($row['salt']);
unset($row['password']);
$_SESSION['user'] = $row;
header("Location: main.php");
die("Redirecting to: main.php");
}
else{
print("Login Failed.");
$submitted_username = htmlentities($_POST['username'], ENT_QUOTES, 'UTF-8');
}
}
?>
<!DOCTYPE html>
<html>
<Head>
<title>Fishtrends | Tightlines</title>
<meta name="viewport" content="width=device-width, intitial-scale=1.0>
<link href = "css/css/bootstrap.css" rel = "Stylesheet">
<link href = "css/css/bootstrap.min.css" rel = "stylesheet">
<link href = "css/css/style.css" rel = "stylesheet">
<link href = "css/fonts/fonta/css/font-awesome.min.css" rel = "stylesheet">
<link href='http://fonts.googleapis.com/css?family=Oxygen:400,700' rel='stylesheet' type='text/css'>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-5178940-4', 'fishtrends.com');
ga('send', 'pageview');
</script>
</head>
<body>
<div class = "navbar navbar-main navbar-static-top">
<div class="container">
<b>Fishtrends</b> - Social Fish trending
<button class = "navbar-toggle" data-toggle = "collapse" data-target = ".navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class= "collapse navbar-collapse navHeaderCollapse">
<ul class = "nav navbar-nav navbar-right">
<li class = "active"><i class="glyphicon glyphicon-home"></i> Register</li>
<li class = "dropdown">
<i class="glyphicon glyphicon-user"></i> Login<b class="caret"></b>
<ul class = "dropdown-menu" style="padding: 15px; padding-bottom: px;">
<form action="login.php" method="post"> Username:<br />
<input type="text" name="username" value="<?php echo $submitted_username; ?>" />
<br /><br /> Password:<br /> <input type="password" name="password" value="" />
<br /><br />
<input type="submit" class="btn btn-info" value="Login" />
</form>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="indexjumbotron">
<h1>Be Fish social</h1>
<p1>Add and see catch details, baits used, weights of fish plus more</p1>
</div>
<div class="container">
<div class="panel panel-default" style="margin:0 auto;width:500px">
<div class="panel-heading">
<h1 class="panel-title"><b>Sign up now for Free!</B></h1>
</div>
<div class="panel-body">
<form name="registration" method="post" action="/register.php" class="form-horizontal" role="form">
<div class="form-group">
<label for="username" class="col-xs-2 control-label">Username</label>
<div class="col-xs-10">
<input type="text" class="form-control" id="username" name="username" placeholder="Your Userame">
</div>
</div>
<div class="form-group">
<label for="inputEmail1" class="col-xs-2 control-label">Email</label>
<div class="col-xs-10">
<input type="text" class="form-control" id="email" name="email" placeholder="Your Email">
</div>
</div>
<div class="form-group">
<label for="inputSubject" class="col-xs-2 control-label">Password</label>
<div class="col-xs-10">
<input type="password" class="form-control" id="password" name="password" placeholder="Choose a password">
</div>
</div>
<div class="form-group">
<div class="col-xs-offset-2 col-xs-10">
<button type="submit" class="btn btn-success">
Register
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<div class = "navbar navbar-inverse navbar-fixed-bottom">
<div class = "container">
<p class = "navbar-text pull-left">Copyright Fishtrends - 2013 <i class="glyphicon glyphicon-copyright-mark"></i></p>
<i class="fa fa-twitter fa-1x"></i> Follow Us
<p class = "navbar-text pull-right"><i class="glyphicon glyphicon-question-sign"></i> About Us</p>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="css/js/bootstrap.js"></script>
</body>
</html>

I can't find anything wrong in this code, did you tried the real time reports to clarify. If the code is installed then you can see some live traffic reports including referrals and other related info. Did you try that ?

The regular reporting won't update for several hours. However, there is a real-time tab that should show you results immediately. On the HTML side of things, you've got a lot of missing/extra/out-of-order tags. I think this is what you are aiming for in the HTML (I did not include the PHP code since I haven't made any changes to it):
<!DOCTYPE html>
<html>
<head>
<title>Fishtrends | Tightlines</title>
<meta name="viewport" content="width=device-width, intitial-scale=1.0">
<link href = "css/css/bootstrap.css" rel = "Stylesheet">
<link href = "css/css/bootstrap.min.css" rel = "stylesheet">
<link href = "css/css/style.css" rel = "stylesheet">
<link href = "css/fonts/fonta/css/font-awesome.min.css" rel = "stylesheet">
<link href='http://fonts.googleapis.com/css?family=Oxygen:400,700' rel='stylesheet' type='text/css'>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-5178940-4', 'fishtrends.com');
ga('send', 'pageview');
</script>
</head>
<body>
<div class = "navbar navbar-main navbar-static-top">
<div class="container">
<b>Fishtrends</b> - Social Fish trending
<button class = "navbar-toggle" data-toggle = "collapse" data-target = ".navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class= "collapse navbar-collapse navHeaderCollapse">
<ul class = "nav navbar-nav navbar-right">
<li class = "active"><i class="glyphicon glyphicon-home"></i> Register</li>
<li class = "dropdown">
<a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
<i class="glyphicon glyphicon-user"></i> Login<b class="caret"></b>
</a>
<ul class = "dropdown-menu" style="padding: 15px; padding-bottom: px;">
<form action="login.php" method="post"> Username:<br />
<input type="text" name="username" value="<?php echo $submitted_username; ?>" />
<br /><br /> Password:<br /> <input type="password" name="password" value="" />
<br /><br />
<input type="submit" class="btn btn-info" value="Login" />
</form>
</ul>
</li>
</ul>
</div>
</div>
<div class="indexjumbotron">
<h1>Be Fish social</h1>
<p>Add and see catch details, baits used, weights of fish plus more</p>
</div>
<div class="container">
<div class="panel panel-default" style="margin:0 auto;width:500px">
<div class="panel-heading">
<h1 class="panel-title"><b>Sign up now for Free!</b></h1>
</div>
<div class="panel-body">
<form name="registration" method="post" action="/register.php" class="form-horizontal" role="form">
<div class="form-group">
<label for="username" class="col-xs-2 control-label">Username</label>
<div class="col-xs-10">
<input type="text" class="form-control" id="username" name="username" placeholder="Your Userame" />
</div>
</div>
<div class="form-group">
<label for="inputEmail1" class="col-xs-2 control-label">Email</label>
<div class="col-xs-10">
<input type="text" class="form-control" id="email" name="email" placeholder="Your Email" />
</div>
</div>
<div class="form-group">
<label for="inputSubject" class="col-xs-2 control-label">Password</label>
<div class="col-xs-10">
<input type="password" class="form-control" id="password" name="password" placeholder="Choose a password" />
</div>
</div>
<div class="form-group">
<div class="col-xs-offset-2 col-xs-10">
<button type="submit" class="btn btn-success">
Register
</button>
</div>
</div>
</form>
</div>
</div>
</div>
<div class = "navbar navbar-inverse navbar-fixed-bottom">
<div class = "container">
<p class = "navbar-text pull-left">Copyright Fishtrends - 2013 <i class="glyphicon glyphicon-copyright-mark"></i></p>
<a href = "http://www.twitter.com/fishtrends" class = "navbar-btn btn-primary btn pull-right">
<i class="fa fa-twitter fa-1x"></i> Follow Us
</a>
<p class = "navbar-text pull-right"><a href ="#">
<i class="glyphicon glyphicon-question-sign"></i> About Us</a>
</p>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="css/js/bootstrap.js"></script>
</body>
</html>

Related

Move button up next to select

How can I move the red - button to be up next to the top of the control?
The HTML looks like this:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<div class="container">
<div class="form-group">
<label for="assigned-tenants" class="col-md-4 control-label">Assigned Tenants</label>
<div class="col-md-8">
<select size="10" class="form-control" id="assigned-tenants" name="assignedTenants">
<option value="1">fdsaf</option>
</select>
<button ata-toggle="tooltip" title="Add" class="btn btn-danger">
<span class="glyphicon glyphicon-minus"></span>
</button>
</div>
</div>
</div>
You will have to use the bootstrap class pull-left to your first element in that column which is select box.
<div class="container">
<div class="form-group">
<label for="assigned-tenants" class="col-md-4 control-label">Assigned Tenants</label>
<div class="col-md-8">
<div class="col-md-10 pull-left" style="padding-right:0px">
<select size="10" class="form-control" id="assigned-tenants" name="assignedTenants" class="pull-left">
<option value="1">fdsaf</option>
</select>
</div>
<div class="col-md-2 pull-left" style="padding-left:0px">
<button ata-toggle="tooltip" title="Add" class="btn btn-danger pull-left">
<span class="glyphicon glyphicon-minus"></span>
</button>
</div>
</div>
</div>
Use vertical-align:top; in the css for that button.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<div class="container">
<div class="form-group">
<label for="assigned-tenants" class="col-md-4 control-label">Assigned Tenants</label>
<div class="col-md-8">
<select size="10" id="assigned-tenants" name="assignedTenants">
<option value="1">fdsaf</option>
</select>
<button ata-toggle="tooltip" title="Add" class="btn btn-danger" style="vertical-align:top;">
<span class="glyphicon glyphicon-minus"></span>
</button>
</div>
</div>
</div>

How to add Search Icon next to my label?

Hi I am working in Angular 4 designing using bootstrap 4.
I tried to add search Icon at the end of my label.
Codings below:
<div class="row ">
<div class="form-group col-lg-2"></div>
<div class="form-group col-lg-4">
<label class="Bold">Location Id </label>
<input type="text" class="form-control" name="LocationId" >
<span class="input-group-btn">
<button class="btn btn-info btn-md" type="button"><i class="fa fa-search"></i></button>
</span>
</div>
<div class="form-group col-lg-4">
<label class="Bold">Description </label>
<input type="text" class="form-control" name="description">
</div>
<div class="form-group col-lg-2"></div>
</div>
but it comes like the attached image. How to add icon at the end of label. Is any problem with my coding?
Try to make use of input-group component of bootstrap4
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-6">
<div class="form-group">
<label>Username</label>
<div class="input-group">
<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon2">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button">Go</button>
</div>
</div>
</div>
</div>
</div>
</div>
Try this. Wrap input and span to the input-group.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" >
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" ></script>
<div class="row ">
<div class="form-group col-lg-2"></div>
<div class="form-group col-lg-4">
<label class="Bold">Location Id </label>
<div class="input-group">
<input type="text" class="form-control" name="LocationId" >
<span class="input-group-append">
<button class="btn btn-info btn-md" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
</div>
<div class="form-group col-lg-4">
<label class="Bold">Description </label>
<input type="text" class="form-control" name="description">
</div>
<div class="form-group col-lg-2">
</div>
</div>
Form-control class for Input makes the text box occupy the entire width. We need to use input-group class to group input and any icon attached to it. Refer code snippet below for example:
<div class="input-group">
<input type="text" class="form-control"/>
<span class="input-group-addon">
<i class="fa fa-search"></i>
</span>
</div>
Following is the code snippet:
<div class="form-group col-lg-4">
<label class="Bold">Location Id </label>
<input type="text" class="location-txt form-control" name="LocationId" >
<span class="input-group-btn location-search">
<button class="btn btn-info btn-md" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
CSS
.location-txt
width: calc(100% - 44px);
float: left;
}
.location-search{
display: inline-block;
float: right;
}

Form height to increase based on content in AngularJs

I have a angularJs form, which has multiple controls. When the page loads initially, all the contents fit in the form. When the validation messages are shown, the submit button, cancel button are not shown. These buttons are getting below.
Below is the code in index.cshtml. I have only put few controls, additional controls are also there.
<body class="ng-cloak">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"></link>
<div ng-controller="testController" ng-init="init()">
<form name="mainForm" id="createForm" ng-submit="mainForm.$valid && add()" novalidate="">
<div>
<!-- HEADER AND NAVBAR -->
<header>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand">Test</a>
</div>
<ul class="nav navbar-right nav-pills">
<li ng-class="{active: createMenu}">
Create</li>
<li ng-class="{active: dashboardMenu}">
Dashboard
</li>
</ul>
</div>
</nav>
</header>
</div>
<div class="container" ng-show="createMenu">
<br />
<div class="row">
<div class="col-sm-2">
<label class="control-label">Groups:</label>
</div>
<div class="col-sm-4 form-group">
<select name="grpTypeSelect" required="" ng-model="selectedgrpType" class="dropdown form-control cl-sm-6" ng-options="grp.GrpTypeName for grp in grpss" ng-change="updateImageUrl(selectedgrpType)">
<option value="">-- Select the Group --</option>
</select>
</div>
</div>
<span id="span1" style="color:red" ng-show="submitted == true && mainForm.grpTypeSelect.$error.required">Group is required</span>
<br />
<div class="row">
<div class="col-sm-2">
<label>Name :</label>
</div>
<div class="col-md-6 form-group">
<input type="text" maxlength="150" class="input-md form-control col-md-4" required="" ng-model="testName" name="testName" />
</div>
</div>
<span style="color:red" ng-show="submitted == true && mainForm.testName.$error.required">Name is required</span>
<br />
<br />
<div class="row">
<div class="col-sm-6">
<label class="control-label">Start date</label>
<div class="form-group">
<div class="input-group date" id="startDatepicker">
<input type="text" required class="form-control" placeholder="MM/DD/YYYY" ng-model="defaultStartDate" name="startDate">
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<span style="color:red" ng-show="submitted == true && mainForm.startDate == '' && mainForm.startDate.$error.required">Start Date is required</span>
</div>
<div class="col-sm-6">
<label class="control-label">End date</label>
<div class="form-group">
<div class="input-group date" id="endDatepicker">
<input type="text" required="" class="form-control" placeholder="MM/DD/YYYY" ng-model="defaultEndDate" name="endDate">
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<span style="color:red" ng-show="submitted == true && mainForm.endDate.$error.required">End Date is required</span>
</div>
<!--/col-->
<div class="col-sm-6">
<label class="control-label">Start Time</label>
<div class="form-group">
<div class="input-group" id="startTimepicker">
<input type="text" required="" class="form-control" placeholder="00:00 AM/PM" ng-model="defaultStartTime" name="startTime">
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
<span style="color:red" ng-show="submitted == true && mainForm.startTime.$error.required">Start Time is required</span>
</div>
<div class="col-sm-6">
<label class="control-label">End Time</label>
<div class="form-group">
<div class="input-group" id="endTimepicker">
<input type="text" required="" class="form-control" placeholder="00:00 AM/PM" ng-model="defaultEndTime" name="endTime">
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
<span style="color:red" ng-show="submitted == true && mainForm.endTime.$error.required">End Time is required</span>
</div>
<div class="form-group">
<div class="col-sm-offset-4 col-sm-6">
<input type="submit" value="Submit" ng-click="submitted=true" class="btn btn-primary" />
<input type="button" id="btnReset" value="Cancel" ng-click="reset()" class="btn btn-primary" />
</div>
</div>
<br/>
</div>
</div>
Is it possible to fit the contents even during the validation messages are shown? i am not setting any specific class to set height. How to make sure that submit and cancel button are also visible, when the form height increases. I checked this link extending a form's height to fit the content in the form , but could not find the solution.
Adding the snippet to show the issue:
Initial load shows as :
After error message:
Thanks
For making anything auto-adjustable according to its content, you can use min-height property.
min-height:100px;
Try this, add it in your form css, like this
<form name="mainForm" id="createForm"
ng-submit="mainForm.$valid && add()"
novalidate=""
style="min-height:100px;">

CQ5 parsys leaves some space even in preview mode?

In edit mode we can see all parsys right, and In preview mode CQ shows us how the page would look in Publish instance. I have a page in which I have hardcoded my textfields and I have used parsys for entering Text (Labels ) on the page ...
But when I enter the preview mode the parsys leaves some space which makes my UI look bad.
Please see the images below.
How do I remove this extra space ?
I think I'm close to solving it ... I think a class in bootstrap CSS is adding the space its not the Parsys anyways here is the code
<%--
Videojet Add New User Component
--%>
<%#include file="/libs/foundation/global.jsp"%>
<%# page
import="com.videojet.hiresite.beans.HRRepresentative,
java.util.*"%>
<%
List<HRRepresentative> hrList = (List<HRRepresentative>)request.getAttribute("hrList");
%>
<cq:include script="head.jsp" />
<html>
<head>
<cq:includeClientLib css="videojetlib" />
<cq:includeClientLib css="customcarousel" />
<cq:includeClientLib css="bootstrapold" />
<link rel="shortcut icon" type="image/ico"
href="/content/dam/videojet/favicon.ico" />
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse"
data-target=".nav-collapse">
<span class="icon-bar"></span> <span class="icon-bar"></span> <span
class="icon-bar"></span>
</button>
<a class="brand" href="#"><img
src="/content/dam/videojet/Videojet-Logo.png"></img></a>
<div class="nav-collapse collapse">
<p class="navbar-text pull-right">
<a href="/services/videojet/v1/LoginController/logout"
class="navbar-link">Logout</a>
</p>
<ul class="nav">
<li class="active"><a
href="/services/videojet/v1/AddNewUserController/view">Add
New User</a></li>
<li><a
href="/services/videojet/v1/EditDeleteUsersController/view">Edit
/ Delete User</a></li>
<li><a
href="/services/videojet/v1/EditMyInformationController/view">Edit
My Information</a></li>
<li>Upload Documents</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
</div>
<!-- Adding above new Top navigation -->
<div style =" padding-bottom: 20px;">
<div class="container shadow">
<div class="span11">
<cq:include path="carouselparsys"
resourceType="foundation/components/parsys" />
</div>
<div class="row span11">
<form class="form-horizontal"
action="/services/videojet/v1/AddNewUserController/addUser"
method="POST" enctype="multipart/form-data" id ="addNewUserForm">
<input type="hidden" name="flagField" id="flagField" value="0"/>
<div class="row span11">
<div class="control-group">
<label class="control-label" for="inputEmail"><cq:include path="zensarParsys" resourceType="foundation/components/parsys"/></label>
<div class="controls">
<input type="text" id="addNewUserUID" name="addNewUserUID"
class="input-xlarge" style="height: 30px;">
</div>
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputPassword">First Name</label>
<div class="controls">
<input type="text" id="addNewUserFirstName"
name="addNewUserFirstName" class="input-xlarge"
style="height: 30px;">
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputPassword">Last Name</label>
<div class="controls">
<input type="text" id="addNewUserLastName"
name="addNewUserLastName" class="input-xlarge"
style="height: 30px;">
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputPassword">Email
Address</label>
<div class="controls">
<input type="text" id="addNewUserEmailId"
name="addNewUserEmailId" class="input-xlarge"
style="height: 30px;">
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputPassword">HR
Representative</label>
<div class="controls">
<select class="input-xlarge" id="addNewUserHRRep"
name="addNewUserHRRep">
<c:forEach items="${hrList}" var="hr">
<option value="${hr.repId}">${hr.firstName}
${hr.lastName}</option>
</c:forEach>
</select>
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputPassword">Non-Compete
Letter</label>
<div class="controls">
<input type="file" id="addNewUserNonCompeteLetter"
name="addNewUserNonCompeteLetter" style="height: 30px;">
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputPassword">Offer
Letter</label>
<div class="controls">
<input type="file" id="addNewUserOfferLetter"
name="addNewUserOfferLetter" style="height: 30px;">
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputPassword">Employee
Type</label>
<div class="controls">
<label class="checkbox inline"> <input type="radio"
id="addNewUserLocal" name="addNewUserType" checked="checked" value="1">
Local
</label> <label class="checkbox inline"> <input type="radio"
id="addNewUserField" name="addNewUserType" value="2">
Field
</label> <label class="checkbox inline"> <input type="radio"
id="addNewUserInternational" name="addNewUserType" value="3">
International
</label>
<label class="checkbox inline"> <input type="radio"
id="addNewUserInternational" name="addNewUserType" value="4">
Admin
</label>
</div>
<!-- the Div that brings them in line !!! -->
</div>
<div class="control-group">
<label class="control-label" for="inputPassword">Special
Intructions</label>
<div class="controls">
<textarea rows="3" class="input-xlarge" id="addNewUserTextArea"
name="addNewUserTextArea"></textarea>
</div>
</div>
<div class="control-group">
<div class="control-label">
<button type="submit" class="btn btn-primary">Add User</button>
</div>
</div>
</form>
</div>
</div>
</div>
<div id="footer">
<cq:include path="addNewUserVideojetFooter"
resourceType="foundation/components/parsys" />
</div>
<cq:includeClientLib js="videojetlib" />
<cq:includeClientLib js="customcarousel" />
<cq:includeClientLib js="bootstrapold" />
<!-- modal -->
<div id="usderIdCheckModal" class="modal hide fade" tabindex="-1"
role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"
data-backdrop="static">
<div class="modal-header">
<h3 id="myModalLabel">Checking if User Id is available</h3>
</div>
<div class="modal-body" align="center">
<div align="center">
<img src="/content/dam/videojet/ajax-loader.gif"></img>
</div>
<p>Please Wait...</p>
</div>
</div>
<!-- Second Modal -->
<!-- modal -->
<div id="notAvailableModal" class="modal hide fade" tabindex="-1"
role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
<h3 id="myModalLabel">Warning</h3>
</div>
<div class="modal-body" align="center">
<div align="center">
</div>
<p>This User Id already exists</p>
</div>
</div>
<script src="/etc/designs/videojet/clientlibs/js/addNewUserScript.js"></script>
</body>
</html>
Maybe there is a style rule in the drag components like visible: hidden; change to display: none
Well I solved it my self. The problem was with bootstrap. The extra space was added by bootstrap class="control-group", I just replaced it with class="row".
There is still little space but at least better than before.
You should be able to add ?wcmmode=disabled to the end of your browser address bar to remove extra spacing.

twitter bootstrap - container left shifted and alerts not expanding

to all moderates reading this message I had asked it in another thread but was told to post it as a stand alone question. Not my intention to cluter the forum
My twitter bootstrap container is shifted to the left for some reason. Is there any way to make it take up the whole screen despite resolution? When I use .container-fluid, it seems to shrink the overall container (even when I add .row-fluid to all my rows).
My alerts are not increasing in width. That is to say that I would like the alert (background color and all) to be the width of the container. In the link below I would like "If this is your ad login to edit" to span the whole container. However when I try .span12 it just shifts the alert. Also width:100%; does nothing to help. Also when I press login and an a login error occurs the error is shown at the far left instead of right on top of the login form.
** concerning items 2 and 3 refer to this link https://twitter.com/HassanNSaid/status/355797180063301632/photo/1 **
Requested code
<div class="container-fluid">
<div class="row well">
<?php
loginFunc();
miniLogo();
searchFunc();
otherOptions();
?>
</div>
<div class="row">
<center>
<?php
if(isset($_GET['error_with_new_title'])){
echo'<span class="alert-error">'.$_GET['error_with_new_title'].'</span>';
}elseif(isset($_GET['success_with_new_title'])){
echo'<span class="alert-success">'.$_GET['success_with_new_title'].'</span>';
}elseif(isset($_GET['error_with_new_vitals'])){
echo'<span class="alert-error">'.$_GET['error_with_new_vitals'].'</span>';
}elseif(isset($_GET['success_with_new_vitals'])){
echo'<span class="alert-success">'.$_GET['success_with_new_vitals'].'</span>';
}elseif(isset($_GET['error_with_new_description'])){
echo'<span class="alert-error">'.$_GET['error_with_new_description'].'</span>';
}elseif(isset($_GET['success_with_new_description'])){
echo'<span class="alert-success">'.$_GET['success_with_new_description'].'</span>';
}else{
echo'<span class="alert">If this is your ad please log in to edit it!</span>';
}
?>
</center>
</div>
<div class="row page-header text-center">
<?php
if(isset($_SESSION['id'])){
$i = $_SESSION['id'];
printAdTitle($i);
}else{
$i = 0;
printAdTitle($i);
}
?>
</div>
<div class="imagesAndVitals">
<div class="row span9">
<center>
<? printAdImages($_GET['id']); ?>
</center>
</div>
<div class="row tabbable span6" style="height:374px;">
<ul class="nav nav-tabs">
<li class="active"> Ad Vitals</li>
<li>Contact Seller</li>
</ul>
<div class="contactVitalsDiv">
<div class="tab-content">
<div class="tab-pane active" id="adVitalsPane">
<?php
if(isset($_SESSION['id'])){
$i = $_SESSION['id'];
printAdVitals($i);
}else{
$i = 0;
printAdVitals($i);
}
?>
</div>
<div class="tab-pane" id="contactUserPane">
<?php
if(isset($_SESSION['id'])){
$i = $_SESSION['id'];
printAdContactForm($i);
}else{
$i = 0;
printAdContactForm($i);
}
?>
</div>
</div>
<div class="ratingForm">
<?php
$adId = $_GET['id'];
printRatingForm($adId);
?>
</div>
</div>
</div>
</div>
<div class="row text-center descriptionDiv">
<?php
if(isset($_SESSION['id'])){
$i = $_SESSION['id'];
printAdDescription($i);
}else{
$i = 0;
printAdDescription($i);
}
?>
</div>
<div class="row">
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active">
Similar Items
</li>
<li>
User's Other Items
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="similarItmesPane">
<? printSimilarItems(); ?>
</div>
<div class="tab-pane" id="otherUserItemsPane">
<? printOtherItems(); ?>
</div>
</div>
</div>
</div>
</div>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></meta>
<title>Scoopclassifieds.com - Test4 posted under Electronics/Laptop</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/bootstrap-carousel.js"></script>
<script type="text/javascript" src="js/bootstrap-tooltip.js"></script>
<script type="text/javascript" src="js/bootstrap-popover.js"></script>
<script type="text/javascript" src="js/editFormValidation.js"></script>
<link rel="stylesheet" href="css/bootstrap.css" type="text/css" />
<link rel="stylesheet" href="css/customStyles.css" type="text/css" />
</head>
<body onLoad="addOption_list();">
<div class="container-fluid">
<div class="row well">
<form class="form-inline pull-right" action="controllers/login.php" method="POST">
<input type="text" name="email" id="email" placeholder="Email" class="span2" />
<input type="password" name="password" id="password" placeholder="●●●●●●●●" class="span2" />
<input type="submit" name="login" id="login" value="Login" class="btn" />
</form>
<img src="/scoopclassifieds/slir/w300-h200-q60/scoopclassifieds/images/scoop3.png" alt="miniLogo" />
<form action="search.php" method="get" name="search_form" id="search_form" class="form-search pagination-centered">
<input type="text" name="searchFor" id="searchFor" class="searchInput span10" />
<input type="text" name="min" id="min" placeholder="Min Price" class="span2 text-center" />
<input type="text" name="max" id="max" placeholder="Max Price" class="span2 text-center" />
<input type="text" name="location" id="location" class="span2 text-center" />
<button type="submit" class="btn">Search</button>
</form>
<ul class="nav nav-pills">
<li>Add</li>
<li>Browse</li>
</ul>
</div>
<div class="row">
<center>
<span class="alert">If this is your ad please log in to edit it!</span> </center>
</div>
<div class="row page-header text-center">
<div id="item_title"><br/><span style="font-size:35px; font-weight:bold;">Test4</span></div> </div>
<div class="imagesAndVitals">
<div class="row span9">
<center>
<div id="myCarousel" class="carousel well span8">
<div class="carousel-inner">
<img src="/scoopclassifieds/slir/w500-h374-q60//classy/images/6/test4/61Ec8SFYZoL._SS500_.jpg" id="0" alt="image0" class="item active" />
<img src="/scoopclassifieds/slir/w500-h374-q60//classy/images/6/test4/0176440763.jpg" id="1" alt="image1" class="item" />
</div>
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
</center>
</div>
<div class="row tabbable span6" style="height:374px;">
<ul class="nav nav-tabs">
<li class="active"> Ad Vitals</li>
<li>Contact Seller</li>
</ul>
<div class="contactVitalsDiv">
<div class="tab-content">
<div class="tab-pane active" id="adVitalsPane">
<span class="well span5" style="font-size:30px; color:white; text-align:center; background:#BC4F0F;">$124</span><br/>
<span style="font-size:16px; font-weight:bold;">Location:</span><span style="font-size:14px;">Ottawa</span><br/>
<span style="font-size:16px; font-weight:bold;">Category:</span><span style="font-size:14px;">Electronics</span><br/>
<span style="font-size:16px; font-weight:bold;">Sub-Category:</span><span style="font-size:14px;">Laptop</span>
</div>
<div class="tab-pane" id="contactUserPane">
<form action="" method="post">
<label>Email:</label> <input type="text" name="email" id="email" value="" class="viewInput" /><br/>
<label>Message:</label><br/>
<textarea rows="4" cols="50" name="message" id="message" class="input"></textarea><br/>
<input type="submit" name="contactUser" id="contactUser" value="Contact User" class="button" />
</form>
</div>
</div>
<div class="ratingForm">
<div class="modal hide fade" id="userFeedback" aria-hidden="true">
<div class="modal-header">
<h4>Give us some feedback about this user</h4>
</div>
<div class="modal-body">
<form>
<h5>The Good</h5>
<input type="radio" name="feedBack" value="Good1">Good1<br/>
<input type="radio" name="feedBack" value="Good2">Good2<br/>
<input type="radio" name="feedBack" value="Good3">Good3<br/><br/>
<input type="submit" name="giveFeedBack" id="giveFeedBack" class="btn btn-success" value="Give Feedback" />
</form>
</div>
<div class="modal-footer">
<input type="button" class="btn" data-dismiss="modal" value="Close" />
</div>
</div>
Give feedback
</div>
</div>
</div>
</div>
<div class="row text-center descriptionDiv">
<span class="page-header descriptionHeader">Description:</span><br/><div id="item_description">"But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who lov</div> </div>
<div class="row">
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active">
Similar Items
</li>
<li>
User's Other Items
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="similarItmesPane">
<h4>Ads with similar category of: Electronics</h4><ul class="thumbnails">
<li class="span4"><a href="view.php?id=2&title=test3" class="thumbnail" style="height:235px; width:300px;" id="secondary-info" rel="popover" data-content="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the..." data-original-title="Price: $1234<br/>Location: Ottawa<br/>Electronics/Television">
<center>Test3</center>
<img src="/scoopclassifieds/slir/w300-h200-q60/" alt="Test3MainImage" />
</a></li>
<li class="span4"><a href="view.php?id=24&title=test21" class="thumbnail" style="height:235px; width:300px;" id="secondary-info" rel="popover" data-content="There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or..." data-original-title="Price: $1245<br/>Location: Ottawa<br/>Electronics/Laptop">
<center>Test21</center>
<img src="/scoopclassifieds/slir/w300-h200-q60/" alt="Test21MainImage" />
</a></li>
</ul> </div>
<div class="tab-pane" id="otherUserItemsPane">
<ul class="thumbnails">
<li class="span4"><a href="view.php?id=2&title=test3" class="thumbnail" style="height:235px; width:300px;" id="secondary-info" rel="popover" data-content="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the..." data-original-title=" Price: $1234<br/> Location: Ottawa<br/>Electronics/Television">
<center>Test3</center>
<img src="/scoopclassifieds/slir/w300-h200-q60/" alt="Test3MainImage" />
</a></li>
</ul> </div>
</div>
</div>
</div>
</div>
<!--
</div>
<div class="footer">
Home | Contact Us<br/>
Scoop Classifieds ©
2013 </div>
</div> -->
</body>
<script>
$(document).ready(
function(){
$('#myCarousel').carousel();
$('[rel="popover"]').popover();
}
);
</script>
</html>

Resources