How to declare height based on screen with design system? - html

I found the Column Nesting of Grid so that I can make a view following:
(Resource: https://www.lightningdesignsystem.com/utilities/grid/#Column-Nesting)
enter image description here
But I have a problem.
When I set the unit of height as "px", I can apply height on div. And columns and rows of table are applied with unit of height as "percentage"
On the other hands, when I set the unit of height as "percentage", I can't apply height with unit of height as "percentage" on div, columns, rows, and table!
I want to create a screen-based responsive visualforce page.
How can I apply height in "percentage"?
My code is following:
<apex:page showHeader="false" standardStylesheets="false"
sidebar="false" applyHtmlTag="false" applyBodyTag="false"
docType="html-5.0">
<html xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<title>Condition of Operating Room of Mods Clinic</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Import the Design System style sheet -->
<apex:slds />
<style>
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.operating {
height: 750px;
background-color: blue;
}
.logoAndExplaination {
height: 150px;
background-color: green;
}
.nonOperating {
height: 600px;
background-color: orange;
}
.waiting{
margin-top: 0;
margin-bottom: 0;
height: 300px;
background-color: fuchsia;
}
.end {
margin-top: 0;
height: 300px;
background-color: silver;
}
table {
border-collapse: collapse;
margin: 2.5px;
}
th {
border: 1px solid black;
}
td {
border: 1px solid black;
}
</style>
</head>
<body>
<!-- REQUIRED SLDS WRAPPER -->
<div class="slds-scope">
<!-- PRIMARY CONTENT WRAPPER -->
<div class="slds-grid slds-wrap">
<div class="operating slds-col slds-size_2-of-3">
<table style="width: 99%; height: 99%;">
<colgroup>
<col width="25%" />
<col width="25%" />
<col width="25%" />
<col width="" />
</colgroup>
<tr style="height: 5%;">
<th>501호</th>
<th>502호</th>
<th>503호</th>
<th>504호</th>
</tr>
<tr style="height: 28.3%;">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr style="height: 5%;">
<th>101호</th>
<th>102호</th>
<th>103호</th>
<th>104호</th>
</tr>
<tr style="height: 28.3%;">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr style="height: 5%;">
<th>수술실 1</th>
<th>수술실 2</th>
<th>수술실 3</th>
<th>레이저실(107호)</th>
</tr>
<tr style="height: 28.3%;">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
<div class="slds-col slds-size_1-of-3">
<div class="slds-grid slds-wrap">
<div class="logoAndExplaination slds-col slds-size_1-of-1" align="center">
<img alt="Image"
src=""
style="width: 90%;" />
<h1 style="color: white; margin: 0; padding: 0; margin-bottom: 5px">상 황 판</h1>
</div>
<div class="nonOperating slds-col slds-size_3-of-4">
<table style="width: 99%; height: 98%;">
<colgroup>
<col width="33%" />
<col width="33%" />
<col width="" />
</colgroup>
<tr style="height: 7.5%;">
<th>메디짐 운동실</th>
<th>메디짐 치료실</th>
<th>회복실1(105호)</th>
</tr>
<tr style="height: 25.83%;">
<td></td>
<td></td>
<td></td>
</tr>
<tr style="height: 7.5%;">
<th>상담실1</th>
<th>상담실2</th>
<th>회복실2(107호)</th>
</tr>
<tr style="height: 25.83%;">
<td></td>
<td></td>
<td></td>
</tr>
<tr style="height: 7.5%;">
<th>상담실3</th>
<th>상담실4</th>
<th>미팅룸</th>
</tr>
<tr style="height: 25.83%;">
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
<div class="slds-col slds-size_1-of-4">
<div class="waiting slds-col slds-size_1-of-1">
<table style="width: 98%; height: 99%;">
<tr style="height: 15%;">
<th>대기자</th>
</tr>
<tr style="height: 85%;">
<td></td>
</tr>
</table>
</div>
<div class="end slds-col slds-size_1-of-1">
<table style="width: 98%; height: 96%;">
<tr style="height: 15%;">
<th>시술마침</th>
</tr>
<tr style="height: 85%;">
<td></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- / PRIMARY CONTENT WRAPPER -->
</div>
<!-- / REQUIRED SLDS WRAPPER -->
<!-- JAVASCRIPT -->
<!-- / JAVASCRIPT -->
</body>
</html>
</apex:page>


/************** ipad rotate ***************/
#media (max-width: 1080px) {}
/************** ipad ***************/
#media only screen and (min-width:768px) and (max-width: 1024px) and (orientation : portrait){}
/************** iphone rotate***************/
#media (max-width: 767px) {}
/************** iphone ***************/
#media (max-width: 479px) {}
You have to style based on device width by using above condition, if you still have doubt on styling let me know....Thank you

Related

Make whole table fill remaining print page

All of this is made with angular 12 and with ngx-print library
I have tabular data that I needs to display and I achieved the look and feel with HTML :
<div id="changeOrder">
<body>
<div *ngIf="allReports">
<!-- style="size: A4; display: block;height: 100%;" -->
<table style="size: A4; height: 100%;" *ngFor="let item of response">
<!-- Here the header starts -->
<div class="">
<div class="">
<tr>
<td>
<!--place holder for the fixed-position header-->
<div class="" style=" border-bottom: 1px solid black;">
<div class="">
<div class="">
<img src="../../../../../../../assets//img/logo_rr.png" alt="Logo"
style="height: 50px;" />
</div>
<table style="width:100%;">
<thead class="" style="width:100%;">
<tr>
<td style="width:155px;">
<h2>Change Order</h2>
</td>
<td>
<h2>{{item.CHANGEORDERID}} </h2>
</td>
</tr>
</thead>
</table>
</div>
</div>
</td>
</tr>
</div>
</div>
<!-- Here the header Ends -->
<tbody style="display: block;height: 100%;">
<tr>
<td>
<h3>Tasks</h3>
<table style="size: A4; height: 100%;">
<thead>
<tr>
<td>
<b>Name</b>
</td>
<td style="width:400px">
<b>Description</b>
</td>
<td>
<b>Status</b>
</td>
<td>
<b>Due Date</b>
</td>
</tr>
</thead>
<tbody *ngFor="let child of item.taskChild;">
<tr>
<td>{{ child.TDOTNUMBER }} </td>
<td style="width:400px">{{child.TASKSUMMARY}} </td
<td>{{child.TSTATUS}}</td>
<td>{{child.TDUEDATE_ORIG_TYPE}}</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
<tfoot>
<tr class="outer-row">
<td>
<div class="page-footer-space">
<!-- <b>Printed On</b> {{printedDate}} -->
</div>
</td>
</tr>
</tfoot>
</table>
</div>
</body>
</div>
and with this CSS :
.page-footer-space,
.page-footer {
height: 100px;
}
.page-footer {
position: fixed;
bottom: 0px;
/* width: 100%; */
}
.page {
page-break-after: always;
}
#page {
margin: 10mm !important;
size: landscape;
}
#media print {
table {
font-size: .8rem;
width: 100%;
height: 90vh;
border: solid;
table-layout: fixed;
}
tbody {
margin: 10mm;
}
tfoot {
display: table-footer-group;
}
button {
display: none;
}
}
Basically the data when it gets printed it look great,sometimes each report occupies more than 1 page, but what I need to achieve is that whenever an item of response is finished it does not matter at what point of the printing page it finished, the rest of the page needs to be blank and then the next item in the iteration should be printing.
I have not been successful in achieving that break-page at the end of the table.
This is how it currently looks:

