Here is my code. I build 20 questions dynamically. So I need to create a dialog for each of them. It's a mobile application, built using jquery mobile. So I prefer to use the jquery mobile dialog functionality.
I know for sure it can be done, just not sure how.
<div data-role="page" id="Survey">
<div class="quest">
#Html.DisplayFor(modelItem => item.Text)<div class="quest_com">
Comments</div>
</div>
<div data-role="page" id="dialog">
<div data-role="header">
<h1>
Dialog</h1>
</div>
<div data-role="content">
<div class="center-wrap">
<textarea style="width: 320px" title="Comments">
</textarea><a data-rel="dialog" data-role="button">Save</a>
</div>
</div>
</div>
</div>
You cannot have a page nested in another page for it to work. Your 20 questions should each be setup as their own jQuery Mobile page elements.
<div data-role="page" id="Survey">
...
<a data-rel="dialog" href="question-dialog-1">Question 1</da>
</div>
<div data-role="page" id="question-dialog-1">
...
</div>
Here is a live example of it in action: http://jsfiddle.net/shanabus/ZfBvB/
That should solve what you are looking to do.
Here is the documentation on jQuery Mobile dialogs.
Related
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>
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>
I have an arraylist from which I need to get values where isActive = true, and to display the data in a <div> tag with the use of ng-repeat.
My problem is that I don't want to keep using ng-repeat every time, while fetching values in each <div> tag.
Is there any generic solution which will iterate only once, and I can see the value in <div>, side by side. Please see this attempt:
enter link description here
I want to see a result like this:
You can write your ng-repeat like below.
Whenever it get isActive true, it will create the div section for this.
<body ng-controller="MainCtrl">
<div ng-repeat="tempData in data">
<div ng-if="tempData.isActive == true" >
<div class="col-xs-12" >
<div class="col-xs-4">Plan Type:</div>
<div class="col-xs-8">{{tempData.plantype}}</div>
</div>
<div class="col-xs-12">
<div class="col-xs-4">Term:</div>
<div class="col-xs-8">{{tempData.term}}</div>
</div>
<div class="col-xs-12">
<div class="col-xs-4">Rate:</div>
<div class="col-xs-8">{{tempData.rate}}</div>
</div>
</div>
</div>
</body>
{{#if currentUser}}
<div ng-app="appy">
Home
Page
<div ui-view></div>
</div>
{{else}}
Here will be logIn page
{{/if}}
Goal is to render menu and content only to logged users, if not logged render login page. problem is {{#if currentUser}} makes my ui-view element to not render templates it shuld.
How to repair it ?
Try this:
<div ng-app="appy">
<div ng-show="$root.currentUser">
Home
Page
<div ui-view></div>
</div>
<div ng-hide="$root.currentUser">
Here will be logIn page
</div>
</div>
In my kendo mobile application, if I have a custom root container like so:
<div id="appcontainer">
<div data-layout="StandardLayout" data-role="view" data-title="My Group List" id="MainView">
This is the first contents.
</div>
<div data-layout="StandardLayout" data-role="view" data-title="View Group" id="SelectedView">
This is the second contents.
</div>
<div data-role="layout" id="StandardLayout">
<header data-role="header">
<div data-role="navbar">
<a data-role="backbutton" data-align="left" href="nav-button">Back</a>
<span data-role="view-title"></span>
</div>
</header>
<footer data-role="footer">
</footer>
</div>
</div>
<script type="text/javascript">
window["appframework"] = new kendo.mobile.Application($("#appcontainer").get(0));
</script>
The Kendo mobile framework does not initialize the views correctly, and I get the error:
Error: Your kendo mobile application element does not contain any
direct child elements with data-role="view" attribute set. Make sure
that you instantiate the mobile application using the correct
container.
But if I remove the appcontainer element, and use document.body as the root element, everything works fine. Any idea why a custom root container doesn't work?