Im using the barryvdh dompdf to generate the pdf file for my view ,
This is the expected outcome:
but what I got is ：
The css design of the view has been change . im using both css and bootsrap for desgining the page
may I ask how the improve this?
here is my code on view
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity=
"sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<link rel="stylesheet" href=
"https://use.fontawesome.com/releases/v5.4.1/css/all.css"
integrity=
"sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz"
crossorigin="anonymous">
<title>
Events Ticket
</title>
</head>
<style>
h6
{
color: #96a0a5;
}
h3
{
color: #b7af92;
}
p{
caret-color: white;
}
span{
color:#b7af92 ;
}
</style>
<body>
<div class="container mt-5 ms-5 " >
<div class="row">
<div class="col-lg-8 mb-4">
#foreach ($tickets as $key=> $ticket)
<div class="card" >
<div class="card-body" style="background-color: #48617d;">
<div class="col-12">
<div class="row" >
<div class="col-6" >
<h6 class="card-title">Event : <span>{{ $ticket->GiftGiving->name }}</span></h6>
<h6 class="card-title ">Name: <span>{{ $ticket->name }}</span></h6>
<h6 class="card-title ">Date &Time: <span>{{ $ticket->GiftGiving->start_at }}</span></h6>
<h6 class="card-title ">Venue: <span> {{ $ticket->GiftGiving->venue }}</span></h6>
</div>
<div class="col-6 text-center mt-3" style=" border-left-style: dashed; border-color: #b7af92;">
<h6><span >Ticket No. {{ $ticket->ticket_no }}</span></h6>
<h6><span class="mt-5">Batch No: {{ $ticket->GiftGiving->batch_no}} </span></h6>
</div>
</div>
</div>
</div>
</div>
#endforeach
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous">
</script>
</body>
</html>
code of my controller:
public function GenerateTicket($code)
{
$GiftGiving = GiftGiving::where('code', $code)->firstOrFail(); //4.3 ??
$tickets = GiftGivingBeneficiaries::where('gift_giving_id', $GiftGiving->id)->get();
# Retrieve the last batch no. from the gift giving.
$batch_no = $GiftGiving->batch_no;
GiftGiving::where('code', $code)->firstOrFail()->update([
'last_downloaded_by' => Auth::id(),
'batch_no' => $batch_no + 1,
]);
$pdf = PDF::loadView('charity.gifts.generate_ticket', compact('tickets'));
return $pdf->download('event_tickets.pdf');
}
Any answer is high appreciated, feel free to drop answer . Thank you in advance.
new updated part
this is how it looks like inside the browser
Related
I want to use Summernote WYSIWYG Editor in Google Material Design.
It works, but if you try to open a popup, everything gets grey and you can't click anywhere:
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="miniHUB. Das Portal für Ministranten!">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
<script src="https://code.jquery.com/jquery-latest.js"></script>
<title>TestPage</title>
<meta name="theme-color" content="#3372DF">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.cyan-light_blue.min.css">
<link rel="stylesheet" href="styles.css">
<style>
#view-source {
position: fixed;
display: block;
right: 0;
bottom: 0;
margin-right: 40px;
margin-bottom: 40px;
z-index: 900;
}
</style>
<!-- Summernote -->
<!-- include libraries(jQuery, bootstrap) -->
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>
<!-- include summernote css/js -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.11/summernote.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.11/summernote.js"></script>
</head>
<body>
<div class="demo-layout mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header">
<header class="demo-header mdl-layout__header mdl-color--grey-100 mdl-color-text--grey-600">
<div class="mdl-layout__header-row">
<span class="mdl-layout-title">miniHUB</span>
<div class="mdl-layout-spacer"></div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable">
<!--<label class="mdl-button mdl-js-button mdl-button--icon" for="search">
<i class="material-icons">search</i>
</label>-->
<div class="mdl-textfield__expandable-holder">
<input class="mdl-textfield__input" type="text" id="search">
<label class="mdl-textfield__label" for="search">Suche...</label>
</div>
</div>
<button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon" id="hdrbtn">
<i class="material-icons">more_vert</i>
</button>
<ul class="mdl-menu mdl-js-menu mdl-js-ripple-effect mdl-menu--bottom-right" for="hdrbtn">
<li class="mdl-menu__item" onclick="loadPage('about.html')"><a>Über/Kontakt</a></li>
<li class="mdl-menu__item">WhatEver</li>
</ul>
</div>
</header>
<div class="demo-drawer mdl-layout__drawer mdl-color--blue-grey-900 mdl-color-text--blue-grey-50">
</div>
<main class="mdl-layout__content mdl-color--grey-100">
<table class="mdl-data-table mdl-js-data-table mdl-shadow--2dp" style="width: 100%;">
<tbody>
<tr>
<td class="mdl-data-table__cell--non-numeric" style="width: 0px;">ℹ</td>
<td class="mdl-data-table__cell--non-numeric" style="width: 0px;">Beschreibung:</td>
<td class="mdl-data-table__cell--non-numeric"><textarea style="overflow-y: auto; width: 100%; border: none;" name="beschreibung" id="beschreibung"></textarea></td>
</tr>
</table>
</main>
</div>
<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<script>
function loadPage(page) {
document.location = page;
};
</script>
<script>
$('#adminedit').click(function () {
document.location = "admin.html";
});
function summernoteInit(){
$('#beschreibung').summernote('code', "");
$('#beschreibung').summernote({
height: 300,
popover: {
image: [],
link: [],
air: []
}
})
}
$(document).ready(function(){
summernoteInit();
});
</script>
</body>
</html>
If I only use pure HTML, it's working very good.
I already tried to use z-index and different divs, but i can't get it working.
Thanks for your Help!
I found a way to correct the problem:
function deleteProblems (){
$('.modal-backdrop').remove();
window.setTimeout(deleteProblems, 200);
}
function summernoteInit(){
$('#beschreibung').summernote('code', "");
$('#beschreibung').summernote({
height: 300,
popover: {
image: [],
link: [],
air: []
}
})
}
$(document).ready(function(){
summernoteInit();
window.setTimeout(deleteProblems, 500)
});
Hopefully it helps you!
Philipp
I am using razor pages for my application. I tried to move the navigation menu from top to left side. I followed the steps mentioned in this link how to create sidebar menu in bootstrap that stays? since I want my menu to be exactly as shown in that link. But I couldn't achieve the result. Something about simple-sidebar.css is mentioned in the link but I would like to know where exactly and how it should be added to my razor pages project. What changes should I make to move my navigation menu from top to left side as shown in the link that I mentioned since it is not working for my razor pages project? A detailed explanation would be really helpful as I am new to razor pages. The code in my "_Layout.cshtml" is shown below. Please help me with this issue.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - Sample</title>
<environment include="Development">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="~/css/site.css" />
</environment>
<environment exclude="Development">
<link rel="stylesheet"
href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css"
asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
asp-fallback-test-class="sr-only" asp-fallback-test-
property="position" asp-fallback-test-value="absolute" />
<link rel="stylesheet" href="~/css/site.min.css" asp-append-
version="true" />
</environment>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a asp-page="/Index" class="navbar-brand">Home</a>
<a asp-page="/Pinpad" class="navbar-brand">Pinpad</a>
</div>
</div>
</nav>
<div class="container body-content">
#RenderBody()
<footer></footer>
</div>
<environment include="Development">
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
</environment>
<environment exclude="Development">
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js"
asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
asp-fallback-test="window.jQuery"
crossorigin="anonymous">
</script>
<script
src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/bootstrap.min.js"
asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js"
asp-fallback-test="window.jQuery && window.jQuery.fn &&
window.jQuery.fn.modal"
crossorigin="anonymous">
</script>
<script src="~/js/site.min.js" asp-append-version="true"></script>
</environment>
#RenderSection("Scripts", required: false)
</body>
</html>
the simple-sidebar.css can be found on [GitHb(https://github.com/BlackrockDigital/startbootstrap-simple-sidebar) and official site . See the comment of the answer you posted above .
Simply download the lib and copy thesimple-sidebar.css to wwwroot/lib/simple-sidebar/css/simple-sidebar.css .
and now you could add a link in you layout:
<link rel="stylesheet" href="~/lib/simple-sidebar/css/simple-sidebar.css">
simple-sidebar is a dead simple css lib which only requires your html structure in a conventional way.
<!-- your nav on top -->
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a asp-page="/Index" class="navbar-brand">Home</a>
<a asp-page="/Pinpad" class="navbar-brand">Pinpad</a>
</div>
</div>
</nav>
<div id="wrapper" class="toggled">
<!-- you nav on left side -->
<div id="sidebar-wrapper">
<a id="menu-toggle" href="#menu-toggle" class="btn btn-secondary">三</a>
<ul class="sidebar-nav"style="margin-top:15px;">
<li class="sidebar-brand">
<a asp-page="/Index" class="navbar-brand">Home</a>
</li>
<li>
<a asp-page="/Pinpad" class="navbar-brand">Pinpad</a>
</li>
</ul>
</div>
<!-- your main body here -->
<div id="page-content-wrapper">
<div class="container-fluid">
#RenderBody()
</div>
<footer></footer>
</div>
</div>
and add a style to show nav button and left side :
<style>
#wrapper #sidebar-wrapper{
width: 50px;
}
#wrapper .sidebar-nav{
display:none;
}
#wrapper.toggled .sidebar-nav{
display:block;
}
a#menu-toggle {
display:inline-block;
width: 100%;
line-height:100%;
padding:0;
margin:0;
color: dodgerblue;
}
</style>
At last , to toggle the sidebar , bind a function to handle the event :
$(document).ready(function () {
$("#menu-toggle").click(function (e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
});
Here's a screenshot:
Here's the complete code list:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - Sample</title>
<link rel="stylesheet" href="~/lib/simple-sidebar/css/simple-sidebar.css">
<environment include="Development">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="~/css/site.css" />
</environment>
<environment exclude="Development">
<link rel="stylesheet"
href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css"
asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
asp-fallback-test-class="sr-only" asp-fallback-test-
property="position" asp-fallback-test-value="absolute" />
<link rel="stylesheet" href="~/css/site.min.css" asp-append-
version="true" />
</environment>
<style>
#wrapper #sidebar-wrapper{
width: 50px;
}
#wrapper .sidebar-nav{
display:none;
}
#wrapper.toggled .sidebar-nav{
display:block;
}
a#menu-toggle {
display:inline-block;
width: 100%;
line-height:100%;
padding:0;
margin:0;
color: dodgerblue;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a asp-page="/Index" class="navbar-brand">Home</a>
<a asp-page="/Pinpad" class="navbar-brand">Pinpad</a>
</div>
</div>
</nav>
<div id="wrapper" class="toggled">
<div id="sidebar-wrapper">
<a id="menu-toggle" href="#menu-toggle" class="btn btn-secondary">三</a>
<ul class="sidebar-nav"style="margin-top:15px;">
<li class="sidebar-brand">
<a asp-page="/Index" class="navbar-brand">Home</a>
</li>
<li>
<a asp-page="/Pinpad" class="navbar-brand">Pinpad</a>
</li>
</ul>
</div>
<div id="page-content-wrapper">
<div class="container-fluid">
#RenderBody()
</div>
<footer></footer>
</div>
</div>
<environment include="Development">
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>
</environment>
<environment exclude="Development">
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js"
asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
asp-fallback-test="window.jQuery"
crossorigin="anonymous">
</script>
<script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/bootstrap.min.js"
asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js"
asp-fallback-test="window.jQuery && window.jQuery.fn &&
window.jQuery.fn.modal"
crossorigin="anonymous">
</script>
<script src="~/js/site.min.js" asp-append-version="true"></script>
</environment>
<script>
$(document).ready(function () {
$("#menu-toggle").click(function (e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
});
</script>
#RenderSection("Scripts", required: false)
</body>
</html>
I could not find any already asked questions relating to my problem.
Also, I'm new (again) to MVC structure as I took a long hiatus.
Anyhow, I created a new layout file _Layoutwithtop.cshtml. The Index.cshtml adopts the layout just fine, although About.cshtml and Contact.cshtml do not.
I will need all future View files to inherit _Layoutwithtop. Here are my attached files. Yes, I have included #Layout = "~/Views/Shared/_Layoutwithtop.cshtml"; line in the About and Contact Page.
Thanks.
_Layoutwithtop.cshtml
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>#ViewBag.Title</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
<meta charset="UTF-8">
<meta content="Great Lakes Imaging carries new and pre-owned radiology and x-ray imaging equipment for Chiropractors, Medical offices and Veterinary clinics. Offering a wide variety of top brands in the industry, we help you find the right equipment for your practice." name="description">
<meta content="Kodak POC 140, AGFA CR 30X, Bennett, HCMI, digital x-ray, film processor, x-ray parts, xray accessories, technique chart, radiation, xray equipment, xray companies" name="keywords">
<link href="Content/bootstrap.min.css" rel="stylesheet">
<link href="Content/Site.css" rel="stylesheet">
<link href="Content/animate.min.css" rel="stylesheet">
<link href="Content/assets/icons/icons.css" rel="stylesheet">
<link href="Content/owl.theme.css" rel="stylesheet">
<link href="Content/owl.carousel.css" rel="stylesheet">
<link href="Content/nivo-lightbox.css" rel="stylesheet">
<link href="Content/nivo_themes/default/default.css" rel="stylesheet">
<link href="Content/styles.css" rel="stylesheet">
<link href="Content/responsive.css" rel="stylesheet">
<link href="Content/colors/blue.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat:200" rel="stylesheet">
</head>
<body>
<div class="preloader">
<div class="status"></div>
</div>
<div>
#RenderBody()
</div>
<!-- footer -->
#Html.Partial("_footer")
<!-- / footer -->
#Scripts.Render("~/bundles/jquery")
#RenderSection("scripts", required: false)
<!-- scripts -->
<script src="Scripts/jquery.min.js"></script>
<script>jQuery(window).load(function(){"use strict";jQuery(".status").fadeOut(),jQuery(".preloader").delay(1e3).fadeOut("slow")})</script>
<script src="Scripts/smoothscroll.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<script src="Scripts/jquery.nav.js"></script>
<script src="Scripts/wow.min.js"></script>
<script src="Scripts/nivo-lightbox.min.js"></script>
<script src="Scripts/owl.carousel.min.js"></script>
<script src="Scripts/jquery.stellar.min.js"></script>
<script src="Scripts/jquery.ajaxchimp.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="Scripts/custom.js"></script>
<!-- / scripts -->
</body>
</html>
Index.cshtml
#{
ViewBag.Title = "Home Page | Great Lakes Imaging, Inc.";
Layout = "~/Views/Shared/_Layoutwithtop.cshtml";
}
<header class="header data-stellar-background-ratio=0.5" id="home">
<div class="overlay-layer">
<div class="navbar bs-docs-nav navbar-fixed-top sticky-navigation" role="navigation">
<div class="container">
<!--- nav header --->
<div class="navbar-header">
<button class="navbar-toggle" data-target="#stamp-navigation" data-toggle="collapse" type="button">
<span class="sr-only">Toggle navigation</span>
<span class="icon-grid-2x2"></span>
</button>
Great Lakes Imaging, Inc.
</div>
</div>
</div>
<!--- main home wrapper --->
<div class="container">
<div class="only-logo">
<div class="navbar">
<div class="navbar-header">
<img alt="Great Lakes Imaging Main Logo" src="images/newGLITranswhite.png">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="intro-section">
<h1 class="white-text intro">Your #1 source for digital x-ray equipment</h1>
<h5 class="white-text">We just happen to have 100 + chiropractic tables, too</h5>
<div class="button">Browse all of our equipment</div>
</div>
</div>
</div>
</div>
<!--- /main home wrapper --->
</div>
</header>
#Html.Partial("_Menu")
_ViewStart.cshtml
#{
Layout = "~/Views/Shared/_Layoutwithtop.cshtml";
}
Why am I not getting the value for dish.price, dish,description etc, what I am doing wrong here?
<!DOCTYPE html>
<html lang="en" ng-app>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head
content must come *after* these tags -->
<title>Ristorante Con Fusion: Menu</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-
1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row row-content"
ng-init="
dish= {
name:'Uthapizza',
image: 'D:\Ericoll\bootstrap-3.3.6-dist\bootstrap-3.3.6-dist\Image\uthapizza.png',
category: 'mains',
label:'Hot',
price:'4.99',
description:'A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.',
comments:''
}">
<div class="col-xs-12">
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src={{dish.image}} alt="Bread">
</a>
</div>
<div class="media-body">
<h2 class="media-heading">{{dish.name}}
<span class="label label-danger label-xs">{{dish.label}}</span>
<span class="badge">{{dish.price | currency}}</span>
</h2>
<p>{{dish.description}}</p>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<!--<script src"./bootstrap-3.3.6-dist/js/bootstrap-3.3.6-dis/angular2.min.js"></script>-->
<!--<script src="D:\Ericoll\bootstrap-3.3.6-dist\bootstrap-3.3.6-dist\jsangular2.min.js"></script>-->
</body>
</html>
Made a few changes and used a controller now everything works great :)
The problem is, I think atleast not sure, but you used \ in your image path that's why I did this \/ then it's not a problem.
DEMO
var app = angular.module('App', []);
app.controller('MainCtrl', function($scope) {
$scope.dish = {
name: 'Uthapizza',
image: 'D:\/Ericoll\/bootstrap-3.3.6-dist\/bootstrap-3.3.6-dist\/Image\/uthapizza.png',
category: 'mains',
label: 'Hot',
price: '4.99',
description: 'A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.',
comments: ''
};
});
<!DOCTYPE html>
<html ng-app="App">
<head>
<title>Ristorante Con Fusion: Menu</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script data-require="angular.js#1.4.x" src="https://code.angularjs.org/1.4.8/angular.js" data-semver="1.4.8"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div class="container">
<div class="row row-content">
<div class="col-xs-12">
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src={{dish.image}} alt="Bread">
</a>
</div>
<div class="media-body">
<h2 class="media-heading">{{dish.name}}
<span class="label label-danger label-xs">{{dish.label}}</span>
<span class="badge">{{dish.price | currency}}</span>
</h2>
<p>{{dish.description}}</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
The value of the dish.image is the problem - avoid using backslash or escape it
I executed your code. Problem is with image part, if you remove image from ng-init your code will work fine. For image path avoid backlash.
i need help with responsive image when orientation change.
When mobile change to landscape mode, show white space inside page wrapper just after image, creating a space between image and fixed footer.
When click on a button panel image fix.
html:
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
<link href="css/normalize.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="css/app-theme.min.css" />
<link rel="stylesheet" href="css/jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="css/jquery.mobile.structure.min.css" />
<link rel="stylesheet" href="css/index.css" />
<title>Elephant</title>
</head>
<body>
<div class="app">
<div data-role="page" id="pageone" data-title="Elephant" data-url="pageone">
<!--Menu Panel-->
<div id="menu-panel" data-role="panel" data-position="left" data-display="push" data-position-fixed="true">
<ul id="page-menu" data-role="listview">
<li data-icon="search"><a data-rel="close" href="#pageone">Search</a></li>
<li data-icon="cloud"><a data-rel="close" href="#pageone">Weather</a></li>
<li id="location-btn" data-icon="location"><a data-rel="close"
href="#pageone">Location</a></li>
<li data-icon="camera"><a data-rel="close" href="#pageone">Camera</a></li>
<li data-icon="gear"><a data-rel="close" href="#pageone">Configuration</a></li>
</ul>
</div>
<!--/ Menu Panel-->
<!--Actions Panel-->
<div id="overlay-panel" data-role="panel" data-position="right" data-display="overlay" data-position-fixed="true">
<ul id="page-menu" data-role="listview">
<li id="camera-btn" data-icon="camera"><a data-rel="close" href="#pageone">Photo</a></li>
<li data-icon="video"><a data-rel="close" href="#pageone">Video</a></li>
<li data-icon="audio"><a data-rel="close" href="#pageone">Audio</a></li>
<li data-icon="alert"><a data-rel="close" href="#pageone">File</a></li>
</ul>
</div>
<!--/Actions Panel-->
<header id="page-header" data-role="header" data-position="fixed">
<a id="menu-btn" href="#menu-panel" data-role="button"
data-rel="close" data-icon="bars" data-iconpos="notext">Menu</a>
<h1>
<div id="spinner" class="visually-hidden ui-loader"></div>
<span class="visually-hidden">Elephant</span>
</h1>
<a href="#overlay-panel" data-role="button" class="ui-btn-right"
data-icon="bullets" data-iconpos="notext">Media</a>
</header>
<div id="main-content" role="main" class="ui-content">
<div class="ui-grid-solo">
<div id="photos-container" class="ui-block-a">
<img style="display: block;" id="smallImage" src="img/test.jpeg" />
<!-- <img style="display: none;" id="largeImage" src="" /> -->
</div>
</div>
</div>
<footer id="page-footer" role="contentinfo" data-role="footer" data-position="fixed">
<h1></h1>
</footer>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.mobile.min.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
</html>
css:
#photos-container {
width: 90%;
margin-left: 5%;
}
#photos-container img {
max-width: 100%;
}
Thank you very much
Regards
Thanks for your attention.
Error comes calculating min-height. I fixed it writting:
#media screen and (orientation: landscape) {
.ui-mobile .ui-page {
min-height: 0 !important;
}
}
Regards