try to align images right next to a sidebar

this the image I'm trying to recreate
I'm trying to place the two(2) stacked images right next to each other and also make the whole three(3) images to also align right next to the sidebar tables like in the above image, but each time I try it always goes below the sidebar table. I have tried using flexbox but it doesn't work maybe I don't know it very much. please if anyone can help. Thank you
<div class="table">
<table>
<tr>
<th class="cat">Categories</th>
</tr>
<tr>
<th>Electronics</th>
</tr>
<tr>
<th>Clothing</th>
</tr>
<tr>
<th>Music & Equipment</th>
</tr>
<tr>
<th>Footwear</th>
</tr>
<tr>
<th>Software Products</th>
</tr>
<tr>
<th>Computer Hardware</th>
</tr>
<tr>
<th>Mobile Phones</th>
</tr>
<tr>
<th>Laptops</th>
</tr>
<tr>
<th>Furniture</th>
</tr>
<tr>
<th>Beauty Products</th>
</tr>
<tr>
<th>Computer Accessories</th>
</tr>
</table>
</div>
<div class="holder">
<div class="lone-image"> </div>
<div class="stacked-image">
<div class="canon"></div>
<div class="dell"></div>
</div>
</div>
CSS Code
.table {
display: flex;
flex - flow: column;
border: 1px solid #999696;
width: 25%;
height: 60%;
box-sizing: border-box;
}
table, th, td{
border-bottom:1px solid black;
text-align: left;
padding: 10px;
}
.cat{
background-color:rgb(0, 0, 107);
color: white;
border-radius: 4px;
}
.holder{
display: flex;
justify-content: center;
align-items: center;
}
.lone-image{
background-image: url(xii.jpg);
background-size: cover;
width: 35%;
height: 410px;
}
.stacked-image{
display: flex;
flex-direction: column;
height: 400px;
width: 40%;
margin: 4px;
}
.canon{
background-size: cover;
background-image: url(canon.jpg);
width: 65%;
height: 400px;
margin-bottom: 4px;
}
.dell{
background-size: cover;
background-image: url(dell.jpg);
width: 65%;
height: 400px;
}

