Convert API to Wordpress Plugin - wordpress

I have a created a table that use simple JS and an API to pull in info about our Android App. We would like to have this code on multiple pages
<div class="api">
<div style="margin: 0 auto; max-width: 700px;">
<div style="float: left;">
<table style="background-color: #e7e7e27; border-color: #e2e2e2;">
<td style="vertical-align: middle; text-align: center; background: #e2e2e2; border-top: 0px; ">
<a rel="nofollow" href="https://play.google.com/store/apps/<!---package name--->" class="no_ul external" target="_blank">
<img src="http://developer.android.com/images/brand/Google_Play_Store_96.png" style="width:90px; border:0" alt="<!---Verbage--->" title="<!---Verbage--->">
</a>
</td>
</table>
</div>
<div style="float: left;">
<div class='appbrain-app'>
<a href='http://www.appbrain.com/app/<!---package name--->' style='font-size: 11px; color: #555; font-family: Arial, sans-serif;'>
</a>
</div>
<script type='text/javascript' language='javascript' src='http://www.appbrain.com/api/api.nocache.js'></script>
</div>
</div>
</div>
Not the prettiest code but it does the job that I we are wanting. I would like to turn this into a plugin with a shortcode to reference it. I know that this is probably bigger then I expect and I have a good understanding of HTML and wordpress but this is the first plugin I have created.
Thanks,
Grady

A plugin to do this is fairly trivial since you are just echoing static data.
class My_App_Data {
function __construct() {
add_shortcode('app_data',array($this,'app_data_shortcode'));
}
function app_data_shortcode() { ?>
<div class="api">
<div style="margin: 0 auto; max-width: 700px;">
<div style="float: left;">
<table style="background-color: #e7e7e27; border-color: #e2e2e2;">
<td style="vertical-align: middle; text-align: center; background: #e2e2e2; border-top: 0px; ">
<a rel="nofollow" href="https://play.google.com/store/apps/<!---package name--->" class="no_ul external" target="_blank">
<img src="http://developer.android.com/images/brand/Google_Play_Store_96.png" style="width:90px; border:0" alt="<!---Verbage--->" title="<!---Verbage--->">
</a>
</td>
</table>
</div>
<div style="float: left;">
<div class='appbrain-app'>
<a href='http://www.appbrain.com/app/<!---package name--->' style='font-size: 11px; color: #555; font-family: Arial, sans-serif;'></a>
</div>
<script type='text/javascript' language='javascript' src='http://www.appbrain.com/api/api.nocache.js'></script>
</div>
</div>
</div><?php
}
}
new My_App_data();
You can now use [app_data /] to display the markup.
You will need to construct a proper plugin header, and use a better name for the class :).
Reference
https://codex.wordpress.org/Writing_a_Plugin

Related

Convert style and html to gmail capable

