I have a modal with some data on it and I need to print it exactly like it is on the modal. I have some JavaScript to print the div where the content is but the problem is the bootstrap classes don't get recognized during the print and so the entire layout changes.
function printDiv() {
var winPrint = window.open();
/*var header = '#include("report/header")';*/
/*var body = '#include("memberpayment/monthlybill")';*/
var body = document.getElementById('printarea').innerHTML;
winPrint.document.write(body);
winPrint.document.close();
winPrint.focus();
winPrint.print();
winPrint.close();
}
my modal:
my print view:
From searching online it seems I need to include the bootstrap library before I write the print content (source)
This did not work for me as when I write a file before it gives a blank 2 pages on my print view. I've tried using the jQuery plugin printThis
4: https://www.jqueryscript.net/other/Customizable-Multiple-Elements-Printing-Plugin-With-jQuery-printThis.html which also did not work out.
in this questionit seems adding a media="print" to the link seemed to work aswell but it didn't work for me.
This is my Modal code:
<div class="container-fluid" id="printarea" style="padding: 2rem 4rem;">
<!-- ----------------------top heading part---------------------- -->
<div class="row" style="border: 1px solid black;">
<div class="col-md-4 center">
#if(file_exists(public_path().'/bzBuilder/images/'.CNF_LOGO) && CNF_LOGO !='')
<img src="{{ asset('bzBuilder/images/'.CNF_LOGO)}}" width="150" alt="{{ CNF_APPNAME }}"/>
#else
<img src="{{ asset('bzBuilder/images/logo.png')}}" width="150" alt="{{ CNF_APPNAME }}"/>
#endif
</div>
<div class="col-md-8 center arial" style="font-weight: bold;">
<p style="padding-top: 1rem;">
Royal Bombay Yacht Club
</p>
<p>
C.S.M Marg, Apollo Bunder, Mumbai - 400001.Tel : +91-22-22021880 / 67527200.
</p>
<p>
Fax : +91-22-2202 1014 Email: rbycmail#vsnl.net & billing#rbyc.co.in
</p>
</div>
</div>
<!-- ----------------------details and address ---------------------- -->
<div class="row">
<div class="col-md-6 col-sm-12 col-xs-12">
<p><b>GODREJ ADI BURJOR ESQ., [G0014 ]</b></p>
<br>
<p>
OFFICE - GODREJ INDUSTRIES LIMITED,
PIROJSHANAGAR, EASTERN EXPRESS HIGHWAY, VIKHROLI, MUMBAI - 400 079
</p>
</div>
<div class="col-md-6 col-sm-12 col-xs-12" style="border: 1px solid black;">
<div class="inline-block col-md-6 col-sm-12 col-xs-12">Membership No: <b>G0014</b></div>
<div class="inline-block col-md-6 col-sm-12 col-xs-12">Bill Dated: <b>21/08/2018</b></div>
<div class="inline-block col-md-6 col-sm-12 col-xs-12">BillRef : <b>G0014-8</b></div>
<div class="inline-block col-md-6 col-sm-12 col-xs-12">Due Date: <b>15/10/2018</b></div>
</div>
</div>
<br>
<!-- ----------------------from/to date ---------------------- -->
<div class="row centerWhenSmall">
<div class="col-md-3 col-sm-12">From: <b>01-Aug-2018</b></div>
<div class="col-md-3 col-sm-12">To: <b>31-Aug-2018</b></div>
</div>
<!-- ----------------------table top part---------------------- -->
<div class="row tablePadding">
<table class="customTable">
<tr>
<th>Narration</th>
<th class="center">Dr.</th>
<th class="center">Cr.</th>
</tr>
</table>
</div>
<!-- ----------------------table mid part---------------------- -->
<div class="row tablePadding2">
<table class="customTable2">
<tr>
<th>BNo:32775 on 21/08/18 - DINING ROOM</th>
<th class="borderBottom center">1,082.00 </th>
<th class="borderBottom center"></th>
</tr>
</table>
</div>
<!-- ----------------------table body---------------------- -->
<div class="row tablePadding3">
<table class="customTable3">
{{--<tr>--}}
{{--<th class="center">Monthly Total : </th>--}}
{{--<th class="center">1,082.00</th>--}}
{{--<th class="center">0.00</th>--}}
{{--</tr>--}}
{{--<tr>--}}
{{--<th class="center">Previous Outstanding : </th>--}}
{{--<th class="borderBottom center">0.00</th>--}}
{{--<th class="borderBottom center">0.00</th>--}}
{{--</tr>--}}
{{--<tr>--}}
{{--<th class="center">Amount Due/Credit Balance : </th>--}}
{{--<th class="borderBottom center">1,082.00</th>--}}
{{--<th class="borderBottom center">0.00</th>--}}
{{--</tr>--}}
</table>
</div>
<br>
<!-- ----------------------disclaimer---------------------- -->
<div class="row">
<div class="col-md-12 col-sm-12 center">
This is a computer generated invoice and does not require signature .
</div>
<div class="col-md-12 col-sm-12">
Bill Dated : 21/08/2018
</div>
<div class="col-md-12 col-sm-12 borderBottom">
<b>To be cleared by : 15/October/2018</b>
</div>
</div>
<!-- ----------------------notice---------------------- -->
<div class="row">
<div class="col-md-12 col-sm-12" style="margin-bottom: 3%;">
IF YOUR BILL SHOWS ARREARS,THEN ENTIRE AMOUNT BE PAID IMMEDIATELY.
</div>
<div class="col-md-12" style="text-decoration: underline;">
Amount Due/Credit Balance Is As On 31 August 2018. Subsequent Payments Will Be Credited In The Following Month.
</div>
<div class="col-md-12">
PAYMENT RECEIVED AFTER DUE DATE ATTRACT DELAYED PAYMENT CHARGES # 2% ON OUTSTANDING AMOUNT
</div>
<div class="col-md-12">
<b style="font-weight: 900">REQUEST INFORM DETAILS OF PAYMENT MADE BY BANK TRANSFER/NEFT/RTGS/ BY EMAIL TO
accounts#rbyc.co.in and billing#rbyc.co.in FOR PROMPT UPDATION OF MEMBERS ACCOUNT</b>
</div>
<div class="col-md-12">
Beneficiary : Royal Bombay Yacht Club
</div>
</div>
<!-- ----------------------bank details---------------------- -->
<div class="row">
<div class="col-md-6">
<b style="font-weight: 800">HDFC BANK</b><br>
REGAL CINEMA BUILDING,<br>
SHAHID BHAGATSINGH ROAD,<br>
MUMBAI - 400 039<br>
Current Account No : <b>00852530000017</b><br>
SWIFT NO: <b>HDFCINBB</b> [ OVERSEAS TRANSFER ]*<br>
IFSC NO: <b>HDFC0000085</b> [ IN INDIA TRANSFER ] *
</div>
<div class="col-md-6">
<b style="font-weight: 800">YES BANK LTD.</b><br>
Mittal Chambers, Nariman Point,<br>
MUMBAI - 400 021<br>
Savings Account No : <b>000494600000162</b><br>
SWIFT NO : <b>YESBINBB</b> [ OVERSEAS TRANSFER]*<br>
IFSC NO : <b>YESB0000004</b> [ IN INDIA TRANSFER ]*
</div>
</div>
<!-- ----------------------notice 2---------------------- -->
<div class="row">
<div class="col-md-12" style="font-weight: 900">
MEMBERS ARE REQUESTED TO CARRY THEIR MEMBERSHIP CARD AND PRODUCE IT WHEN PLACING AN
ORDER.THIS IS TO AVOID ANY ERRORS IN BILLING.
</div>
</div>
<!-- ----------------------vat tin pan gst---------------------- -->
<div class="row">
<div class="col-md-9" style="font-size: 1.3rem; width: 70%;">
<div class="col-md-4">VAT TIN : 27720003820V</div>
<div class="col-md-4">PAN : AAAAR0071R</div>
<div class="col-md-4">GST : 27AAAAR0071R1Z7</div>
</div>
<div class="col-md-6"></div>
</div>
<!-- ----------------------bottom paragraph---------------------- -->
<div class="row">
<div class="col-md-12">
I/We certify that our S.T registration Certificate under B.S.T Act 1959 is in force on the date on which the sale of the goods
specified in this bill/cash memorandum and that the transactions of sale covered by this bill/cash memorandum has been
effected by us in the regular course of our business.
</div>
</div>
<!-- ----------------------disclaimer 2---------------------- -->
<div class="row">
<div class="col-md-12 col-sm-12 center">
This is a computer generated invoice and does not require signature .
</div>
</div>
<!-- ----------------------bottom---------------------- -->
<div class="row" style="margin-top: 20%;">
<div class="col-md-12 center">
--------------------------------------PLEASE TEAR OFF AND SEND THIS WITH YOUR CASH/CHEQUE------------------------------------
</div>
<div class="col-md-12 center">
I am sending herewith cash/cheque for Rs.___________________ in payment of BillRef :
G0014-8 dated: 21/08/2018 Name: GODREJ ADI BURJOR ESQ., [G0014 ]
</div>
</div>
<!-- ----------------------print---------------------- -->
</div>
<div class="row" style="margin-bottom: 5%; ">
<div class="col-md-5"></div>
<div class="col-md-3">
<button style="text-align: center;" type="button" onclick='printDiv();' class="btn btn-primary btn-sm print-bill"><i
class="fa fa-print"></i> Print
</button>
<!-- <button style="text-align: center;" type="button" class="btn btn-primary btn-sm print-bill">
<i class="fa fa-print"></i> Print
</button> -->
<button type="button" class="btn btn-info btn-sm pay-bill" data-toggle="modal" data-target="#paybill">PAY
</button>
</div>
<div class="col-md-4"></div>
</div>
When creating Html for printing, kindly note that the element css floating doesn't work very well in cross browser for HTML printing.
so, to quick fix your issue, kindly add below css inside the modal HTML (at the beginning) -
<style>
/* this stylesheet is used when generating a PDF */
/* define a page */
#page {
size: auto; /* OR 6.5in 8.5in; A4 */
margin-top: 0.5cm;
margin-left: 0.5cm;
margin-right: 0.5cm;
}
#media print {
[class*="col-md-"] {
float: none;
display:table-cell;
}
[class*="col-lg-"] {
float: none;
display:table-cell;
}
}
</style>
Additionally, in your html there is scope to do the refinements to make it more compatible for printing.
I hope this may help you.
Related
I have changed the margin in the row in the CSS file but it wont applied in small devices
<body style="background-color: #353839;">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<h1 class="text-center mt-2" style="color: white;">Cyber Cloud</h1>
</div>
</div>
<div class="row r1 " style="background-color: black; ">
<div class="col-12 ">
<h3 class="text-center" style="color: white;">Join Now</h3>
<p class="text-center" style="color: white;">And Start Buying Games</p>
</div>
<div class="row ">
<div class="col-12 r2">
<input type="text" placeholder="Email"/>
</div>
</div>
</div>
</div>
My CSS:
.r1{
margin-left: 500px;
margin-right: 500px;
}
I have tried to apply bootstrap responsive CSS(added d-none d-lg-block) yet it doesn't work .
try to use media queries in css and set the display width of a device, use developer tools to change display width to simulate a device
#media only screen and (max-width: 600px){
.r1{
margin-left: 500px;
margin-right: 500px;
}
}
hope this works
Try this code.
Bootstrap 4 and 5 give you the ability to display or not to display an element.
I added d-md-none in that row you want to show in the small device, and it will not show on the wide devices.
<div class="container-fluid">
<div class="row">
<div class="col-12">
<h1 class="text-center mt-2" style="color: black;">Cyber Cloud</h1>
</div>
</div>
<div class="row d-md-none" style="background-color: black; ">
<div class="col-12 ">
<h3 class="text-center" style="color: white;">Join Now</h3>
<p class="text-center" style="color: white;">And Start Buying Games</p>
</div>
<div class="row ">
<div class="col-12 r2">
<input type="text" placeholder="Email"/>
</div>
</div>
</div>
</div>
I am currently working on an application where the user gets a list a bunch of divs with details on them, there are also hidden details in each div that can be toggled by the user. The issue is that when you click on "details" for one box it toggles the class on all boxes rather than just within the one that was clicked. I was looking for an answer to this issue and have come up with trying to auto-increment the ID's/Class so that each box that is created will have a unique identifier. I need to make it so that the "extra-details" is only opened in relation to the card "details" is clicked on. Thank you in advance for any help.
My Code
$(".card-details").on("click", function (e) {
e.preventDefault();
$(".extra-details").toggleClass("hidden");
});
h4 {
padding:10px 0 0 5px;
font-size:18px;
font-weight:bold;
}
.card {
border:none;
box-shadow:2px 2px 5px rgba(201,201,201, .5);
padding:5px;
margin:5px;
max-width:350px;
background:transparent;
border:1px solid #efefef;
font-size:12px;
}
hr {
border:1px solid #efefef;
width:100%;
margin-top:0;
}
.card-head {
color:#005ABB;
}
.card-container{
margin-top:20px;
margin-left:5px;
}
.card-info {
margin-left:20px;
background:transparent !important;
}
.card-details {
color:#005ABB;
margin-left:85%;
}
.card-details:hover {
text-decoration:underline;
color:#F9A51B;
cursor:pointer;
}
.hidden{
display:none !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<div class="container">
<div class="row card-container">
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 card">
<h4 class="card-head">20 Foot Titan Chassis</h4>
<hr>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Equipment Type
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Available Quantity
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Selected Quantity
</div>
</div>
<div class="col-xs-12 card-details">
Details
</div>
<div class="row extra-details hidden">
<div class="col-xs-12 card-info">
Address: Test Address
</div>
<div class="col-xs-12 card-info">
Hours of Operation: Weekdays 9AM - 5PM
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 card">
<h4 class="card-head">20 Foot Titan Chassis</h4>
<hr>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Equipment Type
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Available Quantity
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Selected Quantity
</div>
</div>
<div class="col-xs-12 card-details">
Details
</div>
<div class="row extra-details hidden">
<div class="col-xs-12 card-info">
Address: Test Address
</div>
<div class="col-xs-12 card-info">
Hours of Operation: Weekdays 9AM - 5PM
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 card">
<h4 class="card-head">20 Foot Titan Chassis</h4>
<hr>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Equipment Type
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Available Quantity
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Selected Quantity
</div>
</div>
<div class="col-xs-12 card-details">
Details
</div>
<div class="row extra-details hidden">
<div class="col-xs-12 card-info">
Address: Test Address
</div>
<div class="col-xs-12 card-info">
Hours of Operation: Weekdays 9AM - 5PM
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 card">
<h4 class="card-head">20 Foot Titan Chassis</h4>
<hr>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Equipment Type
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Available Quantity
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Selected Quantity
</div>
</div>
<div class="col-xs-12 card-details">
Details
</div>
<div class="row extra-details hidden">
<div class="col-xs-12 card-info">
Address: Test Address
</div>
<div class="col-xs-12 card-info">
Hours of Operation: Weekdays 9AM - 5PM
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 card">
<h4 class="card-head">20 Foot Titan Chassis</h4>
<hr>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Equipment Type
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Available Quantity
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Selected Quantity
</div>
</div>
<div class="col-xs-12 card-details">
Details
</div>
<div class="row extra-details hidden">
<div class="col-xs-12 card-info">
Address: Test Address
</div>
<div class="col-xs-12 card-info">
Hours of Operation: Weekdays 9AM - 5PM
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 card">
<h4 class="card-head">20 Foot Titan Chassis</h4>
<hr>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Equipment Type
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Available Quantity
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Selected Quantity
</div>
</div>
<div class="col-xs-12 card-details">
Details
</div>
<div class="row extra-details hidden">
<div class="col-xs-12 card-info">
Address: Test Address
</div>
<div class="col-xs-12 card-info">
Hours of Operation: Weekdays 9AM - 5PM
</div>
</div>
</div>
</div>
</div>
</div>
$(this).siblings('.extra-details').toggleClass('hidden') will achieve what you want.
Also note, your 'details' element is not actually a link, only styled like one, so you don't need the e.preventDefault() line.
Try:
$(".card-details").on("click", function (e) {
e.preventDefault();
$(this).siblings(".extra-details").toggleClass("hidden");
});
This works for me.
I just changed the javascript code as shown below.
$(".card-details").click(function() {
$(this).closest(".card").find(".extra-details").toggleClass("hidden");
});
h4 {
padding:10px 0 0 5px;
font-size:18px;
font-weight:bold;
}
.card {
border:none;
box-shadow:2px 2px 5px rgba(201,201,201, .5);
padding:5px;
margin:5px;
max-width:350px;
background:transparent;
border:1px solid #efefef;
font-size:12px;
}
hr {
border:1px solid #efefef;
width:100%;
margin-top:0;
}
.card-head {
color:#005ABB;
}
.card-container{
margin-top:20px;
margin-left:5px;
}
.card-info {
margin-left:20px;
background:transparent !important;
}
.card-details {
color:#005ABB;
margin-left:85%;
}
.card-details:hover {
text-decoration:underline;
color:#F9A51B;
cursor:pointer;
}
.hidden{
display:none !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<div class="container">
<div class="row card-container">
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 card">
<h4 class="card-head">20 Foot Titan Chassis</h4>
<hr>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Equipment Type
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Available Quantity
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Selected Quantity
</div>
</div>
<div class="col-xs-12 card-details">
Details
</div>
<div class="row extra-details hidden">
<div class="col-xs-12 card-info">
Address: Test Address
</div>
<div class="col-xs-12 card-info">
Hours of Operation: Weekdays 9AM - 5PM
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 card">
<h4 class="card-head">20 Foot Titan Chassis</h4>
<hr>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Equipment Type
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Available Quantity
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Selected Quantity
</div>
</div>
<div class="col-xs-12 card-details">
Details
</div>
<div class="row extra-details hidden">
<div class="col-xs-12 card-info">
Address: Test Address
</div>
<div class="col-xs-12 card-info">
Hours of Operation: Weekdays 9AM - 5PM
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 card">
<h4 class="card-head">20 Foot Titan Chassis</h4>
<hr>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Equipment Type
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Available Quantity
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Selected Quantity
</div>
</div>
<div class="col-xs-12 card-details">
Details
</div>
<div class="row extra-details hidden">
<div class="col-xs-12 card-info">
Address: Test Address
</div>
<div class="col-xs-12 card-info">
Hours of Operation: Weekdays 9AM - 5PM
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 card">
<h4 class="card-head">20 Foot Titan Chassis</h4>
<hr>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Equipment Type
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Available Quantity
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Selected Quantity
</div>
</div>
<div class="col-xs-12 card-details">
Details
</div>
<div class="row extra-details hidden">
<div class="col-xs-12 card-info">
Address: Test Address
</div>
<div class="col-xs-12 card-info">
Hours of Operation: Weekdays 9AM - 5PM
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 card">
<h4 class="card-head">20 Foot Titan Chassis</h4>
<hr>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Equipment Type
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Available Quantity
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Selected Quantity
</div>
</div>
<div class="col-xs-12 card-details">
Details
</div>
<div class="row extra-details hidden">
<div class="col-xs-12 card-info">
Address: Test Address
</div>
<div class="col-xs-12 card-info">
Hours of Operation: Weekdays 9AM - 5PM
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 card">
<h4 class="card-head">20 Foot Titan Chassis</h4>
<hr>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Equipment Type
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Available Quantity
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Selected Quantity
</div>
</div>
<div class="col-xs-12 card-details">
Details
</div>
<div class="row extra-details hidden">
<div class="col-xs-12 card-info">
Address: Test Address
</div>
<div class="col-xs-12 card-info">
Hours of Operation: Weekdays 9AM - 5PM
</div>
</div>
</div>
</div>
</div>
</div>
Here's the first page that the a href='' code is working .
moneypro.online/website-design
<div class="row animate-box fadeInUp animated-fast">
<!-- Tabs -->
<div class="gtco-tab-content tab-content animated-fast active fadeIn" data-tab-content="1">
<div class="col-md-6">
<div class="gtco-video gtco-bg gtco-image img-responsive" style="background-image: url(/WebsiteDesign.png); background-size: contain; ">
</div>
</div>
<div class="col-md-6">
<h2>Website Design</h2>
<p>As a business start with an idea, an online identity starts with a design concept. Here at Euro ITS we listen to client business goals and incorporate it within our design. Together with our knowledge of digital marketing, our website designs are: </p>
<div class="row">
<div class="col-md-12">
<h4>✔ Responsive</h4>
</div>
<div class="col-md-12">
<h4>✔ User oriented</h4>
</div>
<div class="col-md-12">
<h4>✔ Search engine ready</h4>
</div>
</div>
<div class="row">
<div class="col-md-4">
<button type="button" class="btn btn-success btn-block">Appointment</button>
</div>
<div class="col-md-4">
<button type="button" class="btn btn-info btn-block">Inquiry</button>
</div>
<div class="col-md-4">
<button type="button" class="btn btn-warning btn-block">Pricing</button>
</div>
</div>
</div>
</div>
</div>
and here is the other page that the a href='' code does not work.
moneypro.online/services
<div class="gtco-tab-content-wrap" style="height: 643px;" data-section="services">
<div class="gtco-tab-content tab-content animated-fast active fadeIn" data-tab-content="1">
<div class="col-md-6 col-sm-12 col-xs-12">
<div class="gtco-video gtco-bg img-responsive" style="background-image: url(assets/public/images/icons/WebsiteDesign.png); background-size: contain; ">
</div>
</div>
<div class="col-md-6 col-sm-12 col-xs-12">
<div class="row">
<div class="col-md-12">
<div class="panel">
<div class="panel panel-heading panel-cust-bg">
<h2 class="cust-txt"><strong>Website Design</strong></h2>
</div>
<div class="panel-body">
<div class="row">
<div class="col-md-12">
<p>As a business start with an idea, an online identity starts with a design concept. Here at Euro ITS we listen to client business goals and incorporate it within our design. Together with our knowledge of digital marketing, our website designs are: </p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h4>✔ Responsive</h4>
</div>
<div class="col-md-12">
<h4>✔ User oriented</h4>
</div>
<div class="col-md-12">
<h4>✔ Search engine ready</h4>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<a href="/contact" class="btn btn-success btn-block" role="button" >Appointment</a>
</div>
<div class="col-md-4">
Inquiry
</div>
<div class="col-md-4">
Pricing
</div>
</div>
</div>
</div>
they're are exactly the same and i don't know why the other page is working . here's the live website of it
live example
Can someone please explain it to me.
Ok, here is the difference between the two:
Working:
<a href="/contact">
<button type="button" class="btn btn-success btn-block">
Appointment
</button>
</a>
Not Working:
<a href="/contact" class="btn btn-success btn-block" role="button">
Appointment
</a>
You are adding class btn to "a" tag, and it thinks the tag is a button so it ignores href attribute.
Every href element needs a corresponding anchor which should be a name or id attribute and it must match/exist in the page.
This example by w3schools show a good practice of href.
I have an input that will filter out a list of users.
<!-- Input -->
<input type="text" ng-model="search">
<div ng-repeat="obj in data | filter:search" ng-show="search.$touched" >
<div class="row">
<!-- Country -->
<div class="col-xs-4 text-center" >
<p>[[obj.country]]</p>
<img src="data:image/png;base64,[[obj.flag]]" alt="" width="30px">
</div>
<!-- Main Info -->
<div class="col-xs-4" >
<p class="company-name">[[obj.user.username]]</p>
<p>[[obj.obj.phone_public]]</p>
<p>[[obj.user.email]]</p>
[[obj.obj.url]]</span> <span class="col span_2_of_6">
</div>
<!-- Logo -->
<div class="col-xs-4 pull-right" >
<img src="data:image/png;base64,[[obj.logo]]" alt="" width="100px">
</div>
</div>
<br><hr>
</div>
The filter functionality working great, but I am trying to hide it at first and only show it when the input has been modified.
Before adding ng-show="search.$touched"
After adding ng-show="search.$touched"
Should I use a different directive ?
Now nothing is displaying ...
The key part is : ng-show="search" will check for the presence of any search characters
<!-- Input -->
<input type="text" ng-model="search">
<div ng-repeat="obj in data | filter:search" ng-show="search" >
<div class="row">
<!-- Country -->
<div class="col-xs-4 text-center" >
<p>[[obj.country]]</p>
<img src="data:image/png;base64,[[obj.flag]]" alt="" width="30px">
</div>
<!-- Main Info -->
<div class="col-xs-4" >
<p class="company-name">[[obj.user.username]]</p>
<p>[[obj.obj.phone_public]]</p>
<p>[[obj.user.email]]</p>
[[obj.obj.url]]</span> <span class="col span_2_of_6">
</div>
<!-- Logo -->
<div class="col-xs-4 pull-right" >
<img src="data:image/png;base64,[[obj.logo]]" alt="" width="100px">
</div>
</div>
<br><hr>
</div>
Pardon my jargon, I just recently got into web development and have poor communication skills.
I'm using bootstrap 4 alpha and JQuery 3.
I have a chatroom within one fluid container with two rows: a send-message bar and a recieve message column(plus the pm column and userlist column)
Here is my code:
<div class="container-fluid">
<div class="row">
<!-- Chat View Column -->
<div class="col-sm-2">
<ul id="privateChats" class="list-group fixed" style=" margin-top:20px;">
</ul>
</div>
<!-- Message View Column -->
<div class="col-sm-8" style="float: left;">
<ul class="" id="messages" style="margin: 20px;"></ul>
</div>
<!-- Connected Users Column -->
<div class="col-sm-2">
<ul id="connectedUsers" class="list-group fixed" style=" margin-top:20px">
<div class="btn-group-vertical" style="width:100%">
</div>
</ul>
</div>
</div>
<!-- Send message bar -->
<div class="row">
<form action="">
<div class="col-lg-9 col-md-9 text-right">
<input type="text" id="m" style="width:100%; height:55px;" class="form-control" placeholder="Message" autocomplete="off" />
</div>
<div class="col-lg-3 col-md-3 text-left">
<button style="width:50%"><span class="fa fa-paper-plane" style="font-size:38px; color:white;"></span></button>
</div>
</form>
</div>
</div>
When the "Message View Column" fills up, text disappears behind the second row and I can't see the most recent messages. How do I fix this?
Let me know if I should add more detail
I added the Javascript tag because I'm not opposed to using Javascript to solve the problem
Adding a margin-bottom: 98px; (height of the 2nd .row) to the css of the 1st .row, would solve your problem. Then you can use scrollBy(0, 100) to scroll the page to the bottom (used 100 as example)