I'm just getting started with BootstrapVue but I have some trouble understanding the layout system despite their comprehensive documentation.
My first attempt is to create a simple form with three checkboxes. This is what I have so far:
<template>
<div>
<h3>Headline</h3>
<b-form class="p-3">
<b-form-group>
<b-form-checkbox>An option</b-form-checkbox>
</b-form-group>
<b-form-group>
<b-form-checkbox>Another option</b-form-checkbox>
</b-form-group>
<b-form-group>
<b-form-checkbox>A third option</b-form-checkbox>
</b-form-group>
</b-form>
</div>
</template>
This is getting rendered like in the following image. As you can see, all checkboxes are centered horizontally on the screen taking up the full width.
I'm struggling how I can align the elements (header and form components) to the left of the screen and not taking up the complete width.
If I understand the problem right, you should use the bootstrap grid system which you can read more at this link: https://bootstrap-vue.org/docs/components/layout
I create a simple snippet to show you how you can move your form to the left and have another section on the right and you can extend it to anything you want or event making it mobile-friendly.
Also, your form in your snippet shouldn't be at the center and I think you have some CSS code somewhere else and because of that, you are seeing your form at the center.
new Vue({
el: '#app'
})
.leftSection {
background: lightgray;
}
.rightSection {
background: cyan;
}
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap#4.5.3/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue#2.21.2/dist/bootstrap-vue.css" />
<script src="https://unpkg.com/vue#2.6.12/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue#2.21.2/dist/bootstrap-vue.min.js"></script>
<div id="app">
<b-container fluid>
<b-row>
<b-col cols="4" class="leftSection">
<h3>Headline</h3>
<b-form class="p-3">
<b-form-group>
<b-form-checkbox>An option</b-form-checkbox>
</b-form-group>
<b-form-group>
<b-form-checkbox>Another option</b-form-checkbox>
</b-form-group>
<b-form-group>
<b-form-checkbox>A third option</b-form-checkbox>
</b-form-group>
</b-form>
</b-col>
<b-col cols="8" class="rightSection">
<h3>Dashboard</h3>
</b-col>
</b-row>
</b-container>
</div>
Related
Does anybody have any advice for fixing the problem of a modal appearing behind its backdrop?
So far, I have tried making sure I have all the necessary imports (including <paper-dialog-scrollable>).
I also tried a "hack-fix" (suggested by someone) involving setting z-index: auto in the css of paper-header-panel. Neither works.
It's worth noting that the <paper-dialog> tag works just fine. Until I add the modal attribute.
Any ideas?
Similar issues
Appearing around the internet are this issue report and this Stackoverflow question.
my-element.html
<script src="http://www.polymer-project.org/1.0/samples/components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="http://www.polymer-project.org/1.0/samples/components/polymer/polymer.html" />
<link rel="import" href="../../../bower_components/paper-dialog/paper-dialog.html">
<dom-module id="example-element">
<template>
<!-- Dialog -->
<paper-dialog id="contactDialog" modal>
<h2>Login</h2>
<paper-dialog-scrollable>
<form id="contact-form" autofocus>
<paper-input autofocus id="name" label="Your Name"></paper-input>
<paper-input id="email" label="Email Address"></paper-input>
</form>
</paper-dialog-scrollable>
<div class="buttons">
<paper-button dialog-dismiss>Cancel</paper-button>
<paper-button dialog-confirm>Accept</paper-button>
</div>
</paper-dialog>
<!-- Button -->
<paper-button id="login"
data-dialog="contactDialog"
on-tap="openDialog">Login</paper-button>
</template>
</dom-module>
<script>
(function() {
Polymer({
is: 'example-element',
properties: {...},
openDialog: function(){
this.$.contactDialog.open();
}
});
})();
</script>
This is my solution:
openDialog: function(){
var body = document.querySelector('body');
Polymer.dom(body).appendChild(this.$.dialogId);
this.$.dialogId.open();
}
Special Note: This answer applies to those trying to implement a <paper-dialog modal> element inside a header element. Specifically, inside <paper-drawer-panel>.
Answer:
On this bug report rubenstolk provides a hack-fix as follows:
To implement #dhpollack's hack in a nice way, add this function to your custom element:
// https://github.com/PolymerElements/paper-dialog/issues/7
patchOverlay: function (e) {
if (e.target.withBackdrop) {
e.target.parentNode.insertBefore(e.target.backdropElement, e.target);
}
},
And add on-iron-overlay-opened="patchOverlay" to all your <paper-dialog>'s
I have tested it and verifies that it works. So for now, that solves it. Therefore, I suppose it is sufficient for now to wait until the bug is fixed.
It wasn't quite clear from the screenshot, but the problem is your modal dialog appears behind the <paper-drawer-panel>, yes?
If so, I believe the solution is the same here: just place the dialog or custom element containing the dialog outside of the <paper-drawer-panel>, e.g.:
<paper-drawer-panel>
<paper-header-panel drawer>
<paper-toolbar>
<div>Drawer</div>
</paper-toolbar>
<paper-menu selected="{{_selected}}">
<paper-item>Item 1</paper-item>
<paper-item>Item 2</paper-item>
</paper-menu>
</paper-header-panel>
<paper-header-panel mode="standard" main>
<paper-toolbar>
<h1>[[_selected]]</h1>
</paper-toolbar>
<neon-animated-pages selected="{{_selected}}">
<paper-button raised on-tap="openDialog">Show Dialog</paper-button>
<div>Div</div>
</neon-animated-pages>
</paper-header-panel>
</paper-drawer-panel>
<example-element id="dialog"></example-element>
Here is a screenshot illustrating this:
I would like to pass a value from a slide out of JSSOR to other parts of the DOM.
Markup:
<div class="slide">
<img data-u="image" src="bilder/bild2.jpg" />
<div class="caption" data-u="caption" ><p>Caption text</p></div>
</div>
JS:
jssor_slider1.$On($JssorSlider$.$EVT_PARK,function(slideIndex,fromIndex){
$(".outer-caption").text(currentCaption);
});
The custom JSSOR Event, EVT_PARK, works fine. But what's missing is how to get the caption of the current slide and put it into the variable currentCaption. How to do that?
And if so, where could I have found that out on my own?
Please have a full test of following code,
<div class="slide">
<img data-u="image" src="bilder/bild2.jpg" />
<div class="caption" data-u="caption" id="caption-slide-0"><p>Slide 0 Caption</p></div>
</div>
jssor_slider1.$On($JssorSlider$.$EVT_PARK,function(slideIndex,fromIndex){
$("#outer-caption").text($("#caption-slide-" + slideIndex).text());
});
I'm building an HTA (userform) and would like to add a Time Picker but have been unsucessful getting something to work. I'm using the JQuery Date Picker successfully, but their website does not have any reference to using a Time Picker, or manipulating the date picker to show the time. Since HTA is a stand alone applicaiton I know my options are limited, but hopefully someone knows what I'm missing here. Thanks!
<HEAD>
<meta charset="utf-8" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style type="text/css">
.ui-datepicker {
background: #035c7e;
border: 1px solid #555;
color: #EEE;}
</style>
<script>
$(function() {
$( "#datepicker1" ).datepicker(); });
</script>
</HEAD>
<BODY>
Shift Date: <input type="text" name="StartDate" id= "datepicker1" size="8">
Start Time: <input type="text" name="StartTime" id= "" size="8">
etc.
</BODY>
Download the 2 external js-files and include them from local filesystem.
I have a comboxbox loading its data from a url store. My code is below... What I noticed in Firebug is that the Combobox loads this info once I put the focus on it. I would love to have the Combobox to populate when the page is done loading.I am guessing I use dojo.ready for this? Does anyone have a suggestion as to how I would pull this off? Many thanks! Janie
<!DOCTYPE html>
<html >
<head>
<link rel="stylesheet" type="text/css" href="lib/dojo/dijit/themes/claro/claro.css" />
<style type="text/css">html, body {
width: 100%;
height: 100%;
margin: 0;
}</style>
<script src="lib/dojo/dojo/dojo.js" data-dojo-config="parseOnLoad: true"></script>
<script>require(["dojo/ready", "dojo/data/ItemFileReadStore", "dijit/form/ComboBox"]);
</script>
</head>
<body class="claro">
<label for="user">User: </label>
<div dojoType="dojo.data.ItemFileReadStore" url="test.json" jsId="countryStore">
<input dojoType="dijit.form.ComboBox" searchAttr="last_name" store="countryStore" class="selectionNav tableData" value="" name="last_name" id="test.json" />
</body>
</html>
your require function should look something like this
require(["dojo/ready", "dijit/registry", "dojo/data/ItemFileReadStore"],function(dom,reg,store){
var combo = dijit.byId("test.json");
var storeDate = new store({url:"path/to/file.json"});
try{
combo.store(storeData);
}catch(e){
combo.set("store",storeData)
}
});
the try catch statement is because I don't remember which is the correct one
I'm writing a mobile app with PhoneGap and jQuery Mobile. To simplify navigation I want to spread a single form over multiple 'pages' using div data-role="page". The idea is to give the user a wizard like experience for filling in a large form. On completion I need to be able to save the form locally, or submit it, if the mobile is online.
I don't understand how to go about submitting or saving a form using jQuery Mobile if the form is split into multiple 'virtual' pages. I've search the web but can't find any tutorials or examples on solving this problem.
Any help will be appreciated.
UPDATE:
I recently changed the way I worked with multipage forms, and this solution worked nice for me. You basically use a naming convention where fields become part of sections by giving them id's starting with the section name and a dash, e.g: person-name, person-surname. See the answer below.
Ok, I posted my thoughts here: http://www.coldfusionjedi.com/index.cfm/2011/11/18/Demo-of-a-multistep-form-in-jQuery-Mobile
Essentially I ended up using a sever side language to simply include the right part of the form at a time. (I'm using ColdFusion, but any language would work really.) The form self posts and simply displays the right step based on where you are in the process.
A quick help to anyone stuck with the same problem. I did the 'form thing', but it gets sloppy. You basically just embed the page divs inside the form element, but that's not very elegant and has given me some navigation issues.
So I ended up with my own solution that works over huge multipage forms (+/- 1000 elements). Not the most elegant, but it works like a charm:
<!DOCTYPE html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta charset="utf-8"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.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/jquery.mobile-1.1.0.min.js"></script>
<script>
$(function () {
$('#submit_my_form').click(function (e) {
alert(JSON.stringify(readFormData('names')));
alert(JSON.stringify(readFormData('dates')));
});
});
function readFormData(section) {
var sectionData;
var els = $(':input[id|='+section+']');
var sectionData = {};
$.each(els, function() {
if (this.name && !this.disabled && (this.checked
|| /select|textarea/i.test(this.nodeName)
|| /text|hidden|password|date|email/i.test(this.type))) {
sectionData[this.name.substr(section.length+1)] = $(this).val();
console.log(this.name + " -> " + $(this).val());
}
});
return sectionData;
}
</script>
</head>
<body>
<div data-role="page" id="menu" data-theme="a">
<div data-role="header" data-position="fixed">
<h1>Menu Page</h1>
</div>
<div data-role="content">
<ul data-role="controlgroup">
<li><a target_id="page1" href="#page1" data-role="button"
style="text-align:left" data-icon="arrow-r"
data-iconpos="right" class=".ui-icon-manditory">Page1</a></li>
<li><a target_id="page2" href="#page2" data-role="button"
style="text-align:left" data-icon="arrow-r"
data-iconpos="right">Page2</a></li>
</ul>
<input id="submit_my_form" type="button" name="send" value="Submit"/>
</div>
<div data-role="footer" data-position="fixed" class="ui-btn-right" style="min-height:42px;">
Menu page footer
</div>
</div>
<div data-role="page" id="page1" data-theme="a">
<div data-role="header" data-position="fixed">
Prev
<h1>Page 1</h1>
Next
</div>
<div data-role="content">
<label for="names-initials">Name:</label>
<input type="text" name="names-initials" id="names-initials" value=""/>
<label for="names-surname">Surname:</label>
<input type="text" name="names-surname" id="names-surname" value=""/>
</div>
<div data-role="footer" data-position="fixed" class="ui-btn-right" style="min-height:42px;">
</div>
</div>
<div data-role="page" id="page2" data-theme="a">
<div data-role="header" data-position="fixed">
Prev
<h1>Page 2</h1>
</div>
<div data-role="content">
<label for="dates-birthday">Birthday:</label>
<input type="date" name="dates-birthday" id="dates-birthday" value=""/>
</div>
<div data-role="footer" data-position="fixed" class="ui-btn-right" style="min-height:42px;">
<a href="#menu" data-icon="arrow-l" data-direction="reverse" data-iconpos="left"
style="margin-left: 10px; margin-top: 5px">Back to Main From</a>
</div>
</div>
</body>
</html>