Just getting started with Bootstrap.
Is there a way of having two columns in side a panel?
Thanks
Sure.. just like you'd create any Bootstrap columns:
<div class="panel panel-default">
<div class="panel-heading">Title</div>
<div class="panel-body">
<div class="row">
<div class="col-md-6">col1</div><div class="col-md-6">col2</div>
</div>
<div class="row">
<div class="col-md-6">col1</div><div class="col-md-6">col2</div>
</div>
<div class="row">
<div class="col-md-6">col1</div><div class="col-md-6">col2</div>
</div>
</div>
</div>
http://www.bootply.com/114526
You can also have a panel with a table:
<div class="panel panel-default">
<div class="panel-heading">Title</div>
<table class="table">
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</table>
</div>
Related
I am using a modal screen to show a datatable that summarizes a client's restaurant order. It contains a couple of div's to provide info and the mentioned table with the order (ammount, description, value).
Then, that order will be printed in a 48mm width paper special printer (POS58 Printer)
I'am struggling on how to print this information. Modal is overflowing once I try to print the modal.
I have tried so far: -Using word-break, different font-sizes but I think I am missing something.
Printing in PDF or a normal printer works perfectly fine.
Any suggestions?
<div class="modal fade" id="print_comanda" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content border-0">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">XX Restaurant</h5>
</div>
<div class="modal-body">
<p class="font-weight-bold" style="text-align:center">Internal Ticket</p>
<div class="text mb-3">
<div id="table_nr" style="text-align:center; font-size: 2rem;"></div>
<div id="table_hs"></div>
<div id="table_dt"></div>
<div id="table_client"></div>
<div id="table_waiter"></div>
</div>
<table width="100%" id="table_final" class="table">
<thead>
<tr>
<th scope="col" class="text-center">Ammt.</th>
<th scope="col" class="text-center">Desc.</th>
<th scope="col" class="text-center">Subtot.</th>
<th scope="col" class="text-center">Total</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<div id="nonPrintable2">
<div class="modal-footer">
<button type="button" id="cancel_a" class="btn btn-light" data-dismiss="modal">Cancel</button>
<button type="submit" id="btn_print" class="btn btn-dark">Print</button>
</div>
</div>
</div>
</div>
</div>
I'm trying to insert a navigation tab that will be displayed underneath the main one when the user clicks on the Pane5, but when I click on the child element (Pane01 or Pane02) I get app-router error. Is this happening because of nesting bootstrap
Here is an example of how HTML is structured in the page:
<template>
<div>
<div class="row">
<div class="col-lg-12">
<div class="row">
<div class="col-lg-6">
<h3 class=""><span t="asset_details"></span>SomeElement</h3>
</div>
<div class="col-lg-6">
<a class="pull-right"><i class="fa fa-window-close fa-2x"></i></a>
</div>
</div>
<div class="row">
<ul class="nav nav-pills">
<li><a data-toggle="tab" href="#pane1"><span>Details</span></a></li>
<li><a data-toggle="tab" href="#pane2"><span>Details</span></a></li>
<li><a data-toggle="tab" href="#pane3"><span>Other</span></a></li>
<li><a data-toggle="tab" href="#pane4"><span>Element</span></a></li>
<li><a data-toggle="tab" href="#pane6"><span>Element</span></a></li>
<li><a data-toggle="tab" href="#pane5"><span>Element</span></a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="pane1">
<div class="col-lg-12">
<div class="row">
<div class="col-lg-4">
</div>
<div class="col-lg-8">
<div class="row">
<div class="col-lg-6">
<compose>
</compose>
</div>
<div class="col-lg-6">
<compose></compose>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<compose></compose>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="pane2">
<div class="col-lg-12">
<div class="row">
<div class="col-lg-12">
<!--<commercial-line device-id.bind="deviceId"></commercial-line>-->
<compose></compose>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="pane3">
<div class="col-lg-12">
<div class="row">
<div class="col-lg-6">
<compose></compose>
</div>
<div class="col-lg-6">
<compose></compose>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="pane4">
<div class="col-lg-12">
<div class="row">
<div class="col-lg-12">
<compose></compose>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="pane5">
<div class="col-lg-12">
<div class="row">
<div class="col-lg-12">
<ul class="nav nav-pills">
<li class="active"><span>History</span></li>
<li if.bind="!history"><span>Param</span></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="pane01">
<div class="col-lg-12">
<div class="row">
<table class="table table-hover table-condensed" ref="theTable">
<thead>
<th>
<span>Afla</span>
</th>
<th class="col-lg-2">
<span>Beta</span>
</th>
<th>
<span>Gama</span>
</th>
<th>
<span>Gama</span>
</th>
<th>
</th>
</thead>
<tbody>
<tr repeat.for="element of Array">
<td>
<span>${element.first}</span>
</td>
<td class="col-lg-2">
<span >${element.second}</span>
</td>
<td>
<span>${element.third}</span>
</td>
<td>
<span>${element.fourth}</span>
</td>
<td >
<span>${element.fifth}</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="tab-pane" id="pane02">
<div class="col-lg-12">
<div class="row">
<div class="col-lg-12">
<table class="table table-hover table-condensed">
<thead>
<th>
<span>Alfa</span>
</th>
<th>
<span>Beta</span>
</th>
<th>
<span>Gama</span>
</th>
<th>
<span>Gama</span>
</th>
<th>
<span>Example</span>
</th>
<th>
<span>Inte</span>
</th>
</thead>
<tbody>
<tr repeat.for="item of array">
<td>
<span date-time>${item.date}</span>
</td>
<div class="divider"></div>
<td>
<span date-time>${item.date2}</span>
</td>
<td>
<span>${item.user}</span>
</td>
<td>
<span>${item.array1}</span>
</td>
<td>
<span>${item.array2}</span>
</td>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="pane6">
<div class="col-lg-12">
<div class="row">
<div class="col-lg-12">
<compose view-model="view-model">
</compose>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
add a router-ignore attribute to your a tag. so that aurelia will not activate the routing logic wen clicked on your link.
more on that topic can be found in the docs: https://aurelia.io/docs/routing/handling-links#basic-concept
Alternative way to href in Bootstrap is data-target. So if you want to do:
<a href="#panel-1">
then you can instead do:
<a data-target="#panel-1">
They are identical. The upside with data-target is it can support multiple selector
I created a vue app in cli. And I have a List component file:
<template>
<div class="container">
<h1 class="text-center">List member</h1>
<table class="table table-bordered">
<thead>
<tr>
<th class="text-center">ID</th>
<th class="text-center">Name</th>
<th class="text-center">Birthday</th>
<th class="text-center">Score</th>
<th class="text-center">Action</th>
</tr>
</thead>
<tbody>
<tr v-for="person in people">
<td class="text-center">{{ person.id }}</td>
<td class="text-center">{{ person.name }}</td>
<td class="text-center">{{ person.birthday }}</td>
<td class="text-center">{{ person.score }}</td>
<td class="text-center">
<b-btn v-b-modal.my-modal>Edit</b-btn>
</td>
</tr>
</tbody>
</table>
And I have modal component in this file:
<!-- Modal Component -->
<b-modal id="my-modal" ref="modal" title="Edit profile" #ok="handleOk"
#shown="clearName">
<form #submit.stop.prevent="handleSubmit">
<b-form-input type="text">{{ person.name }}</b-form-input>
<br>
<b-form-input type="text"></b-form-input>
<br>
<b-form-input type="text"></b-form-input>
</form>
</b-modal>
</div>
</div>
</template>
How can I pass data in a row (person) to modal when I click Edit button?
Thanks
in my case i fixed this with bootstrap modal and JQuery
1- HTML Modal
<div class="modal fade bd-example-modal-lg" id="document-details-modal" tabindex="-1" aria-labelledby="document-details-modal" style="display: none;" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">modal-title-details-document</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-6">
<p class="mb-3">
<div class="label">label-library-file-title</div>
<span id="document-details-document-title"></span>
</p>
</div>
<div class="col-md-6">
<p class="mb-3">
<div class="label">label-library-file-source-info</div>
<span id="document-details-document-source-info"></span>
</p>
</div>
</div>
<div class="row">
<div class="col-md-6">
<p class="mb-3">
<div class="label">label-library-file-author</div>
<span id="document-details-document-author"></span>
</p>
</div>
<div class="col-md-6">
<p class="mb-3">
<div class="label">label-library-file-language</div>
<span id="document-details-document-language"></span>
</p>
</div>
</div>
<div class="row">
<div class="col-md-6">
<p class="mb-3">
<div class="label">label-library-file-description</div>
<span id="document-details-document-description"></span>
</p>
</div>
<div class="col-md-6">
<p class="mb-3">
<div class="label">label-library-file-comments</div>
<span id="document-details-document-comments"></span>
</p>
</div>
</div>
</div>
<div class="modal-footer">
<div class="text-center">
<button type="button" class="btn" data-bs-dismiss="modal" aria-label="Close">ok</button>
</div>
</div>
</div>
</div>
</div>
2- Vuejs Call
<i class="bi bi-info-circle" v-on:click="setDocumentDetails(libraryItem)"></i>
3- Vuejs Funcation
setDocumentDetails: function (libraryItem) {
$('#document-details-document-title').text(libraryItem.Title);
$('#document-details-document-description').text(libraryItem.Description);
$('#document-details-document-source-info').text(libraryItem.SourceInfo);
$('#document-details-document-comments').text(libraryItem.Comments);
$('#document-details-document-author').text(libraryItem.Author);
$('#document-details-document-language').text(libraryItem.Language);
$('#document-details-modal').modal('show');
}
I am not sure this will work, and even less sure that this is elegant, but if they are in the same file, you could try having a currentPerson property that you set to person when this button is clicked. Like
<b-btn #click="currentPerson = person" v-b-modal.my-modal>Edit</b-btn>
and then just use {{currentPerson.name}} in the modal.
I want to make this responsive on mobile screen
<div class="row well">
<div class="col-sm-3 col-xs-6">
<div class="panel panel-default">
<div class="panel-body">
<img src="//placehold.it/450X300/DD66DD/EE77EE" class="img-responsive">
<div class="caption">
<h3>Plot 1</h3>
<p><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span> Electronic City
</p>
</div>
</div>
<table class="table" style="padding: 0; margin: 0;">
<tbody>
<tr>
<td>Price</td>
<td>Rs. 1400000</td>
</tr>
<tr>
<td>Total Land</td>
<td>7 acres</td>
</tr>
<tr>
<td>Total Plots</td>
<td>154</td>
</tr>
<tr>
<td>Avaliable Plots</td>
<td>15</td>
</tr>
</tbody></table>
<div class="panel-body">
<input class="btn btn-primary pull-right" type="button" value="ENQUIRY">
</div>
</div>
</div>
<div class="col-sm-3 col-xs-6">
<div class="panel panel-default">
<div class="panel-body">
<img src="//placehold.it/450X300/DD66DD/EE77EE" class="img-responsive">
<div class="caption">
<h3>Plot 1</h3>
<p><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span> Electronic City
</p>
</div>
</div>
<table class="table" style="padding: 0; margin: 0;">
<tbody>
<tr>
<td>Price</td>
<td>Rs. 1400000</td>
</tr>
<tr>
<td>Total Land</td>
<td>7 acres</td>
</tr>
<tr>
<td>Total Plots</td>
<td>154</td>
</tr>
<tr>
<td>Avaliable Plots</td>
<td>15</td>
</tr>
</tbody></table>
<div class="panel-body">
<input class="btn btn-primary pull-right" type="button" value="ENQUIRY">
</div>
</div>
</div>
<div class="col-sm-3 col-xs-6">
<div class="panel panel-default">
<div class="panel-body">
<img src="//placehold.it/450X300/DD66DD/EE77EE" class="img-responsive">
<div class="caption">
<h3>Plot 1</h3>
<p><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span> Electronic City
</p>
</div>
</div>
<table class="table" style="padding: 0; margin: 0;">
<tbody>
<tr>
<td>Price</td>
<td>Rs. 1400000</td>
</tr>
<tr>
<td>Total Land</td>
<td>7 acres</td>
</tr>
<tr>
<td>Total Plots</td>
<td>154</td>
</tr>
<tr>
<td>Avaliable Plots</td>
<td>15</td>
</tr>
</tbody></table>
<div class="panel-body">
<input class="btn btn-primary pull-right" type="button" value="ENQUIRY">
</div>
</div>
</div>
<div class="col-sm-3 col-xs-6">
<div class="panel panel-default">
<div class="panel-body">
<img src="//placehold.it/450X300/DD66DD/EE77EE" class="img-responsive">
<div class="caption">
<h3>Plot 1</h3>
<p><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span> Electronic City
</p>
</div>
</div>
<table class="table" style="padding: 0; margin: 0;">
<tbody>
<tr>
<td>Price</td>
<td>Rs. 1400000</td>
</tr>
<tr>
<td>Total Land</td>
<td>7 acres</td>
</tr>
<tr>
<td>Total Plots</td>
<td>154</td>
</tr>
<tr>
<td>Avaliable Plots</td>
<td>15</td>
</tr>
</tbody></table>
<div class="panel-body">
<input class="btn btn-primary pull-right" type="button" value="ENQUIRY">
</div>
</div>
</div>
</div>
view on desktop , this is fine
view on small screen , the design is getting compressed
And i want to show single plot record in a row , not two as shown below
How to make it responsive in small screen?
i am using bootstrap 3 for this
col-xs- is specifically for mobile phones. And making it col-xs-12 will make it take full width.
Update your columns
from
<div class="col-sm-3">
to
<div class="col-xs-12 col-sm-3">
i am creating a form where i want to display a input field and a header. here is my code
<div class="container">
<div class="row">
<div class="col-md-6">
<h4 class="pull-left"><b>Hum Members</b></h4>
</div>
<div class="col-md-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="Add emails">
<span class="input-group-btn">
<button class="btn btn-primary" type="button">Add</button>
</span>
</div>
</div>
</div>
<br><br>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-10 col-xs-10">
<div class="visible-lg visible-md">
<ul class="nav nav-tabs" id="myTab">
<li class="active">
<i class="fa fa-users fa-1x"></i> Members
</li>
<li><i class="fa fa-plus fa-1x"></i> Join Requests</li>
</ul>
</div>
<div class="tab-content">
<div class="tab-pane active" id="members">
<div class="table-responsive">
<table class="table table-hover table-borderless">
<thead>
<tr>
<th>Group Name</th>
<th>Created by</th>
<th>Moderator</th>
<th>Group ID</th>
</tr>
</thead>
<tbody>
<tr>
<td>group 01</td>
<td>test</td>
<td>test</td>
<td>Ag223B3</td>
</tr>
<tr>
<td>group 01</td>
<td>test</td>
<td>tset</td>
<td>Ag223B3</td>
</tr>
<tr>
<td>group 01</td>
<td>est>
</td><td>test</td>
<td>Ag223B3</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="col-sm-2 col-xs-2 visible-sm visible-xs">
<ul class="nav pull-right">
<li class="active"><i class="fa fa-users fa-2x"></i></li>
<li><i class="fa fa-plus fa-2x"></i></li>
</ul>
</div>
</div>
</div>
the header "Hub members" and "input field" are displayed in single line. On mobile phone it is displaying on same row as on desktop. what i want is to display it in separate rows on mobile phones. e.g.
hub members //header
user emails //input field
//rest of view i.e table
How can i resolve it.
Regards,
Following is demo code
Demo here
Is this what you're trying to achieve? Not really sure about your instructions.
<div class="row">
<div class="col-md-4 col-sm-4 col-xs-4">
<h4><b>Hum Members</b></h4>
</div>
<div class="col-md-4 col-sm-4 col-xs-4">
<h4>User Emails</h4>
</div>
<div class="col-md-4 col-sm-4 col-xs-4">
<div class="input-group">
<input type="text" class="form-control" placeholder="Add emails">
<span class="input-group-btn">
<button class="btn btn-primary" type="button">Add</button>
</span>
</div>
</div>
</div>
Or Probably this?
<div class="row">
<div class="col-md-4">
<h4><b>Hum Members</b></h4>
</div>
<div class="col-md-4">
<h4>User Emails</h4>
</div>
<div class="col-md-4">
<div class="input-group">
<input type="text" class="form-control" placeholder="Add emails">
<span class="input-group-btn">
<button class="btn btn-primary" type="button">Add</button>
</span>
</div>
</div>
</div>