I came up with this.
You can play around with width's and other styling but this should give you the basic idea.
Also, using tables is a bad practice as they offer no responsiveness.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
</style>
</head>
<body>
<table>
<tr>
<td>
<div id="1table">
<table border="1">
<tr>
<th class="cat">Categories</th>
</tr>
<tr>
<th>Electronics</th>
</tr>
<tr>
<th>Clothing</th>
</tr>
<tr>
<th>Music & Equipment</th>
</tr>
<tr>
<th>Footwear</th>
</tr>
<tr>
<th>Software Products</th>
</tr>
<tr>
<th>Computer Hardware</th>
</tr>
<tr>
<th>Mobile Phones</th>
</tr>
<tr>
<th>Laptops</th>
</tr>
<tr>
<th>Furniture</th>
</tr>
<tr>
<th>Beauty Products</th>
</tr>
<tr>
<th>Computer Accessories</th>
</tr>
</table>
</div>
</td>
<td>
<table>
<tr>
<td rowspan="2"><img src="https://i.imgur.com/JeXUv8x.png" style="height:290px"></td>
<td colspan="2"><img src="https://i.imgur.com/4girMKd.png" style="height:140px"></td>
</tr>
<tr>
<td><img src="https://i.imgur.com/4girMKd.png" style="height:140px"></td>
</tr>
<tr>
</tr>
</table>
</td>
</tr>
</table>
<div class="holder">
<div class="lone-image"> </div>
<div class="stacked-image">
<div class="canon"></div>
<div class="dell"></div>
</div>
</div>
</body>
</html>
Have a great day!

I think their was some error in your width & height selection for each div. I changed that and removed a little bit of extra flex properties and thats it Just tell me you want something like this.
Proposed code
.container{
display:flex;
width:100%;
height:60%;
}
.table{
display: flex;
flex-flow: column;
border: 1px solid #999696;
width: 25%;
height: 100%;
box-sizing: border-box;
}
table, th, td{
border-bottom:1px solid black;
text-align: left;
padding: 10px;
}
.cat{
background-color:rgb(0, 0, 107);
color: white;
border-radius: 4px;
}
.holder{
width:100%;
display: flex;
flex-direction:row;
}
.lone-image{
background:blue;
width:60%;
height: 100%;
}
.stacked-image{
display: flex;
flex-direction: column;
height: 100%;
width: 40%;
}
.canon{
width: 100%;
background:green;
height:50%;
}
.dell{
background:red;
width: 100%;
height: 50%;
}
<div class="container">
<div class="table">
<table>
<tr>
<th class="cat"> Categories</th>
</tr>
<tr>
<th> Electronics</th>
</tr>
<tr>
<th>Clothing</th>
</tr>
<tr>
<th> Music & Equipment</th>
</tr>
<tr>
<th> Footwear</th>
</tr>
<tr>
<th> Software Products</th>
</tr>
<tr>
<th> Computer Hardware</th>
</tr>
<tr>
<th> Mobile Phones</th>
</tr>
<tr>
<th> Laptops</th>
</tr>
<tr>
<th> Furniture</th>
</tr>
<tr>
<th> Beauty Products</th>
</tr>
<tr>
<th> Computer Accessories</th>
</tr>
</table>
</div>
<div class="holder">
<div class="lone-image">
</div>
<div class="stacked-image">
<div class="canon"></div>
<div class="dell"></div>
</div>
</div>
</div>
You were heading in the right direction I know flexboxes are really cool but they do take a little while to hang on.
Do tell me whether I was of any Help :)