I tried many times on sending an html with style email to gmail, but it always destroy the style it expected look like in normal HTML. Anyone could kindly help me to convert it to gmail capable that must look exactly the same it should be? Thank you.
<div style="display: flex;justify-content: center;">
<div class="container" style="font-family: 'Manrope-Regular';max-width: 600px;border-style: solid;border-color: #7E7E7E;position: relative;height: fit-content;border-width: 1px;">
<img class="top-bg" src="https://saas-staging-wp.chatsmart.io/wp-content/uploads/revslider/slider-1/1-Path 842 (1).png" style="max-width: 255px;position: absolute;right: 0;">
<img class="bottom-bg" src="https://saas-staging-wp.chatsmart.io/wp-content/uploads/revslider/slider-1/1-Path 841.png" style="position: absolute;left: 0;bottom: 0;max-width: 270px;">
<div class="logo" style="font-family: 'Manrope-Regular';">
<img src="https://chatsmart-saas.s3.ap-east-1.amazonaws.com/wp/images/2021/01/08030440/mobile-menu-logo.png" style="margin: 41px auto;display: block;">
</div>
<div class="content" style="font-family: 'Manrope-Regular';margin: 0 100px;">
<p class="header" style="font-family: 'Manrope-Regular';">Hi [first_name] [last_name],</p>
<p class="para" style="font-family: 'Manrope-Regular';">Welcome to ChatSmart! Experience the powerful ChatSmart features to let you easily reach your customers. Not only increase customers loyalty through broadcast messages, but also lower abandon cart rate by supporting eCommerce platforms. Create your sales revenue by 24 / 7 answer customers' enquiries!
</p>
<p class="para" style="font-family: 'Manrope-Regular';">
<strong>Some popular resources which would be useful for you:</strong>
</p>
<ul>
<li style="font-weight: 400;"><span style="font-weight: 400;">How to login & connect WhatsApp? (Cantonese)</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">How to start the chat with your customer? (Cantonese)</span></li>
</ul>
<br>
<p class="para" style="font-family: 'Manrope-Regular';">
For more support, you may find below:
</p>
<ul>
<li style="font-weight: 400;"><span style="font-weight: 400;">ChatSmart User Guide (Traditional Chinese)</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">Technical Support</span></li>
</ul>
<br>
<p class="para" style="font-family: 'Manrope-Regular';">Click below button to start your journey in ChatSmart!</p>
<a class="button button-text" href="[link]" style="justify-content: center;display: flex;">
<img style="max-width: 206px;" src="https://chatsmart-saas.s3.ap-east-1.amazonaws.com/wp/images/2021/01/21125343/login.png"/>
</a>
<br>
<p class="para" style="font-family: 'Manrope-Regular';">More super practical content is on the way, stay tuned!</p>
<br>
<p class="para" style="font-family: 'Manrope-Regular';">Thanks,</p>
<br>
<p class="signature" style="font-family: 'Manrope-Regular';font-weight: bold;">
ChatSmart Team<br>
Your Best WhatsApp Marketing Platform
</p>
<br>
<div class="soscial" style="font-family: 'Manrope-Regular';">
<img src="https://chatsmart-saas.s3.ap-east-1.amazonaws.com/wp/images/2021/01/06145810/Group-764.png" style="margin-right: 20px;">
<img src="https://chatsmart-saas.s3.ap-east-1.amazonaws.com/wp/images/2021/01/06150156/1-Group%20766.png" style="margin-right: 20px;">
</div>
<br>
<div class="footer" style="font-family: 'Manrope-Regular';text-align: center;font-size: 8px;margin-bottom: 20px;">
©2021 ChatSmart, Inc. All rights reserved.
</div>
</div>
</div>
</div>
Updated: Included a version of style and head block.
<html>
<head>
<style>
#font-face {
font-family: 'Manrope-Regular';
src: url('https://saas-staging.chatsmart.io/font/Manrope-Regular.ttf') format("opentype");
}
p, div {
font-family: 'Manrope-Regular';
}
body{
display: flex;
justify-content: center;
}
.container {
max-width: 600px;
border-style: solid;
border-color: #7E7E7E;
position: relative;
height: fit-content;
border-width: 1px;
}
.top-bg {
max-width: 255px;
position: absolute;
right: 0;
}
.bottom-bg {
position: absolute;
left: 0;
bottom: 0;
max-width: 270px;
z-index: -1;
}
.logo img {
margin: 41px auto;
display: block;
}
.content {
margin: 0 100px;
}
a.button {
text-decoration: none;
}
.signature {
font-weight: bold;
}
.soscial img {
margin-right: 20px;
}
.footer {
text-align: center;
font-size: 8px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="container">
<img class="top-bg" src="https://saas-staging-wp.chatsmart.io/wp-content/uploads/revslider/slider-1/1-Path 842 (1).png" />
<img class="bottom-bg" src="https://saas-staging-wp.chatsmart.io/wp-content/uploads/revslider/slider-1/1-Path 841.png" />
<div class="logo">
<img src="https://chatsmart-saas.s3.ap-east-1.amazonaws.com/wp/images/2021/01/08030440/mobile-menu-logo.png" />
</div>
<div class="content">
<p class="header">Hi [first_name] [last_name],</p>
<p class="para">Welcome to ChatSmart! Experience the powerful ChatSmart features to let you easily reach your customers. Not only increase customers loyalty through broadcast messages, but also lower abandon cart rate by supporting eCommerce platforms. Create your sales revenue by 24 / 7 answer customers' enquiries!
</p>
<p class="para">
<strong>Some popular resources which would be useful for you:</strong>
</p>
<ul>
<li style="font-weight: 400;"><span style="font-weight: 400;">How to login & connect WhatsApp? (Cantonese)</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">How to start the chat with your customer? (Cantonese)</span></li>
</ul>
<br/>
<p class="para">
For more support, you may find below:
</p>
<ul>
<li style="font-weight: 400;"><span style="font-weight: 400;">ChatSmart User Guide (Traditional Chinese)</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">Technical Support</span></li>
</ul>
<br/>
<p class="para">Click below button to start your journey in ChatSmart!</p>
<a class="button button-text" href="[link]" style="justify-content: center;display: flex;">
<img style="max-width: 206px;" src="https://chatsmart-saas.s3.ap-east-1.amazonaws.com/wp/images/2021/01/21125343/login.png"/>
</a>
<br/>
<p class="para">More super practical content is on the way, stay tuned!</p>
<br/>
<p class="para">Thanks,</p>
<br/>
<p class="signature">
ChatSmart Team<br/>
Your Best WhatsApp Marketing Platform
</p>
<br/>
<div class="soscial">
<img src="https://chatsmart-saas.s3.ap-east-1.amazonaws.com/wp/images/2021/01/06145810/Group-764.png" />
<img src="https://chatsmart-saas.s3.ap-east-1.amazonaws.com/wp/images/2021/01/06150156/1-Group%20766.png" />
</div>
<br/>
<div class="footer">
©2021 ChatSmart, Inc. All rights reserved.
</div>
</div>
</div>
</body>
</html>
You need a complete redesign. You can't develop emails like websites, because there are lots of restrictions. For example, you need to write code inline, not rely on embedded CSS (within <style>...</style>); and things like divs and flexbox are temperamental - see caniemail.com.
Check out any HTML email template, or HTML email course, and then make sure you test in a variety of email clients on a variety of devices.

Using Bootstrap Grid, Why Can I Not Space Out My Divs?

I'm working on my first web dev portfolio and am trying to incorporate the Bootstrap Grid system to the project links. I've searched through Bootstrap's documentation (v4.5), Stack Overflow, and just googling various searches to death. I've tried every solution I've found and am still getting nowhere. The closest I've come to a result is changing all three col-lg-4 to col-lg33. That did create the space, but then the padding looked super weird and it was more space than I needed. Any help would be super appreciated. I'm a but of a noob still.
<section id="projects">
<h2>My Work</h2>
<div class="container">
<div class="row justify-content-around">
<div class="col-lg-4 col-md-6 projects-grid">
<a href="https://briafly27.github.io/TechnicalDocumentAssignment/" target="_blank">
<img class="project-image" src="Images/TechnicalDoc.png" alt="project"/>
<p class="project-title">CSS Technical Document</p>
</a>
</div>
<div class="col-lg-4 col-md-6 projects-grid">
<a href="https://briafly27.github.io/Javascript30DrumKit/" target="_blank">
<img class="project-image" src="Images/JavascriptDrumkit.png" alt="project"/>
<p class="project-title">Javascript Drumkit</p>
</a>
</div>
<div class="col-lg-4 col-md-6 projects-grid">
<a href="https://briafly27.github.io/FirstPersonalSite/" target="_blank">
<img class="project-image" src="Images/FirstPersonalSite.png" alt="project"/>
<p class="project-title">First Personal Site</p>
</a>
</div>
</div>
</div>
</section>
#projects {
background: #3F3F44;
color: #f7f7f7;
font-family: 'Raleway', sans-serif;
height: 100vh;
}
#projects h2 {
text-shadow: 1px 1px #fdcb9e;
text-align: center;
padding: 60px;
}
.projects-grid {
background-color: #fdcb9e;
box-shadow: 5px 8px black;
border-radius: 10px;
padding: 1% 0;
}
.projects-grid:hover {
background-color: #cceabb;
box-shadow: 7px 10px black;
}
.projects-grid a {
text-decoration: none;
color: #3f3f44;
text-shadow: 1px 1px #cceabb;
}
.project-image {
height: 100%;
max-height: 170px;
width: 100%;
max-width: 300px;
border-radius: 10px;
border: 2px solid #cceabb;
display: flex;
margin: 0 auto;
}
.project-image:hover {
border: 2px solid #fdcb9e;
}
.project-title {
font-size: 1.5rem;
font-weight: 700;
padding-top: 8px;
padding-bottom: 4px;
margin: 0;
text-align: center;
}
Bootstrap is adding the column guttering as a 15px padding, by styling the layout there, you are also styling the padding that is the guttering, hence the project grid 'cards' are touching.
For this, to keep the guttering and to ensure nice even columns, I would style a nested div instead.
<div class="col-md-4">
<div class="projects-grid">
<a href="https://briafly27.github.io/TechnicalDocumentAssignment/" target="_blank">
<img class="project-image" src="Images/TechnicalDoc.png" alt="project" />
<p class="project-title">CSS Technical Document</p>
</a>
</div>
</div>
If the guttering is too large, you can change the sass variable (it's set to 30px by default) or you can use .no-gutters to remove all the guttering and add the padding manually to the nested divs.
<div class="row no-gutters">
<div class="col-md-4 p-2">
<div class="projects-grid">
<a href="https://briafly27.github.io/TechnicalDocumentAssignment/" target="_blank">
<img class="project-image" src="Images/TechnicalDoc.png" alt="project" />
<p class="project-title">CSS Technical Document</p>
</a>
</div>
</div>
</div>
I've created this link on Codepen to try understanding better the problem so that we can help you better:
https://codepen.io/maricaldas/pen/ExPKNzM
<section id="projects">
<h2>My Work</h2>
<div class="container">
<div class="row justify-content-around">
<div class="col-lg-3 col-md-6 projects-grid">
<a href="https://briafly27.github.io/TechnicalDocumentAssignment/" target="_blank">
<img class="project-image" src="Images/TechnicalDoc.png" alt="project" />
<p class="project-title">CSS Technical Document</p>
</a>
</div>
<div class="col-lg-3 col-md-6 projects-grid">
<a href="https://briafly27.github.io/Javascript30DrumKit/" target="_blank">
<img class="project-image" src="Images/JavascriptDrumkit.png" alt="project" />
<p class="project-title">Javascript Drumkit</p>
</a>
</div>
<div class="col-lg-3 col-md-6 projects-grid">
<a href="https://briafly27.github.io/FirstPersonalSite/" target="_blank">
<img class="project-image" src="Images/FirstPersonalSite.png" alt="project" />
<p class="project-title">First Personal Site</p>
</a>
</div>
</div>
</div>
</section>
Do you mean you want a space separating the project-grid columns?
If so, the first thing we need to consider is that when we use 3 columns taking 4 spaces each, we're using the full grid, which is 12, and that's why we can't see spaces around those col-lg-4 columns.
Can you please elaborate a little bit more on the result you want to achieve?
Maybe a way to add that space among the columns while using col-lg-4 is to overwrite the bootstrap pre-set width, which is 33.33%.
#media (min-width: 992px) {
.col-lg-4 {
-ms-flex: 0 0 32%;
flex: 0 0 32%;
max-width: 32%;
}
}

