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/
Related
Im working on carousel but buttons are not working and it has border. Tried to remove border with css but this time buttons also dissappered.
buttons are working on codeply: bootstrap carousel buttons
/* html tags */
body {
font-family: "Montserrat";
font-weight: 900;
}
h2 {
font-family: "Montserrat";
font-size: 3rem;
line-height: 1.5;
}
.testimonial-image {
width: 10%;
border-radius: 100%;
margin: 20px;
}
/* Testimonials Sections */
#testimonials {
padding: 7% 15%;
text-align: center;
background-color: #ef8172;
color: #fff;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TinDog</title>
<!--Bootstrap-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
rel="stylesheet">
<!--Font Awesome-->
<script src="https://kit.fontawesome.com/4c02f86903.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<section id="testimonials">
<div id="testimonial-carousel" class="carousel slide" data-bs-ride="false">
<div class="carousel-inner">
<div class="carousel-item active">
<h2>I no longer have to sniff other dogs for love. I've found the hottest Corgi on TinDog. Woof.</h2>
<img src="images/dog-img.jpg" class="testimonial-image" alt="dog-profile">
<em>Pebbles, New York</em>
</div>
<div class="carousel-item">
<h2 class="testimonial-text">My dog used to be so lonely, but with TinDog's help, they've found the love of their life. I think.</h2>
<img src="images/lady-img.jpg" class="testimonial-image" alt="lady-profile">
<em>Beverly, Illinois</em>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#testimonial-carousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#testimonial-carousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
</button>
</div>
</section>
</body>
is it necessary to add some extras in head section?
I cant figure out the solutions
The problem is with the imports of Bootstrap. You have included Bootstrap version 4.3.1, but used the html syntax for Bootstrap 5+. You also included the js twice.
Corrected code (including your custom CSS):
body {
font-family: "Montserrat";
font-weight: 900;
}
h2 {
font-family: "Montserrat";
font-size: 3rem;
line-height: 1.5;
}
.testimonial-image {
width: 10%;
border-radius: 100%;
margin: 20px;
}
/* Testimonials Sections */
#testimonials {
padding: 7% 15%;
text-align: center;
background-color: #ef8172;
color: #fff;
}
.carousel-item {
height: 500px;
}
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css">
</head>
<body>
<section id="testimonials">
<div id="testimonial-carousel" class="carousel slide" data-bs-ride="false">
<div class="carousel-inner">
<div class="carousel-item active" style="background-color:blue;">
<h2>I no longer have to sniff other dogs for love. I've found the hottest Corgi on TinDog. Woof.</h2>
<img src="images/dog-img.jpg" class="testimonial-image" alt="dog-profile">
<em>Pebbles, New York</em>
</div>
<div class="carousel-item" style="background-color:red;">
<h2 class="testimonial-text">My dog used to be so lonely, but with TinDog's help, they've found the love of their life. I think.</h2>
<img src="images/lady-img.jpg" class="testimonial-image" alt="lady-profile">
<em>Beverly, Illinois</em>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#testimonial-carousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#testimonial-carousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
</button>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
You'd need to add your stylesheet here, otherwise this should work fine.
Basically I have got a row with 3 columns, and the columns haves an image and text.
In chrome, Android, Fire-Fox, I managed to get each column the height of the parent, and then put the text in the middle if any other column is bigger. But in iPad with iOS 8.3 and 9.3.5, doesn't makes the columns big at 100% of the height.
The codepen is: https://codepen.io/rocketraccoon/pen/PEopPO
And here I leave the Snippet:
body {
background-color: red !important; /* Only for trying to see the visual effect required */
}
.triple-opcion {
padding: 40px;
}
.triple-opcion .opciones .opcion {
background-color: #FFFFFF;
text-align: center;
padding: 40px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
height: 100%;
min-height: 100%;
}
.triple-opcion .opciones .opcion:hover,
.triple-opcion .opciones .opcion:focus,
.triple-opcion .opciones .opcion:active {
text-decoration: none;
}
.triple-opcion .opciones .opcion .t5 {
text-transform: uppercase;
color: #191D22;
margin: auto;
max-width: 100%;
}
.triple-opcion .opciones .opcion img {
width: 64px;
margin-bottom: 15px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="triple-opcion ayuda">
<div class="row opciones opciones-ayuda">
<div class="col-4">
<a href="#>
<div class="opcion">
<img src="http://via.placeholder.com/300" alt="">
<p class="t5">Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500</p>
</div>
</a>
</div>
<div class="col-4">
<a href="#">
<div class="opcion">
<img src="http://via.placeholder.com/300" alt="">
<p class="t5">24 months</p>
</div>
</a>
</div>
<div class="col-4">
<a href="#">
<div class="opcion">
<img src="http://via.placeholder.com/300" alt="">
<p class="t5">48 months</p>
</div>
</a>
</div>
</div>
</div>
Any help you can provide will be helpful.
Here is a solution using a table. I also took the opportunity to optimize your code. You should not be using block elements, eg divs inside anchor tags.
HTML:
<div class="triple-opcion ayuda">
<div class="row opciones opciones-ayuda">
<div class="col-12 col-md-4 opcion">
<a class="inner">
<img src="http://via.placeholder.com/300" alt="Buscador de números">
<span class="t5">Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500
</span>
</a>
</div>
<div class="col-12 col-md-4 opcion">
<a class="inner">
<img src="http://via.placeholder.com/300" alt="Preguntas frecuentes">
<span class="t5">24 months</span>
</a>
</div>
<div class="col-12 col-md-4 opcion">
<a class="inner">
<img src="http://via.placeholder.com/300" alt="Sugerencias">
<span class="t5">48 months</span>
</a>
</div>
</div>
</div>
SCSS:
body {
background-color: red;
}
.triple-opcion {
.opciones {
display:table;
table-layout:fixed;
width:100%;
border-spacing: 40px;
border-collapse: separate;
.opcion {
text-align: center;
padding: 40px;
display: table-cell;
height: 100%;
background:#fff;
vertical-align:middle;
span {
display:block;
}
&:hover,
&:focus,
&:active {
text-decoration: none;
}
img {
width: 64px;
}
.t5 {
text-align: center;
margin: auto;
max-width: 100%;
}
}
}
}
Here is a working pen - https://codepen.io/scooterlord/pen/NXWmQJ
It's too late and I am writing from my couch so I didn't test it on my iPad, but am fairly certain it works.
Edit 2: I just realized what was requested, the initial description of the issue was not very clear. Here is a new codepen with what is requested:
https://codepen.io/scooterlord/pen/eymprK
I am using latest Bootstrap version.
A website-user, using an Iphone, can't click on menu-items (navbar etc).
Should this work well nowadays (february-26-2015) with latest Bootstrap on any IPhone / Pad / Pod.
New-info-1: other IPhone-user say: ThisLinkWorksWell-1 and ThisLinkWorksWell-2 works well, but collapse menu is not working.
New-info-2: it seems 2 links are not working: 1) share-button-FaceBook 2) collapse-menu-BT .... both javascript !?
ALL used files I droped in: www.WeTransfer.com (download til 6 March) downloadlink=http://we.tl/8dvkmYCSLa
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- CSS files -->
<link href="bt/css/bootstrap.min.css" rel="stylesheet">
<link href="bt/css/docs.min.css" rel="stylesheet">
<link href="css/layout.css" rel="stylesheet" type="text/css" />
<title>Home</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12">
<nav class="navbar navbar-default navbar-static-top" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div><!--/navbar-header-->
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav LijnNav">
<a class="btn" href="index.html" title="Home" role="Home">Home</a>
<a class="btn" href="page-n.html" title="page-n" role="page-n">page-n</a>
</ul>
</div><!--/.nav-collapse -->
</nav>
<a href="http://ThisLinkWorksWell.nl" TARGET="_blank"><img src="ThisLinkWorksWell.png" alt="ThisLinkWorksWell-1" title="ThisLinkWorksWell-1">
</a>
<br><input class="btn btnV btn-default" type="button" value="TopPage-WorksWell-2" onclick="location.href = '#Top'" />
</div><!--/col -->
</div><!--row-->
</div><!--container-->
<script async src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script async src="bt/js/jqueryGoogle.min.js"></script>
<script async src="bt/js/bootstrap.min.js"></script>
</body>
</html>
CSS -------------------
#charset "utf-8";
/* CSS Document */
.container {
background: rgba(255,255,220,1);
border-radius: 6px;
}
.btnV {/*vorm*/
border-top-color: #eeeeee;
border-top-width: 2px;
border-top-style: solid;
height: 45px;
margin: 6px 0px 16px 8px;
padding-top: 8px;
position: relative;
-moz-border-radius-topleft: 90px;
-webkit-border-top-left-radius: 90px;
border-top-left-radius: 90px;
-moz-border-radius-topright: 4px;
-webkit-border-top-right-radius: 4px;
border-top-right-radius: 4px;
-moz-border-radius-bottomright: 90px;
-webkit-border-bottom-right-radius: 90px;
border-bottom-right-radius: 90px;
-moz-border-radius-bottomleft: 90px;
-webkit-border-bottom-left-radius: 90px;
border-bottom-left-radius: 90px;
}
.btn:hover {
border: 1px solid #d1d1d1;
}
li, p {
line-height: 1.28em;
}
.LijnNav {
margin: 5px -15px 0px -15px;/*T,R,B,L*/
border-top: 1px solid #e5e5e5;
}
#media (min-width:768px) {
.LijnNav {
margin: -8px 0px 0px 0px;/*T,R,B,L*/
}
I have tested several IPhones in phone-store. All are working well. So: problem is not BT, but related to IPhone.
Maybe not latest updates installed or very old IPhone (...they say in store) ?!
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.
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>