I am new to Laravel. Facing some problem while integrating Laravel-Search. I am follow the below website and got some thing but not perfect.
Laravel_search
In wrote the query like this..
$json = '{
"query" : {
"match" : {
"name" : "apis"
}
}
}';
$params['explain'] = $json;
return $results = Es::search($params);
getting error as unreadable format. What ever i send through above it wil give the below error.
Error:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Whoops! There was an error.</title> <style>.cf:before, .cf:after {content: " ";display: table;} .cf:after {clear: both;} .cf {*zoom: 1;} body { font: 14px helvetica, arial, sans-serif; color: #2B2B2B; background-color: #D4D4D4; padding:0; margin: 0; max-height: 100%; } a { text-decoration: none; } .container{ height: 100%; width: 100%; position: fixed; margin: 0; padding: 0; left: 0; top: 0; } .branding { position: absolute; top: 10px; right: 20px; color: #777777; font-size: 10px; z-index: 100; } .branding a { color: #CD3F3F; } header { padding: 30px 20px; color: white; background: #272727; box-sizing: border-box; border-left: 5px solid #CD3F3F; } .exc-title { margin: 0; color: #616161; text-shadow: 0 1px 2px rgba(0, 0, 0, .1); } .exc-title-primary { color: #CD3F3F; } .exc-message { font-size: 32px; margin: 5px 0; word-wrap: break-word; } .stack-container { height: 100%; position: relative; } .details-container { height: 100%; overflow: auto; float: right; width: 70%; background: #DADADA; } .details { padding: 10px; padding-left: 5px; border-left: 5px solid rgba(0, 0, 0, .1); } .frames-container { height: 100%; overflow: auto; float: left; width: 30%; background: #FFF; } .frame { padding: 14px; background: #F3F3F3; border-right: 1px solid rgba(0, 0, 0, .2); cursor: pointer; } .frame.active { background-color: #4288CE; color: #F3F3F3; box-shadow: inset -2px 0 0 rgba(255, 255, 255, .1); text-shadow: 0 1px 0 rgba(0, 0, 0, .2); } .frame:not(.active):hover { background: #BEE9EA; }
How query know about the table name here. Where should i need to put the table name. help me out plz..
If you need an easy to use laravel package to talk to Elasticsearch, take a look at this one: https://github.com/freekmurze/searchindex
Related
I am trying to generate a pdf file from HTML using the dompdf package in laravel. When I am trying to load the view in the browser everything works perfectly but when I generate the pdf of the same view file , the CSS styling break.
In the browser it looks like this,
In pdf file it looks like this,
this is my HTML code,
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css" media="all">
body {
width: 100%;
height: 100%;
margin: 20px;
padding: 0;
background-color: #FAFAFA;
font: 12pt "Tahoma";
}
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
}
#page {
size: A4;
margin: 0;
}
#media print {
html,
body {
width: 210mm;
height: 297mm;
}
.page {
margin: 0;
border: initial;
border-radius: initial;
width: initial;
min-height: initial;
box-shadow: initial;
background: initial;
page-break-after: always;
}
}
* {
box-sizing: border-box;
}
body {
margin-top: 80px;
font-family: "HelveticaNeue-CondensedBold", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}
.card {
height: 320px;
width: 530px;
margin: 0 auto;
background: #ECECEC;
border-radius: 4px;
}
.card header {
background: #ED3D34;
height: 90px;
width: 100%;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border-bottom: 2px solid rgba(180, 80, 80, .5);
border-top: 1px solid rgba(221, 108, 108, .8);
padding: 35px 20px;
opacity: .9;
}
.card header h1 {
color: #fff;
line-height: 90%;
font-size: 20px;
margin: 0;
text-shadow: -1px -1px 1px rgba(0, 0, 0, .5);
}
.card article {
padding: 20px;
}
.card article img {
float: left;
margin-right: 30px;
width: 130px;
height: 177px;
transition: all .3s ease-in-out;
}
.card article h2 {
color: #515355;
float: left;
margin: 0 5px 15px 0;
font-weight: normal;
padding: 0 0 8px 0;
width: 250px;
}
.card article .area {
height: 170px;
width: 440px;
}
.card article .area h3 {
margin: 0;
color: #5F6163;
font-size: 20px
}
.card article .area ul {
margin: 5px 0 30px 0;
padding: 0;
list-style: none;
}
.card article .area ul li {
margin: 5px 0 0 0;
font-size: 16px;
color: #94957F;
text-shadow: 0 0 1px rgba(0, 0, 0, .3);
}
.card article .area ul li .bar {
width: 280px;
height: 15px;
display: inline-block;
border-radius: 50px;
float: right;
margin: 0 15px 0 0;
opacity: .9;
background-color: #CACACA;
box-shadow: inset 0 2px 2px rgba(0, 0, 0, .35);
}
.card article .area ul li .bar:before {
left: 0;
width: 0;
height: 15px;
background: rgb(254, 213, 121);
box-shadow:
inset 0 4px 4px rgba(255, 255, 255, .3),
inset 0 -2px 3px rgba(0, 0, 0, .05),
0 1px 0 0px #D29D40;
display: inline-block;
border-radius: 50px;
content: '';
z-index: -1;
}
.card article .area ul li .bar.percent-100:before {
width: 280px;
}
.card article .area ul li .bar.percent-90:before {
width: 260px;
}
.card article .area ul li .bar.percent-80:before {
width: 240px;
}
.card article .area ul li .bar.percent-70:before {
width: 220px;
}
.card article .area ul li .bar.percent-60:before {
width: 200px;
}
.card article .area ul li .bar.percent-50:before {
width: 180px;
}
.card article .area ul li:before {
/* content: '\2605'; */
margin-right: 5px;
}
.card article .area::-webkit-scrollbar {
width: 10px;
}
.card article .area::-webkit-scrollbar-track {
background-color: rgba(217, 217, 217, .5);
border-radius: 50px;
}
.card article .area::-webkit-scrollbar-thumb {
background: rgba(184, 184, 184, .5);
box-shadow:
inset 1px 1px 0 rgba(0, 0, 0, 0.10),
inset 0 -1px 0 rgba(0, 0, 0, 0.07);
border-radius: 50px;
}
</style>
</head>
<body>
<div class='card'>
<header>
<h1 class="text-center">Bright Group Tuition</h1>
</header>
<article>
<img alt='My Pic' id='thumb' src='https://s.cdpn.io/1202/timpietrusky_on_rampage_small_1.jpg'>
<h2>Tim Pietrusky</h2>
<div class='area'>
<ul>
<li>
Std: 10th
</li>
<li>
Batch: B1
</li>
<li>
DOB: 12/12/12
</li>
<li>
Academic Year: 2020-2020
</li>
<li>
Contact Number: 8390790935
</li>
<li>
Address: 911B,Baker Street
</li>
</ul>
</div>
</article>
</div>
</body>
</html>
This is the code to generate pdf file,
public function generateIDCards()
{
// $pdf = PDF::loadView('templates.idcard');
$pdf = \App::make('dompdf.wrapper');
$html = view('templates.idcard')->render();
$pdf->loadHTML($html);
return $pdf->download('card.pdf');
// return $html;
}
Any suggestions would be appreciated...
In your css just change the height to this:
.card
{
height: 400px;
width: 530px;
margin: 0 auto;
background: #ECECEC;
border-radius: 4px;
}
You have to set the Content Type to
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
Hope it helps. Cheers!
How would I do it so when my model opens, it doesn't automatically scroll me all the way to the bottom of the page
<style>
body {
color: #333;
height: 80em;
z-index: 1000;
}
.wrap {
padding: 40px;
text-align: center;
}
h1 {
font-size: 30px;
margin-bottom: 40px;
}
p {
margin-bottom: 20px;
}
.btn {
background: #428bca;
border: #357ebd solid 1px;
border-radius: 3px;
color: #fff;
display: inline-block;
font-size: 14px;
padding: 8px 15px;
text-decoration: none;
text-align: center;
min-width: 60px;
position: relative;
transition: color .1s ease;
}
.btn:hover {
background: #357ebd;
}
.btn.btn-big {
font-size: 18px;
padding: 15px 20px;
min-width: 100px;
}
.btn-close {
color: #aaa;
font-size: 30px;
text-decoration: none;
position: absolute;
right: 5px;
top: 0;
}
.btn-close:hover {
color: #919191;
}
.modal:before {
content: "";
display: none;
background: rgba(0, 0, 0, 0.6);
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 10;
}
.modal:target:before {
display: block;
}
.modal:target .modal-dialog {
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
top: 20%;
}
.modal-dialog {
background: #fefefe;
border: #333 solid 1px;
border-radius: 5px;
margin-left: -200px;
position: fixed;
left: 50%;
top: -100%;
z-index: 11;
width: 360px;
-webkit-transform: translate(0, -500%);
-ms-transform: translate(0, -500%);
transform: translate(0, -500%);
-webkit-transition: -webkit-transform 0.3s ease-out;
-moz-transition: -moz-transform 0.3s ease-out;
-o-transition: -o-transform 0.3s ease-out;
transition: transform 0.3s ease-out;
padding: 8px;
}
.modal-body {
padding: 20px;
}
.modal-header,
.modal-footer {
padding: 10px 20px;
}
.modal-header {
border-bottom: #eee solid 1px;
}
.modal-header h2 {
font-size: 20px;
}
.modal-footer {
border-top: #eee solid 1px;
text-align: right;
}
.thebutton {
display: inline-block;
color: #fff!important;
padding: 6px 12px!important;
border-radius: 5px;
box-shadow: 0 3px 0 1px rgba(0, 0, 0, .3);
line-height: 1;
white-space: nowrap;
text-transform: uppercase;
border-width: 2px;
border-style: solid;
margin-top: 3px;
font-size: 11px;
text-shadow: 0 1px #333;
font-weight: 700;
margin-right: 5px
}
.yes {
background-color: #00813e;
border-color: #8eda55;
float: right
}
.yes:hover {
background-color: #00ab54;
border-color: #b9f373
}
.no {
background-color: #c6165f;
border-color: #f57aad;
float: right
}
.no:hover {
background-color: #d45087;
border-color: #f89dc2
}
#close {
display: none;
}</style>
and also how would I go about aligning the yes and no boxes shown below to the right that say YES and NO without the text affecting them like when I type more text, the box expands
<div class="modal" id="confirm" aria-hidden="true">
<div class="modal-dialog">
<div class="contentHeader headerRed">
<div class="inside">
FOOKIN MODAL BOX M8
</div>
</div>
<img src="https://avatar-retro.com/habbo-imaging/avatarimage?figure=<?php
echo mysql_result(mysql_query("SELECT look FROM users WHERE id = '" . $_SESSION['user']['id'] . "'"), 0);
?>&direction=2&head_direction=3&gesture=sml&action=wav" align="left">
<br>
Hey there <b>{username}</b><br>Are you sure you want to<br> sign out of the hotel??
<br/><div class="thebutton yes">YES</div><br><br><br> <div class="thebutton no">NO</div>
</div>
</div>
For positioning the modal, you are using:
.modal-dialog {
top: -100%;
}
Try adjusting that.
As far as the buttons, remove the <br>'s and then either float the buttons or change their display to inline-block.
The code I have is like this, I use CodeIgniter and DOMPDF library but between pages I have a full blank page (I don't want this), I have something just like my image.
Anyone can help me? Really thanks.
$language = $this->input->cookie('language');
if (!isset($language))
{
$language = $core_settings->language;
}
?>
<!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" xml:lang="en" lang="en">
<head>
<meta name="Author" content=""/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#page {
margin: 0;
}
.pages {
margin: .5in;
}
.other-pages{
padding:60px;
}
.first-page {
margin: 0in;
background-color: black;
height: 100%;
width: 100%;
position:absolute;
background-image: url('https://www.example.com/wp-content/uploads/2015/09/example-cover1.jpg');
background-position: bottom center;
background-repeat: no-repeat;
background-size: 100%;
}
.first-page + * {
page-break-before: always;
}
// CUSTOM STYLE //
#page {
background: #ffffff;
width: 100%;
margin: 0 auto;
margin-top: 0px;
display: block;
z-index: 0;
}
.headline {
color: #4d5357;
font-weight: lighter;
font-size: 48px;
margin: 20px 0 0 0;
}
.terms {
width: 400px;
margin: 0 0 40px 0;
font-size: 12px;
color: #a1a7ac;
line-height: 180%;
}
.terms strong {
font-size: 16px;
}
.recipient-address {
padding-top: 60px;
width: 200px;
}
.company-logo {
right: 40px;
top: 40px;
float:right;
max-height:70px;
}
.company-address {
width: 200px;
color: #a1a7ac;
position: absolute;
right: 0px;
top:70px;
text-align: right;
}
.status {
position: absolute;
top: -50px;
left: -50px;
text-indent: -5000px;
width: 128px;
height: 128px;
}
.Open {
background-image: url(<?php echo base_url(); ?>assets/blackline/img/<?=$language;?>/status-open.png);
}
.Sent {
background-image: url(<?php echo base_url(); ?>assets/blackline/img/<?=$language;?>/status-sent.png);
}
.Paid {
background-image: url(<?php echo base_url(); ?>assets/blackline/img/<?=$language;?>/status-paid.png);
}
.Overdue {
background-image: url(<?php echo base_url(); ?>assets/blackline/img/<?=$language;?>/status-overdue.png);
}
hr {
clear: both;
border: none;
background: none;
border-bottom: 1px solid #d6dde2;
}
.total-due {
float: right;
width: 250px;
border: 1px solid #d6dde2;
margin: 20px 0 40px 0;
padding: 0;
border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px;
text-align: right;
}
.total-heading {
background: #e7ebee;
color: #63676b;
text-shadow: 0 1px 1px #ffffff;
padding: 8px 20px 0 0;
-moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
box-shadow: inset 0px 0px 0px 1px rgba(255,255,255,0.5), 0 2px 2px rgba(0, 0, 0, 0.08);
border-bottom: 1px solid #d6dde2;
}
.total-heading p, .total-amount p {
margin: 0; padding: 0;
}
.total-amount {
padding: 8px 20px 8px 0;
color: #4d5357;
font-size: 24px;
margin:0;
}
table.tablesorter {
width: 100%;
text-align: left;
border:0;
margin: 0px 0 0 0;
color: #a1a7ac;
}
table.tablesorter thead tr th, table.tablesorter tfoot tr th {
margin: 0;
}
table.tablesorter thead tr.header {
background: #e7ebee;
color: #4d5357;
text-shadow: 0 1px 1px #ffffff;
padding-left: 20px;
-moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
box-shadow: inset 0px 0px 0px 1px rgba(255,255,255,0.5), 0 2px 2px rgba(0, 0, 0, 0.08);
border-bottom: 1px solid #d6dde2;
}
table.tablesorter thead tr.header th{
font-size: 11px;
height:30px;
border-bottom: 1px solid #d8dcdf;
text-align: left;
padding-left:10px;
}
.round{
border: 1px solid #d6dde2;
border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px;
}
table.tablesorter tbody td {
padding: 10px;
vertical-align: top;
font-size: 11px;
}
table.tablesorter tbody tr.even td {
background: #f6f8f9;
}
.custom-terms {
padding:20px 10px;
}
.sum{
width:50%;
padding:5px 10px;
}
.margin{
padding:5px 10px;
height:20px;
}
</style>
</head>
<body>
<div class="pages first-page"></div>
<div class="other-pages">
<h2>Lorem ipsum dolor...</h2>
<div class="round">
<table id="table" class="tablesorter" cellspacing="0" >
<thead>
<tr class="header">
<th width="5%">#</th>
<th width="95%">Tarea</th>
</tr>
</thead>
<tbody>
<?php $i = 0; $sum = 0; $row=false; ?>
<?php foreach ($tasks as $task):?>
<tr <?php if($row){?>class="even"<?php } ?> >
<td><?php echo $i; ?></td>
<td><?php echo $task->name; ?><?php echo strip_tags($task->description); ?></td>
</tr>
<?php $i++; endforeach; $row = true; ?>
</tbody>
</table>
</div>
</div>
</body>
</html>
I'm having a problem with my CSS style sheet. I try inputting the values to the DIV CLASSES, but there is no effect. The style sheet worked fine on my other HTML website, but I'm using a common header and footer via PHP on this website and it seems like it's interfering with the CSS for some reason. I don't know if my coding has any fallacies in it, but from what I can see everything looks fine:
CSS STYLE SHEET
body {
background-color: #000;
font-family: Arial, Verdana;
color: #fff;
}
a:link {
color: #ff0;
text-decoration: none;
}
a:visited {
color: #ff0;
text-decoration: none;
}
a:hover {
color: #fff;
text-decoration: none;
}
a:active {
color: #000f;
text-decoration: none;
}
p {
text-align: justify;
font-size: 14px;
}
.container {
border: 1px solid #fff;
width: 820px;
height: 1350px;
padding: 10px;
}
.header {
background-image: url("/Images/CSS/logo.jpg");
background-position: center;
background-size: cover;
height: 20%;
width: 100%;
}
.logo {
background: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
background: -o-linear-gradient(top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
background: -moz-linear-gradient(top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
background: linear-gradient(top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
border: 0px solid #fff;
height: 90%;
width: 100%;
}
.logo h1 {
margin: 15px;
color: #ffa500;
float: right;
position: relative;
bottom: -160;
}
.logo p {
font-size: 12px;
margin: 15px;
color: #ffa500;
float: left;
position: relative;
bottom: -175;
}
.userbar {
width: 100%;
height: 10%;
background-color: #000;
border: 1px solid #fff;
padding: 5px;
.body {
border: 0px solid #fff;
width: 100%;
height: 70%;
}
.left {
border: 1px solid #fff;
float: left;
width: 250px;
height: 100%;
}
.right {
border: 0px solid #fff;
float: right;
width: 550px;
height: 100%;
}
.nav {
width: 100%;
border: 1px solid #fff;
margin-top: 15px;
}
.nav ul {
margin: 0px;
padding: 0px;
list-style-position: none;
list-style: none;
}
.nav li {
width: 85%;
margin: 15px;
color: #fff;
border-bottom: 1px dotted #fff;
}
.side {
margin-top: 25px;
color: #fff;
width: 100%;
border: 1px solid #fff;
}
.content {
width: 100%;
}
.content p {
padding: 10px;
color: #fff;
text-align: justify;
border-style: solid;
border-width: 0px;
}
.footer {
height: 10%;
width: 100%;
border: 1px solid #fff;
}
.footer p {
padding: 5px;
color: #fff;
text-align: center;
}
.pic {
padding: 10px;
margin: 10px;
}
.pic p {
width: 430px;
text-align: center;
font-size: 9px;
}
.pic1 {
float: left;
padding: 10px;
margin: 10px;
border: 1px solid #fff;
}
.pic1 p {
width: 170px;
text-align: center;
font-size: 9px;
}
.pic2 {
float: right;
margin: 10px;
padding: 10px;
border: 1px solid #fff;
}
.pic2 p {
width: 170px;
text-align: center;
font-size: 9px;
}
Index Page
Note that the Index page itself is not html. It's a PHP file and I'm using separate PHP files for the header and footer. This is just the page source to let you see the layout of my website.
<html>
<head>
<title></title>
<link rel ="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<div class="header">
<div class="logo">
</div>
<div class="userbar">
</div>
</div>
<div class="body">
<div class="left">
<div class="nav">
<ul>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li>Item4</li>
<li>Item5</li>
<li>Item6</li>
<li>Item7</li>
</ul>
</div>
<div class="side">
<h3 align="center">News</h3>
</div>
</div>
<div class="right">
<div class="content"> </div><!----content----!>
</div><!----right----!>
<div class="footer">
</div>
</div><!----container----!>
</body>
</html>
I'm making a website in HTML, CSS, and PHP and the page goes way beyond the screen but there is no scroll bar provided by the browser (Safari 5.0.6 and Firefox 14.0.1 on Mac). Is it because I included the PHP? But shouldn't that be there before the page is rendered?
Here is a link: test website
My PHP syntax:
<div id="content">
<div class="wrapper">
<div id="home" class="alert">
Welcome to always4free©! To browse the classifieds, you must first either choose a location or have your location detected.
</div>
<?php include "res/pages/categories.php"; ?>
</div>
</div>
</div>
What is going on?
EDIT: Here is my CSS:
body {
background-image: url("http://always4free.org/site/images/bg.jpg");
background-size: cover;
font-family: "Mouse Memoirs",sans-serif;
}
.wrapper {
margin: 0 auto;
width: 850px;
}
#header {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5);
border-bottom: 3px solid green;
box-shadow: 0 2px 10px #888888;
height: 50px;
left: 0;
position: fixed;
top: 0;
width: 100%;
}
#logo {
color: rgba(255, 255, 255, 0.7);
float: left;
font-family: "Wendy One",sans-serif;
font-size: 30px;
line-height: 50px;
width: 250px;
}
#logo a:hover {
color: #FFFFFF;
}
#nav {
float: right;
line-height: 50px;
width: 600px;
}
#nav a:first-child {
margin-left: 0;
}
#nav a:last-child {
margin-right: 0;
}
#nav a:link, #nav a:visited {
color: rgba(255, 255, 255, 0.9);
font-family: "Mouse Memoirs",sans-serif;
letter-spacing: 1px;
margin-left: 10px;
margin-right: 10px;
}
#nav a:hover {
border-bottom: 2px solid #FFFFFF;
color: #FFFFFF;
padding-bottom: 1px;
}
#nav a.detect {
background-color: rgba(255, 255, 255, 0.7);
border: 1px solid rgba(255, 255, 255, 0.4);
border-radius: 2px 2px 2px 2px;
color: rgba(0, 0, 0, 0.7);
padding: 5px;
}
#nav a.detect:hover {
color: #000000;
}
#content {
font-family: "Mouse Memoirs",sans-serif;
letter-spacing: 1px;
margin-top: 70px;
}
.page {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5);
border: 1px solid green;
color: #FFFFFF;
font-size: 20px;
padding: 10px;
}
.alert {
background: none repeat scroll 0 0 #AD2E1D;
border: 1px solid #911E0F;
color: white;
font-size: 20px;
padding: 10px;
text-align: center;
}
#categories {
margin-top: 20px;
}
#categories h2 {
color: rgba(255, 255, 255, 0.7);
font-family: "Wendy One",sans-serif;
font-size: 26px;
}
#categories a:link, #categories a:visited {
background: none repeat scroll 0 0 white;
color: black;
padding: 3px;
}
#categories .block {
line-height: 35px;
}
You have all of your content wrapped inside an element of position: fixed;. The body is not able to retrieve the height of fixed or absolute children and is therefore set to an actual height of 0 - thus eliminating any need for scrolling.
If you move your #content element outside of the fixed header things should be working as expected.
Move your div with id content outside of your header div.
It will solve your problem.
Add a clearfix class with your .wrapper so that it have a height and then use:
.wrapper{
overflow: scroll;
}
add overflow: scroll; in your #header style and change position to relative.
#header {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5);
border-bottom: 3px solid green;
box-shadow: 0 2px 10px #888888;
height: 50px;
left: 0;
position: **relative**;
top: 0;
width: 100%;
**overflow: scroll;**
}