Angular 7 - ngx-spinner covering the whole page

I have implemented ngx-spinner in my angular 7 page and set the fullscreen to false as I don't want the header to be covered by the background color of the spinner. It still covers the whole page while rendering. Not sure what the problem is.
Following is the link that I referred to
https://napster2210.github.io/ngx-spinner/
.alert {
margin-top: 10px;
height: 500x;
position: relative;
width: 100%;
/* padding: 15px; */
bottom: 0%;
border: 1px solid transparent;
border-radius: 4px;
float: left;
}
.alert-danger {
background-color: #f2dede;
border-color: #ebccd1;
color: #a94442;
}
table {
border-collapse: collapse;
}
.spacing {
padding-top: 0.5em;
padding-bottom: 0.5em;
}
.k-tabstrip > .k-content.k-state-active {
display: none !important;
}
<div style="overflow-x: hidden; overflow-y: hidden;">
<ngx-spinner bdOpacity=0.9 bdColor="#fff" size="medium" color="grey" type="ball-spin" fullScreen="false">
<p style="color: white"> Loading... </p>
</ngx-spinner>
<div class="form-group row col-md-12" style="margin-top:30px">
<div class="col-md-1">
<label for="inputFax" class="col-form-label" style="font-weight: bold;">Eval Date</label>
<kendo-datepicker style="width: 100% ;float: left;" [format]="'MMMM yyyy'" [topView]="'decade'"
[bottomView]="'year'" [(ngModel)]="evalDate" (valueChange)="evalDateChanged($event)">
</kendo-datepicker>
</div>
<div class="col-md-2" style="padding-left: 10px; width: 100%"><a class="btn btn-primary "
(click)="downloadFundAllocationDetails()" [attr.href]="Url">Export To
EXCEL<i title="PDF" class="fa fa-file-excel-o"></i> </a></div>
</div>
<div class="form-group row">
<div class="panel panel-default col-md-12 ">
<div *ngIf="AllocationDetails && AllocationDetails.ManagerAllocations" class="panel-body">
<div id="grid-wrapper" [style.height.px]="GridHeight()" [style.width.%]="100" style="float: left;">
<span style="text-decoration: underline; cursor: pointer;padding-right: 10px;"><a (click)="expandAll()">Expand
All</a></span>
<span style="text-decoration: underline; cursor: pointer;"><a (click)="collapseAll()">Collapse
All</a></span>
<ag-grid-angular #agGrid class="ag-theme-balham" [gridOptions]="GridOptions" style="width: 100%; height: 100%"
[columnDefs]="ColumnDefs" [rowData]="AllocationDetails.ManagerAllocations" rowHeight="30" headerHeight="30"
rowSelection="single" [pinnedBottomRowData]="pinnedBottomRowData"
[frameworkComponents]="frameworkComponents">
</ag-grid-angular>
</div>
</div>
</div>
</div>
<div class="form-group row">
<div class="panel panel-default col-md-12">
<div style="height: 100%; width: 100%;" *ngIf="AllocationDetails && AllocationDetails.MissingProducts"
class="alert alert-danger col-md-5">
<p><strong>The investments made in the following products are not included in this report:</strong></p>
<table>
<ng-container *ngFor="let group of AllocationDetails.MissingProducts">
<tr>
<th> {{group[0].ProductType}}</th>
</tr>
<tr *ngFor="let post of group">
<td> {{ post.ProductName }} </td>
</tr>
<tr>
<td class="spacing"></td>
</tr>
</ng-container>
</table>
</div>
<div style="height: 100%; width: 100%; float:left;" *ngIf="AllocationDetails && AllocationDetails.ChartData"
class="col-md-7">
<app-pie-chart [series]="allocation_series"></app-pie-chart>
</div>
</div>
</div>
</div>
Wrap it in a div with relative position if you want it to fill the container it's in:
<div style="position: relative">
<ngx-spinner
bdOpacity = 0.9
bdColor = "#f4f4f9"
size = "medium"
color = "#1010ee"
type = "ball-clip-rotate"
[fullScreen] = "false">
</ngx-spinner>
</div>
In your case you forgot the square brackets.
You have to do it like this:
<ngx-spinner bdOpacity=0.9 bdColor="#fff" size="medium" color="grey" type="ball-spin" [fullScreen]="false">
<p style="color: white"> Loading... </p>
</ngx-spinner>
For show it only on layout container div add app-spinner tag after router-outlet :
<div class="col content">
<router-outlet #o="outlet"></router-outlet>
<div class="complement-box"></div>
<ngx-spinner bdColor="rgba(0,0,0,0.32)" size="large" color="#8652d5" type="ball-clip-rotate-multiple"
[fullScreen]="false">
</ngx-spinner>
</div>
For set border of spinner set this style in styles.scss file :
.overlay[_ngcontent-serverApp-c52] {
border-radius: 43px;
height: 106% !important;
margin-top: -1px;
}

