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.
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 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) ?!
In my project i have some buttons with icon its working fine but the issue is when i long press the button it remains in active state unless i press some other button can any tell what the issue and how can i solve this.
Here is the css code for btn active state.
.ui-btn-active {
border: 1px solid #ccc;
background: #B4B7BA;
font-weight: 700;
color: #fff;
cursor: pointer;
text-shadow: 0 1px 0 #EDF1F4;
text-decoration: none;
background-image: -webkit-linear-gradient(#5393c5, #6facd5);
background-image: -moz-linear-gradient(#5393c5, #6facd5);
background-image: -ms-linear-gradient(#5393c5, #6facd5);
background-image: -o-linear-gradient(#5393c5, #6facd5);
background-image: linear-gradient(#5393c5, #6facd5);
font-family: Helvetica, Arial, sans-serif }
I encountered a similar issue and worked around it with something like this:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test App</title>
<script type="text/javascript" src="cordova-2.8.0.js"></script>
<script type="text/javascript" src ="assets/lib/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src ="assets/lib/jquery.mobile-1.2.0.min.js"></script>
<link rel="stylesheet" href="assets/lib/jquery.mobile-1.2.0.css" type="text/css" />
<script type="text/javascript" >
$.mobile.defaultPageTransition = 'none'; // Remove default page transition
$('div[data-role="page"]').on('pagecreate',function(event, ui){
$('div[data-role="footer"] a', $(this)).on("taphold",function(e){
$(this).addClass("ui-btn-active");
$(this).one("touchend", function(e){
e.preventDefault();
$(this).trigger("click", e.data); // Remove this if you don't want the long press to act as a click
$(this).removeClass("ui-btn-down-a ui-btn-active");
return false;
});
});
});
</script>
</head>
<body>
<div data-role="page" id="page-1">
<div data-role="content">
<p>Page 1</p>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li>Page 1</li>
<li>Page 2</li>
</ul>
</div>
</div>
</div>
<div data-role="page" id="page-2">
<div data-role="content">
<p>Page 2</p>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li>Page 1</li>
<li>Page 2</li>
</ul>
</div>
</div>
</div>
</body>
</html>
You can download my Eclipse project and compiled APK here
On the iphone I have a form:
I'd like to have:
from $37,400 up to $[textbox here]
on the same line. In landscape mode it works but not in portrait no matter how far I pare the text width. I'm searching for a style to override. You can simulate the problem by opening http://jsfiddle.net/mckennatim/xwFW9/1/ and narrowing your browser page way down.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> - jsFiddle demo</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>
<style type='text/css'>
#upto4 {
width: 65px;
margin-left: 5px;
margin-right: 5px;
}
</style>
<script type='text/javascript'>//<![CDATA[
</script>
</head>
<body>
<div data-role="page" id="calcs" data-add-back-btn="true">
<div data-role="header" data-position="fixed">
<h1>graphics2</h1>
</div>
<div data-role="content">
<form action="#" method="get">
<div id="ratelist">
<legend><b>Ordinary Tax Rates</b></legend>
<div data-role="fieldcontain">
<input type="range" name="slider" id="rate4" value="30" min="0" max="100" data-highlight="true" data-mini="true" />
up to $: <br/>
<p id="spupto4"> from $84,600 to
<input type="text" name="nupto4" id="upto4" value="178653" data-mini="true"/>
</p><br/>
</div>
<div data-role="fieldcontain">
<label for="slider">% rate:</label>
<input type="range" name="slider" id="rate5" value="33" min="0" max="70" data-highlight="true" data-mini="true" /><br/>
<label for="slider">up to $</label>
<input type="range" name="slider" id="upto5" value="388350" min="0" max="3000000" data-highlight="true" data-mini="true" /><br/>
</div>
</div>
</form>
</div>
<div data-role="footer" data-position="fixed">
<h4>test</h4>
</div>
</div>
</body>
</html>
to the style:
<style type='text/css'>
#upto4 {
width: 65px;
margin-left: 5px;
margin-right: 5px;
}
added display: inline-block; to override display: block;
<style type='text/css'>
#upto4 {
width: 65px;
margin-left: 5px;
margin-right: 5px;
display: inline-block;
}