I keep getting blank lines between my table

Once the table starts getting filled it keeps giving me these blank lines on the table.
I am using a w3schools template but I don't think that's whats causing the problem. I put an image below of an example of what it would look like once the table gets filled in.
I tried different things with CSS but nothing worked and I can't find any post with similar problems, please help.
<!DOCTYPE html>
<html>
<title>CaBar</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inconsolata">
<head>
<style>
body,
html {
height: 100%;
font-family: "Inconsolata", sans-serif;
}
.bgimg {
background-position: center;
background-size: cover;
background-image: url("images/coffee1.jpg");
min-height: 75%;
}
.menu {
display: none;
}
</style>
<style>
table {
border-collapse: collapse;
}
table,
th,
td {
border: 1px solid black;
height: 50px;
position: relative;
top: 40px;
}
</style>
</head>
<body>
<div class="w3-top">
<div class="w3-row w3-padding w3-black">
<div class="w3-col s3">
INVENTORY
</div>
<div class="w3-col s3">
PROFITS
</div>
<div class="w3-col s3">
ORDER
</div>
<div class="w3-col s3">
LOGOUT
</div>
</div>
</div>
<table align='center'>
<tr>
<th>ID</th>
<th>NAME</th>
<th>STOCK</th>
<th>COST</th>
<th>PRICE</th>
</tr>
</body>
</html>

Try removing top: 40px; from your css...
I also added a margin-top to the table since it got hidden behind the navigation which uses position:fixed
snippet below:
body,
html {
height: 100%;
font-family: "Inconsolata", sans-serif;
}
.bgimg {
background-position: center;
background-size: cover;
background-image: url("images/coffee1.jpg");
min-height: 75%;
}
.menu {
display: none;
}
table {
margin-top: 70px;
border-collapse: collapse;
}
table,
th,
td {
border: 1px solid black;
height: 50px;
position: relative;
/* top: 40px; */
}
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inconsolata">
<body>
<div class="w3-top">
<div class="w3-row w3-padding w3-black">
<div class="w3-col s3">
INVENTORY
</div>
<div class="w3-col s3">
PROFITS
</div>
<div class="w3-col s3">
ORDER
</div>
<div class="w3-col s3">
LOGOUT
</div>
</div>
</div>
<table align='center'>
<thead>
<tr>
<th>ID</th>
<th>NAME</th>
<th>STOCK</th>
<th>COST</th>
<th>PRICE</th>
</tr>
</thead>
<tbody>
<tr>
<td>mock ID</td>
<td>mock NAME</td>
<td>mock STOCK</td>
<td>mock COST</td>
<td>mock PRICE</td>
</tr>
<tr>
<td>mock ID</td>
<td>mock NAME</td>
<td>mock STOCK</td>
<td>mock COST</td>
<td>mock PRICE</td>
</tr>
<tr>
<td>mock ID</td>
<td>mock NAME</td>
<td>mock STOCK</td>
<td>mock COST</td>
<td>mock PRICE</td>
</tr>
<tr>
<td>mock ID</td>
<td>mock NAME</td>
<td>mock STOCK</td>
<td>mock COST</td>
<td>mock PRICE</td>
</tr>
</tbody>
</table>
</body>

In visualforce, height of CSS style does not apply to table