CSS Responsive How to arrange pics with title below so that it will auto adjust the size on all phones and iPad [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
I am designing a page to be loaded on phones and iPad. I am trying to figure out how to arrange the pic as follow. 3 columns and 2 rows in container-fluid. The pic and words must resize when switching between phones and iPad. I am only displaying in portrait mode. My current code, I only specify a static height and width for all the pics but how to do it dynamically? I am also using <table> to arrange the pic and wordings, is there a better way by using div. Please help, thanks you very much.
The ideal arrangement:
My results:
JS FIDDLE DEMO
<!-- Bootstrap core CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<style>
* {
box-sizing: border-box;
font-family:Arial;
font-size:12px;
}
img {
width: 100%;
}
div#form-box {
margin-top: -95px;
text-align: center;
}
div#input-group {
width: 90%;
margin: 15px auto 5px; /* top, left and right, bottom */
position: relative;
background-color: #fff;
border: none;
border-radius: 5px;
}
input#searchClasses, label[for="searchClasses"] {
display:inline-block;
vertical-align: middle;
}
input#searchClasses {
width: calc(100% - 40px);
padding: 10px;
border: none;
}
label[for="searchClasses"] {
width: 40px;
line-height: 30px;
}
button#btn-checkin {
display: inline-block;
padding: 8px 20px;
border: none;
border-radius: 5px;
background-color: #EC008c;
color: #fff;
text-align: center;
text-transform: uppercase;
}
.drop-shadow {
-webkit-box-shadow: 0 0 2px 2px rgba(0, 0, 0, .5);
box-shadow: 0 0 10px 1px rgb(211, 211, 211, 0.8);
border-radius:0px;
}
.container-fluid{
width:auto
}
.container-fluid.drop-shadow {
margin-top:2%;
margin-left:5%;
margin-right:5%
}
#content{
width:100%;
margin: auto;
text-align: center;
margin-top: 8px;
}
.form-group {
width:100%;
margin-bottom:10px;
}
.btn-plan {
display: inline-block;
height:48px;
padding: 8px 10px;
margin-bottom: 10px;
border: none;
border-radius: 10px;
background-color: #B9E5FB;
color: #000;
text-align: center;
width:95%
}
.btn-popular {
display: inline-block;
height:48px;
padding: 0px 0px;
white-space: normal;
margin-bottom: 10px;
border: none;
border-radius: 10px;
background-color: #B9E5FB;
color: #000;
text-align: center;
width:95%
}
.textUnderPic{
margin-top:2px;
text-align:center;
font-size:8px;
}
</style>
</head>
<body id="sfitness" >
<img src="https://preview.ibb.co/kJvJ5e/1847p.png" />
<div id="form-box">
<form>
<div id="input-group">
<label for="searchClasses" class="glyphicon glyphicon-search"></label><!--
--><input type="text" placeholder="Search Classes" id="searchClasses" readonly>
</div>
<br/>
<button id="btn-checkin">Check-in</button>
</form>
</div>
<div id="content">
<div class="container-fluid">
<table style="width:100%;margin-left:4%">
<tr>
<td>
<img src="https://image.ibb.co/jWX2Jz/location.png" alt="location" border="0" class="float-left" style="width:17px;height:20px"/>
</td>
<td style="padding-left:9px;padding-top:9px;width:auto;text-align:left">
<p>Current Location <b>Sri Petaling</b></p>
</td>
</tr>
</table>
</div>
<div class="container-fluid drop-shadow">
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="https://preview.ibb.co/nnzPyz/7557.jpg" style="width:104px;height:64px;padding:10px 10px 5px">
</a>
</div>
<div class="media-body">
<h5 class="media-left" style="padding-top:12px;color:#B9E5fB" >PERSONAL TRAINING</h5>
<p class="pull-left" style="padding-top:3px">Strike Academy Fitness</p>
</div>
</div>
</div>
<div class="container-fluid drop-shadow" style="overflow:auto;padding:0px;margin-top:20px">
<table style="width:93%;margin:3%">
<tr>
<td colspan="3">
<p style ="padding-left:5px;padding-top:3px; width:100%;text-align:left">Plan your time</p>
</td>
</tr>
<tr>
<td style="width:33.33%">
<button class="btn-plan" >All</button>
</td>
<td style="width:33.33%">
<button class="btn-plan" >Morning</button>
</td>
<td style="width:33.33%">
<button class="btn-plan">Afternoon</button>
</td>
</tr>
<tr>
<td>
<button class="btn-plan">Evening</button>
</td>
<td>
<button class="btn-plan">Tomorrow</button>
</td>
<td>
<button class="btn-plan">This Week</button>
</td>
</tr>
</table>
</div>
<div class="container-fluid drop-shadow" style="overflow:auto;padding:0px;margin-top:20px">
<table style="width:93%;margin:3%">
<tr>
<td colspan="3">
<p style ="padding-left:5px;padding-top:3px; width:100%;text-align:left">Nearby Class starts in next 60 mins</p>
</td>
</tr>
<tr>
<td style="width:33%;align-self:center">
<div style="width:50%">
<img class="media-object" align="center" src="https://preview.ibb.co/nnzPyz/7557.jpg" alt="Generic placeholder image">
</div>
</td>
<td width="33%">
<img class="media-object" src="https://preview.ibb.co/nnzPyz/7557.jpg" style="width:104px;height:64px;padding:10px 10px 0px 5px" alt="Generic placeholder image">
</td>
<td width="33%">
<img class="media-object" src="https://preview.ibb.co/nnzPyz/7557.jpg" style="width:104px;height:64px;padding:10px 10px 0px 5px" alt="Generic placeholder image">
</td>
</tr>
<tr>
<td>
<p class="textUnderPic"><font color="#00B3F0">Gym</font>Sungai Besi</p>
</td>
<td>
<p class="textUnderPic"><font color="#00B3F0">Muay Thai</font>Sri Pinang</p>
</td>
<td>
<p class="textUnderPic"><font color="#00B3F0">Yoga</font>Serdang</p>
</td>
</tr>
<tr>
<td>
<img class="media-object" src="https://preview.ibb.co/nnzPyz/7557.jpg" style="width:104px;height:64px;padding:10px 10px 0px 5px" alt="Generic placeholder image">
</td>
<td>
<img class="media-object" src="https://preview.ibb.co/nnzPyz/7557.jpg" style="width:104px;height:64px;padding:10px 10px 0px 5px" alt="Generic placeholder image">
</td>
<td>
<img class="media-object" src="https://preview.ibb.co/nnzPyz/7557.jpg" style="width:104px;height:64px;padding:10px 10px 0px 5px" alt="Generic placeholder image">
</td>
</tr>
<tr>
<td>
<p class="textUnderPic" >Gym</font>Sungai Besi</p>
</td>
<td>
<p class="textUnderPic" >Muay Thai</font>Sri Pinang</p>
</td>
<td>
<p class="textUnderPic" >Yoga</font>Serdang</p>
</td>
</tr>
</table>
</div>
</div>
I have updated the fiddle for you. "https://jsfiddle.net/87qughpe/10/"
Some Notes:
Don't know which bootstrap you were using, I have used Bootstrap-4
Don't use table to write that structure, but rather use Boostrap Grid
Let the image expand as per width of container.
.worked-div p {
text-align: left;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid drop-shadow worked-div" style="">
<div class="row">
<div class="col-4">
<img class="img-fluid" align="center" src="https://preview.ibb.co/nnzPyz/7557.jpg" alt="Generic placeholder image">
<p>
Generic placeholder image
</p>
</div>
<div class="col-4">
<img class="img-fluid" align="center" src="https://preview.ibb.co/nnzPyz/7557.jpg" alt="Generic placeholder image">
<p>
Generic placeholder image
</p>
</div>
<div class="col-4">
<img class="img-fluid" align="center" src="https://preview.ibb.co/nnzPyz/7557.jpg" alt="Generic placeholder image">
<p>
Generic placeholder image
</p>
</div>
<div class="row">
<div class="col-4">
<img class="img-fluid" align="center" src="https://preview.ibb.co/nnzPyz/7557.jpg" alt="Generic placeholder image">
<p>
Generic placeholder image
</p>
</div>
<div class="col-4">
<img class="img-fluid" align="center" src="https://preview.ibb.co/nnzPyz/7557.jpg" alt="Generic placeholder image">
<p>
Generic placeholder image
</p>
</div>
<div class="col-4">
<img class="img-fluid" align="center" src="https://preview.ibb.co/nnzPyz/7557.jpg" alt="Generic placeholder image">
<p>
Generic placeholder image
</p>
</div>
</div>

Div tags with float left not printing properly

I have a layout that has a container div tag and some nested floating div tags. I'm using them in this manner to have two column effect (rather than do table cells). On the web page, everything renders fine. But when I print, the floating ones aren't showing up correctly. It's a sequence of 2 sets of container div/floating divs and then a full width div tag (no floating). Here's the code:
<div style="margin-bottom: 5px; border-top: 1px solid #000000; padding: 5px; font-size: 0;">
<div style="display: inline-block; width: 50%; vertical-align: top; font-size: 11px;">
<span style="font-weight: bold;">Provider: </span>
Name here
</div>
<div style="display: inline-block; width: 50%; vertical-align: top; font-size: 11px;">
<span style="font-weight: bold;">Location: </span>
Name<br/>
Street Address<br/>
City, State Zip<br/>
Phone
</div>
</div>
<div style="margin-bottom: 5px; border-top: 1px solid #000000; padding: 5px; font-size: 0;">
<div style="display: inline-block; width: 50%; vertical-align: top; font-size: 11px;">
<span style="font-weight: bold;">Appointments:</span>
<br />
No appointments scheduled
</div>
<div style="display: inline-block; width: 50%; vertical-align: top; font-size: 11px;">
<span style="font-weight: bold;">Care Team:</span>
<br />
Name Here
</div>
</div>
<div style="margin-bottom: 5px; padding: 5px; border-top: 1px solid #000000;">
<span style="font-weight: bold;">Referrals:</span>
<br />
No referrals available
</div>
As stated, everything renders correctly on the web page. Thanks to #avrahamcool I have it fixed so that the top border lines are showing up correctly. However, when I use IE9, I am getting what looks like the following:
Provider: Name here
Location: Name
Street Address
City, State Zip
Phone
Appointments:
No appointments scheduled
Care Team:
Name Here
Referrals:
No referrals available
It's working fine in Chrome. The provider/location and appointments/care team are split into two columns between the border lines when it's printed (and shows up fine on the screen)
I've completely recreated your markup, so I can work with it.
this is the result. (notice how beautiful this is?)
I've tested it in IE10, IE9, IE8, FF, Chrome.
also, printed from each one, and it works like a charm.
If you have to write your HTML & CSS combined (I don't see a reason for that.. but who am I to judge) I will try to help you apply my solution to your HTML.
So, the main Idea is to lose the float thing altogether, and use inline-block instead.
but, inline-block adds extra-spacing to the elements (caused by new-lines in the markup), causing 50% to be a little more than that, therefor making the columns not to fit in one row.
I've used one of many tricks to resolved that issue. by applying font-size:0; on the container, and reapplying font size on his children.
also, I had to verticaly-align:top; the columns.
so, to summarize, this is the end result.
New HTML markup
<div class="Container">
<div class="Column">
<span class="Header">Provider:</span>
<span>Name here</span>
</div>
<div class="Column">
<span class="Header">Location:</span>
<span>Name</span>
<br/>
<span>Street Address</span>
<br/>
<span>City, State Zip</span>
<br/>
<span>Phone</span>
</div>
</div>
<div class="Container">
<div class="Column">
<span class="Header">Appointments:</span>
<br/>
<span>No appointments scheduled</span>
</div>
<div class="Column">
<span class="Header">Care Team:</span>
<br/>
<span>Name Here</span>
</div>
</div>
<div class="Container">
<span class="Header">Referrals:</span>
<br/>
<span>No referrals available</span>
</div>
New CSS
*
{
margin: 0;
padding: 0;
}
.Container
{
margin-bottom: 5px;
border-top: 1px solid #000000;
font-size: 0;
}
.Container *
{
font-size: medium;
}
.Container .Column
{
display: inline-block;
width: 50%;
vertical-align: top;
}
.Container .Header
{
font-weight: bold;
}
Edit:
for some reason, I've dropped your padding. so here is a fiddle with padding in the container (all the rest is the same as before)
Edit 2 inline-style
<div style="margin-bottom: 5px;padding: 5px;border-top: 1px solid #000000;font-size: 0;">
<div style="display: inline-block;width: 50%;vertical-align: top;font-size: medium;">
<span style="font-weight: bold;">Provider:</span>
<span>Name here</span>
</div>
<div style="display: inline-block;width: 50%;vertical-align: top;font-size: medium;">
<span style="font-weight: bold;">Location:</span>
<span>Name</span>
<br/>
<span>Street Address</span>
<br/>
<span>City, State Zip</span>
<br/>
<span>Phone</span>
</div>
</div>
<div style="margin-bottom: 5px;padding: 5px;border-top: 1px solid #000000;font-size: 0;">
<div style="display: inline-block;width: 50%;vertical-align: top;font-size: medium;">
<span style="font-weight: bold;">Appointments:</span>
<br/>
<span>No appointments scheduled</span>
</div>
<div style="display: inline-block;width: 50%;vertical-align: top;font-size: medium;">
<span style="font-weight: bold;">Care Team:</span>
<br/>
<span>Name Here</span>
</div>
</div>
<div style="margin-bottom: 5px;padding: 5px;border-top: 1px solid #000000;">
<span style="font-weight: bold;">Referrals:</span>
<br/>
<span>No referrals available</span>
</div>
Inline-Style V2
so, its probably the font fix that doesn't work for you. It's hard for me to debug, because it's working fine for me. so lets try another approach.
this time, we will eliminate the spacing between columns by deleting the new line from the markup. try this new markup.
<div style="margin-bottom: 5px;padding: 5px;border-top: 1px solid #000000;">
<div style="display: inline-block;width: 50%;vertical-align: top;">
<span style="font-weight: bold;">Provider:</span>
<span>Name here</span>
</div><div style="display: inline-block;width: 50%;vertical-align: top;">
<span style="font-weight: bold;">Location:</span>
<span>Name</span>
<br/>
<span>Street Address</span>
<br/>
<span>City, State Zip</span>
<br/>
<span>Phone</span>
</div>
</div>
<div style="margin-bottom: 5px;padding: 5px;border-top: 1px solid #000000;">
<div style="display: inline-block;width: 50%;vertical-align: top;">
<span style="font-weight: bold;">Appointments:</span>
<br/>
<span>No appointments scheduled</span>
</div><div style="display: inline-block;width: 50%;vertical-align: top;">
<span style="font-weight: bold;">Care Team:</span>
<br/>
<span>Name Here</span>
</div>
</div>
<div style="margin-bottom: 5px;padding: 5px;border-top: 1px solid #000000;">
<span style="font-weight: bold;">Referrals:</span>
<br/>
<span>No referrals available</span>
</div>
media="print" like this:
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
Doing this should make it look the same as web page
and yes depeding on the browser like isherwood said if that is what you are pointing at.

Resources