Is it possible to set a checkbox instead of a split button in a split-button-list in jquery-mobile??
It seems to be easy to change it to be another button, but checkbox..
I want my checkbox to appear on a RIGHT side INSTEAD of a split button, not instead of a picture
Thanks for help..
Here is a DEMO FIDDLE
The UL does not use split icon, but instead an absolutely positioned DIV on the right with a checkbox inside. The CSS is used to position everything correctly:
<ul class="has-right-radio" data-role="listview" data-inset="true">
<li data-icon="false">
<a href="#">
<img src="http://view.jquerymobile.com/1.3.0/docs/_assets/img/album-p.jpg" />
<h3>Picture</h3>
<p>List item with thumbnail and right radio</p>
</a>
<div class="right-radio">
<input type="checkbox" name="checkbox-1a" id="checkbox-1a" checked="" />
<label for="checkbox-1a"></label>
</div>
</li>
</ul>
.has-right-radio .ui-link-inherit {
margin-right: 48px !important;
}
.right-radio {
position: absolute;
top: 0px; bottom: 0px; right: 0px;
width: 48px;
border-left: 1px solid rgb(204, 204, 204);
}
.right-radio .ui-checkbox input {
visibility: hidden;
}
.right-radio .ui-checkbox, .right-radio .ui-checkbox label {
position: absolute;
top: 0px; bottom: 0px; right: 0px; left: 0px;
}
.right-radio .ui-checkbox label {
background-image: none;
background-color: transparent;
border: 0;
}
.right-radio .ui-checkbox label .ui-btn-inner {
position: absolute;
top: 50%;
margin-top: -10px;
}
If you do not need the thumbnail, just leave out the IMG tag like the second LI in the fiddle.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<style>
.ui-btn-up-c{border:none;}
.ui-btn-hover-c{border:none;}
.ui-btn-hover-c:visited, .ui-btn-hover-c:hover, .ui-btn-hover-c a.ui-link-inherit { color:none;background:none;border:0px; }
</style>
</head>
<body>
<div data-role="page" id="myPage1">
<ul data-role="listview">
<li>
<div class="ui-grid-b">
<div class="ui-block-a" style="width: 30%;">
<div data-role="fieldcontain">
<img src="http://view.jquerymobile.com/1.3.0/docs/_assets/img/album-p.jpg">
</div>
</div>
<div class="ui-block-b" style="width: 60%;">
<div data-role="fieldcontain">
<h2>Phoenix</h2>
<p>Wolfgang Amadeus Phoenix Wolfgang Amadeus Phoenix Wolfgang Amadeus Phoenix</p>
</div>
</div>
<div class="ui-block-c" style="width: 6%; padding-top: 55px; float: right;">
<div style="float: right;">
<label>
<input name="checkbox-0 " type="checkbox">
</label>
</div>
</div>
</div>
</li>
</ul>
</div>
</body>
</html>
Related
I am trying to create a banner that has a two tone blue color similar to this:
I am using Bootstrap 4.x with asp.net mvc. I have tried dividing the banner into 3 columns but I couldn't expand the the background color all the way in the icon column.
Here is how it currently looks on my end:
Here is my code:
View
<div class="row alert-banner-row">
<div class="col-sm-2 icon-column">
<i class="fas fa-3x #Model.Icon1 fa-inverse"></i>
</div>
<div class="col-sm-8 body-column">
<h5>#Model.Title</h5>
<p>#Model.Content</p>
</div>
<div class="col-sm-2 button-column">
#if (Model.ButtonUrl.EndsWith(".pdf"))
{
<a class="ctaBanner-cta button button--white" target="_blank" href="#Model.ButtonUrl">#Model.ButtonLabel</a>
}
else
{
<a class="ctaBanner-cta button button--white" href="#Model.ButtonUrl">#Model.ButtonLabel</a>
}
</div>
</div>
SCSS
.alert-banner-row {
display: flex;
flex-direction: row;
align-items: center;
padding: 0.5rem;
border-radius: 1rem;
background-color: #004089;
.body-column {
padding-top: 10px;
font-family: 'Roboto', sans-serif;
margin: 0rem;
color: white;
}
.icon-column {
background-color: #00336D;
}
}
How can I edit what I currently have to make it look like the first screenshot?
In order to have the darker background on your .icon-column, its parent .alert-banner-row cannot have any padding. Otherwise it would show a gap:
<div class="row alert-banner-row">
<div class="col-sm-2 icon-column">
<i />
</div>
<div class="col-sm-8 body-column">
<h5 />
<p />
</div>
<div class="col-sm-2 button-column">
<a />
</div>
</div>
And to show the left corner, you would need to specify overflow:hidden; otherwise it won't be shown as it's covered by its overflow content.
.alert-banner-row {
background-color: #004089;
border-radius: 1rem;
color: #fff;
overflow: hidden;
.body-column {
padding-top: 1rem;
padding-bottom: 1rem;
font-family: 'Roboto', sans-serif;
}
.icon-column,
.button-column {
display: flex;
flex-flow: column nowrap;
align-items: center;
justify-content: center;
}
.icon-column {
background-color: #00336D;
}
}
demo: https://jsfiddle.net/davidliang2008/krdu6wjc/53/
You need to make the columns display:flex and align-items: center instead...
.alert-banner-row {
display: flex;
padding: 0.5rem;
border-radius: 1rem;
background-color: #004089;
.body-column {
padding-top: 10px;
font-family: 'Roboto', sans-serif;
margin: 0rem;
color: white;
align-self: center;
}
.icon-column {
background-color: #00336D;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
.button-column {
align-self: center;
}
}
https://codeply.com/p/wJMhKZ7P7y
This is it:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0-11/css/all.min.css">
<title>Title</title>
</head>
<body>
<div class="container">
<div class="row" style="height:100px;color: white;">
<div class="col-2" style="background-color: #00336D;">
<div style="text-align: center; position: relative; top:40%;">
<i class=" fa fa-exclamation-circle "></i>
</div>
</div>
<div class=" col-8 " style=" background-color: #004089;padding: 2%; ">
<h1><b>Creative Writing</b></h1>
Generating random paragraphs can be an excellent way for writers to get their creative flow going at the beginning of the day. The writer has no idea what topic the random paragraph will be about when it appears. This forces the writer to use creativity
to complete one of three common writing challenges. The writer can use the paragraph as the first one of a short story and build upon it.
</div>
<div class=" col-2 " style=" background-color: #004089; " ">
<button type=" button " class=" btn btn-primary align-content-center " style=" background-color: white; color:#00336D ;position:relative;top:30% "><b>Click Here</b></button>
</div>
</div>
</div>
<script src=" https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.15.0/umd/popper.min.js "></script>
<script src=" https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js "></script>
</body>
</html>
check it:
https://jsfiddle.net/s9qmj1fn/
I have a problem with printing from HTML.
First of all I create a print preview page. Everything works well.
When I go to print only the part that interests me (sequence of A4 pages), only the first page is divided into two, it seems that a 'padding-top' is imposed higher than the imposed one. Basically the first footer is moved to the next page.
Here are two images, screen and print.
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Report</title>
<script src="//code.jquery.com/jquery-1.12.1.js"></script>
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" />
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" />
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.1.1/css/responsive.dataTables.min.css" />
<script type="text/javascript" src="https://cdn.datatables.net/responsive/2.1.1/js/dataTables.responsive.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
#*librerie per abilitare la selezione delle righe*#
<link href="https://cdn.datatables.net/select/1.2.5/css/select.dataTables.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.datatables.net/select/1.2.5/js/dataTables.select.min.js"></script>
<link href="https://cdn.datatables.net/buttons/1.5.1/css/buttons.dataTables.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js"></script>
#*libreria per stilizzare una select*#
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>
#*<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/i18n/defaults-*.min.js"></script>*#
<style type="text/css">
##Media print {
#ScreenDiv {
visibility: hidden;
display: none;
}
#PrintDiv {
visibility: visible;
display: normal;
}
page {
background: white;
display: block;
margin: 0 auto;
margin-top: 0px;
margin-bottom: 0cm;
padding-left: 2cm;
padding-top: 1cm;
padding-right: 2cm;
padding-bottom: 0cm;
/*https://github.com/delight-im/HTML-Sheets-of-Paper/blob/gh-pages/css/sheets-of-paper-a4.css*/
}
page[size="A4"] {
width: 21cm;
height: 29.7cm;
}
page[size="A4"][layout="portrait"] {
width: 29.7cm;
height: 21cm;
}
.panel-footer {
page-break-after: always;
}
}
##media screen{
#ScreenDiv {
visibility: visible;
display: normal;
}
#PrintDiv {
visibility: hidden;
display: none;
}
page {
background: white;
display: block;
margin: 0 auto;
margin-top: 80px;
margin-bottom: 0.5cm;
box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);
padding-left: 2cm;
padding-top: 1cm;
padding-right: 2cm;
padding-bottom: 0cm;
/*https://github.com/delight-im/HTML-Sheets-of-Paper/blob/gh-pages/css/sheets-of-paper-a4.css*/
}
page[size="A4"] {
width: 21cm;
height: 29.7cm;
}
page[size="A4"][layout="portrait"] {
width: 29.7cm;
height: 21cm;
}
}
h3 {
margin-top: 0px;
color: dodgerblue !important;
text-align: center;
}
.col-fixed-30 {
width: 30%;
position: fixed;
background-color: white;
height: 100%;
z-index: 1;
}
.row-fixed-70 {
height: 70px;
position: fixed;
background-color: white;
width: 70%;
z-index: 1;
}
.col-offset-30 {
padding-left: 30%;
z-index: 0;
}
</style>
</head>
<body>
<div id="ScreenDiv">
<div class="container-fluid">
<div class="row">
<div class="col-fixed-30" style="padding:2px">
<h3 style="margin-top:30px; color:dodgerblue">Lista Report<span class="badge badge-default"></span></h3>
<div class="form-group">
<select id="AnnoSelect" name="AnnoSelect" class="selectpicker form-control" multiple title="Selezionare Anno"></select>
</div>
<div class="form-group">
<select id="TipoIspezioneSelect" name="AnnoSelect" class="selectpicker form-control" multiple data-actions-box="true" title="Selezionare Tipo Ispezione">
<option value="Ispezione Corrente">Ispezione Corrente</option>
<option value="Ispezione Corrente Straordinaria">Ispezione Corrente Straordinaria</option>
<option value="Ispezione Qualitativa">Ispezione Qualitativa</option>
<option value="Ispezione Dettagliata">Ispezione Dettagliata</option>
<option value="Ispezione Dettagliata Eccezionale">Ispezione Dettagliata Eccezionale</option>
<option value="Sorveglianza Speciale">Sorveglianza Speciale</option>
<option value="Sorveglianza Intensificata">Sorveglianza Intensificata</option>
<option value="Alta Sorveglianza">Alta Sorveglianza</option>
</select>
</div>
<div class="form-group">
<select id="TipoOperaSelect" name="TipoOperaSelect" class="selectpicker form-control" multiple data-actions-box="true" title="Selezionare Tipo Opera">
<option value="null">Da Gestire</option>
<option value="true">Approvate</option>
<option value="false">Rifiutate</option>
</select>
</div>
<div class="form-group">
<select id="ElementoSelect" name="ElementoSelect" class="selectpicker form-control" multiple data-actions-box="true" title="Selezionare Tipo Elemento">
<option value="null">Da Gestire</option>
<option value="true">Approvate</option>
<option value="false">Rifiutate</option>
</select>
</div>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#Stampa1">
Collapsible Group 1
</a>
</h4>
</div>
<div id="Stampa1" class="panel-collapse collapse in">
<div class="panel-body">
<button id="StampaReport" class="btn btn-primary" type="button" style="margin-bottom:20px; margin-top:20px;"><i class="glyphicon glyphicon-print"></i> Stampa Report </button>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#Stampa2">
Collapsible Group 2
</a>
</h4>
</div>
<div id="Stampa2" class="panel-collapse collapse">
<div class="panel-body">
seconda Stampa
</div>
</div>
</div>
</div>
</div>
</div>
<div id="LayoutArea" class="col-md-12 col-offset-30" style="background-color:lightgray">
<div class="row row-fixed-70">
<h3 style="margin-top:30px; color:dodgerblue; text-align:center">Anteprima Report</h3>
</div>
<div class="row" id="LayoutStampa">
<page size="A4" id="page0">
<div class="panel-heading" style="height:45px">
<div class="table-responsive">
<table class="table table-condensed" style="border-bottom: .2em solid #aaaaaa;border-top: .2em hidden">
<tr><td id="headerLeft" style="width:30%" align="left">left</td><td id="headerCenter" align="center">center</td><td id="headerRight" style="width:30%" align="right">right</td></tr>
</table>
</div>
</div>
<div class="panel-body">
<h3 id="TitoloPagina">Anteprima Report</h3>
<div class="table-responsive" style="height:24cm;background-color:red">
<table class="table table-striped table-condensed" border=0 cellpadding=20 cellspacing=0 style="border-bottom: .13em solid #aaaaaa;font-size:10px">
#*<tr><th style="width:30%">#</th><th>name</th></tr>*#
<tr align="center"><td style="width:30%">1</td><td>100</td><td style="width:30%">DONALD TRUMP</td></tr>
<tr align="center"><td style="width:30%">2</td><td>100</td><td style="width:30%">BARACK OBAMA</td></tr>
<tr align="center"><td style="width:30%">3</td><td>100</td><td style="width:30%">BARACK OBAMA</td></tr>
</table>
</div>
</div>
<div class="panel-footer" style="height:45px">
<table class="table table-condensed" style="border-bottom: .2em solid #aaaaaa;border-top: .2em hidden">
<tr><td id="footerLeft" style="width:30%" align="left">left</td><td id="footerCenter" align="center">center</td><td id="footerRight" style="width:30%" align="right">right</td></tr>
</table>
</div>
</page>
</div>
</div>
</div>
</div>
<div id="PrintDiv">
</div>
<script>
var ListaOpere;
$(document).ready(function () {
var d = new Date();
var anno = d.getFullYear();
for (var i = anno; i >= 1990; i--) {
$("#AnnoSelect").append('<option value=' + i + '>' + i + '</option>');
}
$('#StampaReport').on('click', function () {
var clone = $('#LayoutStampa').clone();
$("#PrintDiv").append(clone);
$('#LayoutStampa').remove();
window.print();
$("#LayoutStampa").remove();
$('#LayoutArea').append(clone);
})
var testo = '<div class="panel-heading" style="height:45px">' +
'< div class="table-responsive" >' +
'<table class="table" style="border-bottom: .2em solid #aaaaaa;border-top: .2em hidden">' +
'<tr><td align=left> left</td><td align=right> right</td></tr>' +
'</table> </div > </div >'
var cloneCount = 1;
for (var i = cloneCount; i <= 10; i++) {
var clone = $('#page0').clone();
clone.attr('id', 'page' + i);
clone.find('h3[id=TitoloPagina]').text('Titolo' + i);
clone.find('td[id=headerLeft]').text('Macerata');
$("#LayoutStampa").append(clone);
//alert(i);
}
});
</script>
</body>
</html >
Where is the error?
Thanks
I found a solution. If imposed -60px on 'media print page margin-top', it adjusts everything.
But I realized that, all the solution, it does not work well on edge and explorer.
I'm trying to place two Kendo UI widgets side-by-side within an Angular-UI modal window.
My problem is that they are getting place one below the other as in the embedded screen shot.
Note the Dimensions List on top (<li ng-repeat), and the Dimension Grid on the bottom. I'd like these to be side-by-side :
Here's the HTML template, which is part of the Angular Bootstrap modal :
<form class="form-horizontal">
<fieldset>
<!-- Form Name -->
<legend>User Dimensions</legend>
<div class="form-group">
<label class="col-md-4 control-label" for="radios-0">Choose One</label>
<div class="col-md-4">
<div class="radio">
<label for="radios-0">
<input name="radios" id="radio1" value="1" type="radio">
Defined Portfolios
</label>
</div>
<div class="radio">
<label for="radios-1">
<input name="radios" id="radio2" value="2" checked="checked" type="radio">
Specify Dimensions
</label>
</div>
</div>
<label class="col-md-4 control-label" for="radios-0">Dimensions</label>
<!-- *** KENDO SORTABLE *** -->
<div class="col-md-4">
<ul class="dim-list" kendo-sortable k-placeholder="settings.placeholder" k-hint="settings.hint">
<li ng-repeat="dim in settings.dimenDS">{{dim.name}}</li>
</ul>
</div>
<!-- *** KENDO GRID *** -->
<div class="col-md-8">
<span id="userDimenGrid" kendo-grid="settings.userDimenGrid"
k-data-source="settings.userDimenGridDS"
k-options="settings.userDimenGridOptions"
k-rebind="settings.userDimenGridOptions" />
</div>
</div>
</fieldset>
</form>
<style scoped>
.dim-list li{
list-style-type:none;
background-color:silver;
font-size:12px;
font-weight:bold;
width: 180px;
margin: 5px;
line-height: 30px;
text-align: center;
border-radius: 3px;
cursor:move;
}
li.hint {
display: block;
padding: 10px;
width: 200px;
background-color: #52aef7;
color: #fff;
}
li.hint:last-child {
border-radius: 4px;
}
li.hint span {
color: #fff;
}
li.placeholder {
background-color: #dceffd;
color: #52aef7;
text-align: right;
}
</style>
I would like this to be side by side, but having much trouble formatting it as such within this <form> .
final solution :
I ended up spending more time working with bootstrap classes row and/or row-fluid, as well as col-lg-4.
It turns out the standard "form-group" class won't exactly work with what I want to do. Of course, since it's not exactly a form. Rather I'm placing Kendo UI widgets side by side.
<form class="form-horizontal">
<fieldset>
<!-- Form Name -->
<legend>User Dimensions</legend>
<div class="form-group">
<label class="col-md-4 control-label" for="radios-0">Choose One</label>
<div class="row">
<div class="col-lg-4">
<div class="radio">
<label for="radios-0">
<input name="radios" id="radio1" value="1" type="radio">
Defined Portfolios
</label>
</div>
<div class="radio">
<label for="radios-1">
<input name="radios" id="radio2" value="2" checked="checked" type="radio">
Specify Dimensions
</label>
</div>
</div>
<div class="col-lg-8"></div>
</div>
<div class="row-fluid">
<div class="col-lg-3">
<ul class="dim-list" kendo-sortable k-hint="settings.hint" k-move="settings.move" k-end="settings.end" k-placeholder="settings.placeholder">
<li ng-repeat="dim in settings.dimenDS">{{dim.name}}</li>
</ul>
</div>
<div class="col-lg-8">
<span id="userDimenGrid" kendo-grid="settings.userDimenGrid"
k-data-source="settings.userDimenGridDS"
k-options="settings.userDimenGridOptions"
k-rebind="settings.userDimenGridOptions" />
</div>
</div>
</div>
</fieldset>
</form>
<style scoped>
.dim-list li{
list-style-type:none;
display: inline-block;
background-color:silver;
font-size:12px;
font-weight:bold;
width: 180px;
margin: 5px;
line-height: 30px;
text-align: center;
border-radius: 3px;
cursor:move;
}
li.hint {
display: block;
padding: 10px;
width: 200px;
background-color: #52aef7;
color: #fff;
}
li.hint:last-child {
border-radius: 4px;
}
li.hint span {
color: #fff;
}
li.placeholder {
background-color: #dceffd;
color: #52aef7;
text-align: right;
}
I'm using the technique in this article to add momentum/intertia scrolling to an element.
html:
<h1>My title</h1>
<div class="container">
<div class="cause">
<div class="cause-content">
<h2>things</h2>
</div>
</div>
<div class="cause">
<div class="cause-content">
<h2>things</h2>
</div>
</div>
<div class="cause">
<div class="cause-content">
<h2>things</h2>
</div>
</div>
<div class="cause">
<div class="cause-content">
<h2>things</h2>
</div>
</div>
<div class="cause">
<div class="cause-content">
<h2>things</h2>
</div>
</div>
<div class="cause">
<div class="cause-content">
<h2>things</h2>
</div>
</div>
<div class="cause">
<div class="cause-content">
<h2>things</h2>
</div>
</div>
<div class="cause">
<div class="cause-content">
<h2>things</h2>
</div>
</div>
</div>
CSS:
body{
overflow: hidden;
}
.container{
margin-top: 5em;
overflow-x: scroll;
white-space: nowrap;
width: 100%;
height: 100%;
-webkit-overflow-scrolling: touch;
}
.cause{
/* prettify */
background: blue;
color: white;
text-align:center;
/* real shit */
display: inline-block;
width: 260px
}
This works, but the problem is that it takes other elements with it! My title scrolls off with it. This happens even if I add position: fixed (probably because fixed isn't fully supported on iOS Safari.
Does anybody know of a way to get inertia scrolling working while still jeeping the other elements in the right place?
I solved this by using the code in this pen. The important bit seems to be the whitespace: no-wrap bit.
HTML:
<div class="wrapper">
item 1
item 2
item 3
item 4
item 5
item 6
</div>
CSS:
body {
background-color: #333;
}
.wrapper {
width: 320px;
white-space: nowrap;
overflow-y: hidden;
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
padding: 1rem;
background-color: #ccc;
}
.internal {
display: inline;
background-color: wheat;
&:nth-child(odd) {
background-color: hotpink;
}
}
I've been trying to reference a image in my scss file by passing the code:
background-image: asset-url("bg.jpg", image) no-repeat center center fixed;
I've also tried:
background-image: image-url("bg.jpg") no-repeat center center fixed;
However when I run rails s I get the following error:
ActionController::RoutingError (No route matches [GET] "/assets/images/bg.jpg"):
And yes, I'm certain that my image is on app/assets/images.
How can I manage to solve this problem?
View File (Downloaded from Startup Bootstrap):
<!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="">
<title>Stylish Portfolio Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<%= stylesheet_link_tag "bootstrap", "custom" %>
</head>
<body>
<!-- Side Menu -->
<a id="menu-toggle" href="#" class="btn btn-primary btn-lg toggle"><i class="fa fa-bars"></i></a>
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<a id="menu-close" href="#" class="btn btn-default btn-lg pull-right toggle"><i class="fa fa-times"></i></a>
<li class="sidebar-brand">Start Bootstrap
</li>
<li>Home
</li>
<li>About
</li>
<li>Services
</li>
<li>Portfolio
</li>
<li>Contact
</li>
</ul>
</div>
<!-- /Side Menu -->
<!-- Full Page Image Header Area -->
<div id="top" class="header">
<div class="vert-text">
<h1>Start Bootstrap</h1>
<h3>
<em>We</em> Build Great Templates,
<em>You</em> Make Them Better</h3>
Find Out More
</div>
</div>
<!-- /Full Page Image Header Area -->
<!-- Intro -->
<div id="about" class="intro">
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3 text-center">
<h2>Subtle Sidebar is the Perfect Template for your Next Portfolio Website Project!</h2>
<p class="lead">This template really has it all. It's up to you to customize it to your liking! It features some fresh photography courtesy of <a target="_blank" href="http://join.deathtothestockphoto.com/">Death to the Stock Photo</a>.</p>
</div>
</div>
</div>
</div>
<!-- /Intro -->
<!-- Services -->
<div id="services" class="services">
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4 text-center">
<h2>Our Services</h2>
<hr>
</div>
</div>
<div class="row">
<div class="col-md-2 col-md-offset-2 text-center">
<div class="service-item">
<i class="service-icon fa fa-rocket"></i>
<h4>Spacecraft Repair</h4>
<p>Did your navigation system shut down in the middle of that asteroid field? We can repair any dings and scrapes to your spacecraft!</p>
</div>
</div>
<div class="col-md-2 text-center">
<div class="service-item">
<i class="service-icon fa fa-magnet"></i>
<h4>Problem Solving</h4>
<p>Need to know how magnets work? Our problem solving solutions team can help you identify problems and conduct exploratory research.</p>
</div>
</div>
<div class="col-md-2 text-center">
<div class="service-item">
<i class="service-icon fa fa-shield"></i>
<h4>Blacksmithing</h4>
<p>Planning a time travel trip to the middle ages? Preserve the space time continuum by blending in with period accurate armor and weapons.</p>
</div>
</div>
<div class="col-md-2 text-center">
<div class="service-item">
<i class="service-icon fa fa-pencil"></i>
<h4>Pencil Sharpening</h4>
<p>We've been voted the best pencil sharpening service for 10 consecutive years. If you have a pencil that feels dull, we'll get it sharp!</p>
</div>
</div>
</div>
</div>
</div>
<!-- /Services -->
<!-- Callout -->
<div class="callout">
<div class="vert-text">
<h1>A Dramatic Text Area</h1>
</div>
</div>
<!-- /Callout -->
<!-- Portfolio -->
<div id="portfolio" class="portfolio">
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4 text-center">
<h2>Our Work</h2>
<hr>
</div>
</div>
<div class="row">
<div class="col-md-4 col-md-offset-2 text-center">
<div class="portfolio-item">
<%= image_tag "portfolio-1.jpg" %>
<h4>Cityscape</h4>
</div>
</div>
<div class="col-md-4 text-center">
<div class="portfolio-item">
<%= image_tag "portfolio-2.jpg" %>
<h4>Is That On Fire?</h4>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4 col-md-offset-2 text-center">
<div class="portfolio-item">
<%= image_tag "portfolio-3.jpg" %>
<h4>Stop Sign</h4>
</div>
</div>
<div class="col-md-4 text-center">
<div class="portfolio-item">
<%= image_tag "portfolio-4.jpg" %>
<h4>Narrow Focus</h4>
</div>
</div>
</div>
</div>
</div>
<!-- /Portfolio -->
<!-- Call to Action -->
<div class="call-to-action">
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3 text-center">
<h3>The buttons below are impossible to resist.</h3>
Click Me!
Look at Me!
</div>
</div>
</div>
</div>
<!-- /Call to Action -->
<!-- Map -->
<div id="contact" class="map">
<iframe width="100%" height="100%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=Twitter,+Inc.,+Market+Street,+San+Francisco,+CA&aq=0&oq=twitter&sll=28.659344,-81.187888&sspn=0.128789,0.264187&ie=UTF8&hq=Twitter,+Inc.,+Market+Street,+San+Francisco,+CA&t=m&z=15&iwloc=A&output=embed"></iframe>
<br />
<small>
</small>
</iframe>
</div>
<!-- /Map -->
<!-- Footer -->
<footer>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3 text-center">
<ul class="list-inline">
<li><i class="fa fa-facebook fa-3x"></i>
</li>
<li><i class="fa fa-twitter fa-3x"></i>
</li>
<li><i class="fa fa-dribbble fa-3x"></i>
</li>
</ul>
<div class="top-scroll">
<i class="fa fa-circle-arrow-up scroll fa-4x"></i>
</div>
<hr>
<p>Copyright © Company 2013</p>
</div>
</div>
</div>
</footer>
<!-- /Footer -->
<!-- JavaScript -->
<%= javascript_include_tag "jquery-1.10.2.js" %>
<%= javascript_include_tag "bootstrap.js" %>
<!-- Custom JavaScript for the Side Menu and Smooth Scrolling -->
<script>
$("#menu-close").click(function(e) {
e.preventDefault();
$("#sidebar-wrapper").toggleClass("active");
});
</script>
<script>
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#sidebar-wrapper").toggleClass("active");
});
</script>
<script>
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') || location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
</script>
</body>
</html>
CSS File:
html,
body {
height: 100%;
width: 100%;
}
.vert-text {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.vert-text h1 {
padding: 0;
margin: 0;
font-size: 4.5em;
font-weight: 700;
}
/* Side Menu */
#sidebar-wrapper {
margin-right: -250px;
right: 0;
width: 250px;
background: #000;
position: fixed;
height: 100%;
overflow-y: auto;
z-index: 1000;
-webkit-transition: all 0.4s ease 0s;
-moz-transition: all 0.4s ease 0s;
-ms-transition: all 0.4s ease 0s;
-o-transition: all 0.4s ease 0s;
transition: all 0.4s ease 0s;
}
.sidebar-nav {
position: absolute;
top: 0;
width: 250px;
list-style: none;
margin: 0;
padding: 0;
}
.sidebar-nav li {
line-height: 40px;
text-indent: 20px;
}
.sidebar-nav li a {
color: #999999;
display: block;
text-decoration: none;
}
.sidebar-nav li a:hover {
color: #fff;
background: rgba(255,255,255,0.2);
text-decoration: none;
}
.sidebar-nav li a:active,
.sidebar-nav li a:focus {
text-decoration: none;
}
.sidebar-nav > .sidebar-brand {
height: 55px;
line-height: 55px;
font-size: 18px;
}
.sidebar-nav > .sidebar-brand a {
color: #999999;
}
.sidebar-nav > .sidebar-brand a:hover {
color: #fff;
background: none;
}
#menu-toggle {
top: 0;
right: 0;
position: fixed;
z-index: 1;
}
#sidebar-wrapper.active {
right: 250px;
width: 250px;
-webkit-transition: all 0.4s ease 0s;
-moz-transition: all 0.4s ease 0s;
-ms-transition: all 0.4s ease 0s;
-o-transition: all 0.4s ease 0s;
transition: all 0.4s ease 0s;
}
.toggle {
margin: 5px 5px 0 0;
}
/* Full Page Image Header Area */
.header {
display: table;
height: 100%;
width: 100%;
position: relative;
background-image: image-url("bg.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
/* Intro */
.intro {
padding: 50px 0;
}
/* Services */
.services {
background: #7fbbda;
padding: 50px 0;
color: #ffffff;
}
.service-item {
margin-bottom: 15px;
}
i.service-icon {
border: 3px solid #ffffff;
border-radius: 50%;
display: inline-block;
font-size: 56px;
width: 140px;
height: 140px;
line-height: 136px;
vertical-align: middle;
text-align: center;
}
/* Callout */
.callout {
color: #ffffff;
display: table;
height: 400px;
width: 100%;
background-image: image-url("callout.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
/* Portfolio */
.portfolio {
padding: 50px 0;
}
.portfolio-item {
margin-bottom: 25px;
}
.img-portfolio {
margin: 0 auto;
}
/* Call to Action */
.call-to-action {
color: #ffffff;
background: #0a5175;
padding: 50px 0;
}
.call-to-action .btn {
margin: 10px;
}
/* Map */
.map {
height: 500px;
}
/* Footer */
footer {
padding: 100px 0;
}
.top-scroll {
margin-top: 50px;
}
.top-scroll a {
text-decoration: none;
color: inherit;
}
i.scroll {
color: #333333;
}
i.scroll:hover {
color: #0a5175;
}
/* Responsive */
#media (max-width: 768px) {
.header {
background-image: image-url("bg.jpg") no-repeat center center scroll;
}
.callout {
background-image: image-url("callout.jpg") no-repeat center center scroll;
}
.map {
height: 75%;
}
}
Run bundle exec rake assets:precompile to precompile yours assets. image-url("bg.jpg") literally becomes url(/assets/bg.jpg), which would yield a broken link in your case.