I want to make status board with visualforce.
When I test HTML page, it works.
But, It doesn't work with same code on visualforce page.
I don't know why height of style does not apply to table and vertical-align of style does not apply to image in div.
picture 1: HTML page
picture 2: Visualforce page
The code is following:
<apex:page showHeader="false"
standardStylesheets="false" sidebar="false" applyHtmlTag="false"
applyBodyTag="false" docType="html-5.0">
<html xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<title>수술/시술 상황판</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Import the Design System style sheet
<apex:slds />
TODO : api version error / find how to solve the problem -->
<style>
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
table {
border-collapse: collapse;
margin: 2.5px;
padding: 2.5px;
}
th {
border: 1px solid black;
}
td {
border: 1px solid black;
}
</style>
</head>
<body>
<div
style="float: left; background-color: aqua; width: 60%; height: 100%"
align="center">
<table style="width: 99%; height: 99%;">
<colgroup>
<col width="25%" />
<col width="25%" />
<col width="25%" />
<col width="" />
</colgroup>
<tr style="height: 5%;">
<th>501호</th>
<th>502호</th>
<th>503호</th>
<th>504호</th>
</tr>
<tr style="height: 28.3%;">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr style="height: 5%;">
<th>101호</th>
<th>102호</th>
<th>103호</th>
<th>104호</th>
</tr>
<tr style="height: 28.3%;">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr style="height: 5%;">
<th >수술실 1</th>
<th >수술실 2</th>
<th >수술실 3</th>
<th >레이저실(107호)</th>
</tr>
<tr style="height: 28.3%;">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
<div
style="float: left; background-color: green; width: 40%; height: 38.5%; vertical-align: middle;">
<div align="center">
<img alt="Mods Clinic Logo"
src="http://www.modsclinic.co.kr/assets/front/images/main/logo.png"
style="width: 90%;" /><br />
<h1 style="color: white; margin: 0; padding: 0; margin-bottom: 5px">상
황 판</h1>
</div>
</div>
<div
style="float: left; background-color: orange; width: 30%; height: 61.5%">
<table style="width: 99%; height: 99%;">
<colgroup>
<col width="33%"/>
<col width="33%"/>
<col width=""/>
</colgroup>
<tr style="height: 7.5%;">
<th>메디짐 운동실</th>
<th>메디짐 치료실</th>
<th>회복실1(105호)</th>
</tr>
<tr style="height: 25.83%;">
<td></td>
<td></td>
<td></td>
</tr>
<tr style="height: 7.5%;">
<th>상담실1</th>
<th>상담실2</th>
<th>회복실2(107호)</th>
</tr>
<tr style="height: 25.83%;">
<td></td>
<td></td>
<td></td>
</tr>
<tr style="height: 7.5%;">
<th>상담실3</th>
<th>상담실4</th>
<th>미팅룸</th>
</tr>
<tr style="height: 25.83%;">
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
<div
style="float: left; background-color: yellow;; width: 10%; height: 30.75%">
<table style="width: 99%; height: 99%;">
<tr style="height: 15%;">
<th>대기자</th>
</tr>
<tr style="height: 85%;">
<td></td>
</tr>
</table>
</div>
<div
style="float: left; background-color: silver; width: 10%; height: 30.75%">
<table style="width: 99%; height: 99%;">
<tr style="height: 15%;">
<th >시술마침</th>
</tr>
<tr style="height: 85%;">
<td></td>
</tr>
</table>
</div>
</body>
</html>
</apex:page>
Please Help Me.

Forcing image to get the max-width keeping the aspect ratio within a max-height

How can I force the image to get the higher possible width without trespassing the max-height argument, and keeping the aspect ratio?
img {
display:block;
max-height: 100px;
max-width: 100%;
width: auto;
}
<table border=1 style="table-layout: fixed; width: 500px;">
<thead>
<th style="width: 100px;">
100px
</th>
<th style="width: 400px;">
400px
</th>
</thead>
<tbody>
<tr>
<td>
A image
</td>
<td>
<img src="http://via.placeholder.com/400x100">
</td>
</tr>
<tr>
<td>
This image could be larger
</td>
<td>
<img src="http://via.placeholder.com/200x50">
</td>
</tr>
</tbody>
<table>

Wrapping it in a container that forces those constraints should work for you:
img {
display:block;
width: 100%;
}
.cell-wrapper {
display:block;
max-width: 100%;
max-height: 100px;
overflow-y: hidden;
width: auto;
}
<table border=1 style="table-layout: fixed; width: 1000px;">
<thead>
<th style="width: 100px;">
100px
</th>
<th style="width: 400px;">
400px
</th>
</thead>
<tbody>
<tr>
<td>
A image
</td>
<td>
<img src="http://via.placeholder.com/400x100">
</td>
</tr>
<tr>
<td>
This image could be larger
</td>
<td>
<div class="cell-wrapper">
<img src="http://via.placeholder.com/200x50">
</div>
</td>
</tr>
</tbody>
<table>