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">
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 am trying to create a bootstrap table with one of the cell having a form input. However, I realised that this input prevents bootstrap from setting the table width to be the same for each column, even when I reduce the length of the input.
Can anyone help with this to adjust the width to be consistent for all columns? Thanks.
<!doctype html>
<head>
<link rel="stylesheet" href="./frameworks/bootstrap.min.css"></link>
<script src="./frameworks/bootstrap.min.js"></script>
<script src="./frameworks/button_plus_minus.js"></script>
<link href="./font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-7">
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>Date</th>
<th>Time</th>
<th>Location</th>
<th>Item</th>
<th>Value ($)</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>28 Aug</td>
<td>10:47:21</td>
<td>Australia</td>
<td>Silver</td>
<td>1500</td>
</tr>
<tr>
<td>2</td>
<td>28 Aug</td>
<td>10:47:21</td>
<td>Australia</td>
<td>Gold</td>
<td>
<div class="col-xs-8 input-group">
<span class="input-group-btn">
<button type="button" class="btn qtyminus" data-type="minus" field='quantity'">
<span class="fa fa-minus"></span>
</button>
</span>
<input id="inputvalue2" type="text" name="quantity" class="form-control qty" value="1000" min="1" max="100000"></input>
<span class="input-group-btn">
<button type="button" class="btn qtyplus" data-type="plus" field='quantity'">
<span class="fa fa-plus"></span>
</button>
</span>
</div>
</td>
</tr>
<tr>
<td>3</td>
<td>28 Aug</td>
<td>10:47:21</td>
<td>US</td>
<td>Computer</td>
<td>2000</td>
</tr>
<tr>
<td>4</td>
<td>28 Aug</td>
<td>10:47:21</td>
<td>Japan</td>
<td>Bags</td>
<td>1000</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
Added a class to the <table> and the <input> tag. By making the text-align center will make your table more subtle and consistent. You should also try using classes for other screen sizes like col-md-6 or col-lg-4 whatever suits you best. But this practice will help you control your UI across different screen sizes. Hope that helps. Let me know if this doesn't work out for you.
<!doctype html>
<head>
<link rel="stylesheet" href="./frameworks/bootstrap.min.css"></link>
<script src="./frameworks/bootstrap.min.js"></script>
<script src="./frameworks/button_plus_minus.js"></script>
<link href="./font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<style>
.txt_cent{
text-align:center;
}
.inp_width{
width:70px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-7">
<table class="table table-striped txt_cent" >
<thead>
<tr>
<th>#</th>
<th>Date</th>
<th>Time</th>
<th>Location</th>
<th>Item</th>
<th>Value ($)</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>28 Aug</td>
<td>10:47:21</td>
<td>Australia</td>
<td>Silver</td>
<td>1500</td>
</tr>
<tr>
<td>2</td>
<td>28 Aug</td>
<td>10:47:21</td>
<td>Australia</td>
<td>Gold</td>
<td>
<div class="col-xs-8 input-group">
<span class="input-group-btn">
<button type="button" class="btn qtyminus" data-type="minus" field='quantity'">
<span class="fa fa-minus"></span>
</button>
</span>
<input id="inputvalue2" type="text" name="quantity" class="form-control qty inp_width" value="1000" min="1" max="100000"></input>
<span class="input-group-btn">
<button type="button" class="btn qtyplus" data-type="plus" field='quantity'">
<span class="fa fa-plus"></span>
</button>
</span>
</div>
</td>
</tr>
<tr>
<td>3</td>
<td>28 Aug</td>
<td>10:47:21</td>
<td>US</td>
<td>Computer</td>
<td>2000</td>
</tr>
<tr>
<td>4</td>
<td>28 Aug</td>
<td>10:47:21</td>
<td>Japan</td>
<td>Bags</td>
<td>1000</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
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.
AM using bootstrap 3 for my python web application. I want to use the application in mobile devices also. but the input form fields are become responsive to the width of the device. I want in input field width to be static as in browser . please advice how to achieve this?
below is the html which am using
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<div class="col-lg-12">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="row">
<div class="col-md-2 pull-left">
Add Timesheet Details
</div>
<div class="col-md-8 text-center">
<label class="control-label" for="timesheet_no">Time Sheet Number:01</label>
</div>
</div>
</div>
<div class="panel-body">
<form id="add_detail" class="form-horizontal" action="" method="post" name="page">
<div style="display:none;"><input id="csrf_token" name="csrf_token" type="hidden" value="1434973923##5ac019cd8821a1dfda978dde3710893c8b0ced33"></div>
<div class="form-group">
<div class="repeat" id="dimdetail-fieldset">
<div class="col-md-12">
<div class ="table-responsive">
<table id="table_id" class="wrapper table table-bordered">
<thead>
<tr>
<th class="col-md-2"><button type="button" class="add btn btn-primary pull-left" id="add_time"><i class="glyphicon glyphicon-plus"></i>  Time</button></th>
</tr>
</thead>
<tbody class="container">
<tr class="success">
<th class="col-md-2">Project</th>
<th class="col-md-2">Total Hours</th>
<th class="col-md-2">TPI Inspector Name</th>
<th class="col-md-2">Inspection Type</th>
<th class="col-md-2">Remarks</th>
<th></th>
</tr>
<tr >
<td class="form-group col-md-2">
<select class="form-control" id="timesheet_time_details-0-project_id" name="timesheet_time_details-0-project_id" style="width:100%"><option value="">-- please choose --</option>
<option value="12997">12997</option></select>
</td>
<td class="form-group col-md-2">
<input class="form-control" id="timesheet_time_details-0-total_hours" name="timesheet_time_details-0-total_hours" type="text" value="10.0">
</td>
<td class="form-group col-md-2">
<input class="form-control" id="timesheet_time_details-0-tpi_inspector_name" name="timesheet_time_details-0-tpi_inspector_name" type="text" value="Ram">
</td>
<td class="form-group col-md-2">
<select class="form-control" id="timesheet_time_details-0-testmethod" name="timesheet_time_details-0-testmethod" style="width:100%"><option value="__None">-- please choose --</option><option selected value="1">UltraSonic Inspection</option></select>
</td>
<td class="form-group col-md-2">
<textarea class="form-control" id="timesheet_time_details-0-remarks" name="timesheet_time_details-0-remarks" rows="3">ok</textarea>
</td>
<td class="col-md-1">
<button class="remove btn btn-danger" type="button" id=""><i class='glyphicon glyphicon-trash'></i> Delete</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<div class="row">
<div class="col-md-10 pull-left">
<button class="btn btn-primary" type="submit" value="Save" name="Save"><i class="glyphicon glyphicon-save"></i>  Save</button>
<button class="btn btn-success" type="submit" value="Submit for Approval" name="Save"><i class="glyphicon glyphicon-ok-circle"></i>  Submit for Approval</button>
<button id="delete" class="btn btn-danger" type="submit" value="Delete" name="Save"><i class="glyphicon glyphicon-trash"></i>  Delete</button>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
Add the below css
.form-control {width:150px} /*the width you want*/
make sure it renders after your bootstrap css. You are however getting rid of the responsiveness of the row that contains the inputs.
here is a bootply example