I'm using a custom tabstrip that I took from the KendoUI page and adapted for my application.\
It has 3 tabs (home, startOfDay and stops). Each tab goes to an HTML page.
The problem is this, I can navigate from Home to one of the other tabs without a problem, but after that if I try navigate to another tab it just goes to a blank page.
Here's the my layout code.
<section data-role="layout" data-id="default">
<header data-role="header">
<div data-role="navbar">FnF Driver Application</div>
</header>
<!--View content will render here-->
<footer data-role="footer">
<div data-role="tabstrip" id="custom-tabstrip">
<a data-icon="home" href="home.html">Home</a>
<a data-icon="globe" href="startOfDay.html">Start Of Day</a>
<a data-icon="toprated" href="stops.html">Stops</a>
</div>
</footer>
</section>
each page is contained in a div that looks like this...
<body>
<div id="home/startOfDay/stops" data-role="view" data-layout="default">
~Content goes here~
</div>
</body>
Any help would be greatly appreciated.
Thanks!!!
Try removing the <body> tags from your views? I think when Kendo UI Mobile reads in a remote view it injects it into the page DOM, and having another <body> tag might be messing it up.
I read somewhere that a layout has to have at least one view defined to work properly, even if it is a blank view. Try putting in a blank view.
<section data-role="layout" data-id="default">
<header data-role="header">
<div data-role="navbar">FnF Driver Application</div>
</header>
<!--View content will render here-->
<div data-role="view"></div>
<footer data-role="footer">
<div data-role="tabstrip" id="custom-tabstrip">
<a data-icon="home" href="home.html">Home</a>
<a data-icon="globe" href="startOfDay.html">Start Of Day</a>
<a data-icon="toprated" href="stops.html">Stops</a>
</div>
</footer>
</section>
Related
I create a main page and all its code means header, footer etc i distribute in different pages and i linked all pages with main page through include method...main page work properly except one code given below
main pages
<!doctype html>
<html lang="en">
#include('partails._header')
<body>
<!-- < navbar-->
#include('partails._navbar')
<!-- end navbar -->
<div class="container">
#include('partails._body')
</div>
<hr>
#include('partails._footer')
#include('partails._script')
</body>
</html>
folder name partials and _body i want to include in main page but not work
_body code is given
<div class="row">
<div class="col-md-4">
<div class="list-group">
First item
Second item
Third item
</div>
</div>
{{-- end 4 --}}
<div class="col-md-8">
#yield('content')
</div>
</div>
{{-- end row --}}
folder name partials and _body i want to include in main page but not work
_body code is given
<div class="row">
<div class="col-md-4">
<div class="list-group">
First item
Third item
</div>
</div>
{{-- end 4 --}}
<div class="col-md-8">
#yield('content')
</div>
{{-- end row --}}
If your body.blade.php is located in partials folder just include this way
#include('partials.body')
By saying yield('content') not working properly, what do you mean? How are you passing other view(blade) to the main page via content?
I am building a simple static website. I am using Spring Boot, Thymeleaf Layout Dailect and Bootstrap 4. In my layout.html I have a row in which I have a content and a sidebar. I have 2 photos in my sidebar, in all of views they appear on the right side. However when I try to embed an iframe with a google map or with a facebook page the sidebar gets pushed down. I tried a few different things like changing the size of iframe to minimum etc. but I am unable to keep my sidebar on the right side. Please can anyone suggest a solution?
Below is my layout.html:
<body>
<div class="container-fluid" th:replace="fragments/navigation :: navigation"></div>
<div class="container-fluid" id="mainContent">
<div class="row">
<div class="col-md-8">
<div layout:fragment="content"></div>
</div>
<div class="col-md-4">
<div th:replace="fragments/sidebar :: sidebar"></div>
</div>
</div>
</div>
<div class="container-fluid" th:replace="fragments/footer :: footer"></div>
Below is my sidebar.html:
<body>
<div th:fragment="sidebar">
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-body">
<img src="/img/ai-ki-do.png" alt="Logo" style="width: 330px;"></img>
</div>
</div>
<div class="panel panel-default">
<div class="panel-body">
<img src="/img/ueshiba-laughter.jpg" alt="Logo"
style="width: 330px;" ></img>
</div>
</div>
</div>
</div>
</body>
Below is my content:
<body>
<div layout:fragment="content">
<p>Thank you for your interest in Seishinkan. Please get in touch via our Facebook page. We look forward to hearing from you.</p>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2FSeishinkan-Aikido-Dojo-389984175129276%2F&tabs=timeline&width=340&height=500&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId" data-adapt-container-width="true"></iframe>
</div>
</body>
Normal sidebar's behaviour - a white picture 'Ai Ki Do' and a dark picture on the right side :
The sidebar pushed down after embedding the iframe:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<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://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<div class="row">
<iframe src="https://www.w3schools.com">
<p>Your browser does not support iframes.</p>
</iframe>
<div>
another one
</div>
</div>
For some reason when I remove the col classes from the divs and keep them in a row, the two pieces don't go below each other
Have you tried inspecting the element and editing your css classes in the browser while in developer mode?
I had the same problem before and all I did was mess around with the code in the console until it eventually moved the way I wanted it to.
Placing a new row and column within:
<div layout:fragment="content"></div>
worked for me.
<div layout:fragment="content">
<div class="row">
<div id="dojo-page" class="col-md-12">
<div id="fb-frame" class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" width="600" height="450"
frameborder="0" style="border: 0"
src="path-for-google-map-location"
allowfullscreen></iframe>
</div>
</div>
</div>
I'm doing Spring project use Spring Boot, Spring MVC, Spring Data. Now I have a problem maybe with thymeleaf
This is my index page
Logo Bonfire and room picture is image and save in folder src/main/resource/static/images in eclipse .
When I use Search function, it will display Search page like this picture
I don't know why it's not display logo image and room image although I use one template for my index page and search page... And it's still happened with detail page too, images is not displayed. Only index page displayed images
I think the problem is not by code... I don't know why
This is my room.html (index page and search page)
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="Header :: head">
</head>
<body>
<div th:replace="Header :: header" class="header"></div>
<div class="container">
<div class="products">
<h2 class=" products-in">AVAILABLE ROOM</h2>
<div class=" top-products">
<span th:each="room,iterStat : ${room}">
<div class="col-md-3 md-col">
<div class="col-md">
<a th:href="#{/room/{id}/detail(id=${room.id})}" class="compare-in"><img th:src="#{'images/'+${room.image}}" alt="" />
</a>
<div class="top-content">
<h5><a th:href="#{/room/{id}/detail(id=${room.id})}"><tr th:text="${room.name}"></a></h5>
<div class="white">
<a th:href="#{/room/{id}/book(id=${room.id})}" class="hvr-shutter-in-vertical hvr-shutter-in-vertical2">BOOK</a>
<p class="dollar"><span class="in-dollar">$</span><span>2</span><span>0</span></p>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</span>
<div class="clearfix"></div>
</div>
</div>
</div>
<div th:replace="Header :: footer" class="footer"></div>
</body>
</html>
Pleased help me
Use this approach to set the image :--
<div th:style="'background-image:url('+ ${room.image}+');'"></div>
Use something like this.
<img th:src="${'images/'+ room.image}" />
In classic bootstrap, this construction is easy:
<div class="panel panel-danger">
<div class="panel-heading">
Some HTML including a drop-down.
</div>
<div class="panel-body">
Panel body, lots of HTML here
</div>
<div class="panel-footer">
<button class="btn btn-default">Click me</button>
</div>
</div>
In the react-bootstrap implementation, there seems to be no way of including further html in the panel header or footer?
Try this
<Panel
header="Some HTML including a drop-down."
footer={<Button> Click me</Button>}
bsStyle="danger"
>
Panel body, lots of HTML here
</Panel>
You can use other props from bootstrap-react document
As per the react-bootstrap panel documentation:
<Panel>
<Panel.Heading>Panel heading</Panel.Heading>
<Panel.Body>Panel content</Panel.Body>
<Panel.Footer>Panel footer</Panel.Footer>
</Panel>
The following code snippet which includes an onClick event will
not work until I click reload on both the simulator and the phone.
The code is in an .erb file in an app model folder.
<section id="page1" data-role="page">
<header data-role="header">
<h1>CSS 3 Animations</h1>
</header>
<div data-role="content" class="content">
<p class="show-menu" onclick="ToggleText()">(Show/Hide) Menu</p>
<div class="sliding-menu slide out">Menu</div>
</div>
</section>
<script type="text/javascript">
function ToggleText() {
$(".sliding-menu").toggleClass("reverse out in");
}
</script>
I'm using rhomobile 3.2.1 with. Can someone explain why and what to do to
fix it?
Would something like this work?
http://jsfiddle.net/aJshm/3/
JS
$('.toggle-menu').click(function() {
$(".sliding-menu").toggleClass("reverse out in");
});
HTML
<section id="page1" data-role="page">
<header data-role="header">
<h1>CSS 3 Animations</h1>
</header>
<div data-role="content" class="content">
<p class="toggle-menu">(Show/Hide) Menu</p>
<div class="sliding-menu slide out">Menu</div>
</div>
</section>
Just a guess, try defining the function before it is invoked?