I am trying to design a receipt using HTML and PHP. I managed to create the correct layout but i need rotate my div to 90 degrees. But it seems to overflow to the top.
I had to set margin-top:485px to code below for the right side table to fit the top.
<div class="rotate">
I dont want to fix the margin as the content may get longer/shorter in future.
MY CODE
.pagebreak {
page-break-after: always;
max-width: 8cm;
word-wrap: break-word;
}
.rotate {
-webkit-transform: rotate(-90deg) translate3d( 0, 0, 0);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="pagebreak">
<div class="rotate">
<label class="font-weight-bold text-center">SOME TITLE</label>
<table class="table">
<thead class="thead">
<tr colspan="3" class="">
</tr>
</thead>
<tbody>
<tr>
<td class="text-nowrap">
<div>
<label class="font-weight-bold" style="font-size:24px;">Seat No :
D6 </label>
</div>
<div id="label0" class="font-weight-bold" style="display:inline-block;" title="2BDA5339-3DAC-48DD-C1C2-8AA7D327A666"><canvas width="75" height="75" style="display: none;"></canvas><img alt="Scan me!" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABLCAYAAAA4TnrqAAAEcElEQVR4Xu2c626sMBCD2fd/6D1iVbohG+ezEyqtDum/CsjF4/F4Au1j27bnNvDzfLYfezwep9Hq++rrx83Hfcd19btaKo17PKfucyDYd7bAcpDatu0XLMWUehwVecUQtQ5ijstQGofWTziV61hgAVpdsCj3a2YpLVBaRVpXM4U0jTSM1uHud5/ng1nuwyTctEhKD5WGKlg0Xh1UFZSenPwZWPWkVI3cakjVjDSMNHeBVdDuK8CiNKC0UkxU6eNWMZIDV3Yu1axbgpVGzBXcWYaQj0urbOorm8xaYJ0RaPosAqm+nlavb7s/3e+JWenD37b5dD3pfl9gPd3kFaMn1WQfgqoTbYI6iNnxe/MvsCg6pUcjZrmOWTl0t9dzHb9b9VT1pdOMXtVGZi2w3sd9H2BROzAqpKOMoCxJNcrVvNZ9C6yfaDjH2faxsnukQVqRMozGI61zTyFUh1Cud4ElXrBYaaiqmoqgaqCV4ycNUuO5jCTfR/tTDOuaUnfSBdZu7X/oST5p1F+5ESZNcrSmDChZoSlmLbDeL40/BH7UR6Va5GpaesI6mhGkiS/Nqt9IL7DOYTydZ6neMI0QCT0dbrgMoqrs9n5p1bWqoatZtwLL7Zl6XXmr6rgOOg3KVetNMui3N7xqcmpPqPF10+iq9UZg0SdH7uZSBqU+i/yU+5Ypve+ULQustulpmdePNOw52P0aVTWXMeRrSMPIiafPUwadqqFbuhdYHftNh2IkyK5GjDLSDTJpHvW4XZ/lVrVbgXUIvMpZcswEaqqBpEXUU1LwiEG95+U3pe6ktwKLekNihmKeC/asJlKP5zKVMsvqDRdY73DgEU2qWaQpM5rRKdryZJf8U9I2LbCq43Olwc00pMYyZQ45acUWWkfai5LfI+1cYBWRssBSPou0pUfXVxTg5WVPf/Zr6RtwsjCudvU0Gv92hywACaRbTVV6q9KfNuKXgHX4LAJFMU0xxNUUAtPVvNn104uak2bNTkbMINNHoND66DoF2wKLekOX7qRh5LTVdfJ5bpUjjVTzlEHA3nCBVbyRrnvDUcEeTaOrmEFpREEnBls+iyxEah6VoLubSQtKGozeSbD9meQVpdfxXylotK7ZDqF8foH18y8XnGoqP5McjTBNSudLZDEojWn8tCo2q6HySVTSXVNJPscp3eVaSNBdUFwNbAp8Osls9aRgUJVV/o4Y7vrCE7Poz1EIvFuBRa/vXZqOvnx104lOISiN03la+7a/g1eaRj4mTTNKOxJwshKuL+yClTIjjZR7vkWnFQp8Yh5Vd2c/eJ7lLi5lhHs/BZGYQm0MnZB2G2k6bKPBU8ecps1s8EiDe7Ix/e9VXM1yQXbvI8tAaTniK6fBcq0FOW8qBLQ5F2Q3uJbAp2m4wGogQFWKQK7ThqwIMcnVrpTRPWd/WRreEiw3rdzTARrPFWLyQaProfnLcad9FqXXfwkWbcrVELexdjUrifw+Jp02UDXstVPTvSEJrcs819FT0BZYDcaoNuYvwfoHyIOmDZblgGQAAAAASUVORK5CYII="
style="display: block;"></div>
<script type="text/javascript" defer="">
// new QRCode(document.getElementById("qrcode"), "f738feb9-2f14-971b-f7b9-265755dfe795");
var qrcode = new QRCode("label0", {
text: "2BDA5339-3DAC-48DD-C1C2-8AA7D327A666",
width: 75,
height: 75,
colorDark: "#000000",
colorLight: "#ffffff",
correctLevel: QRCode.CorrectLevel.H
});
</script>
</td>
<td class="text-nowrap">
<div><label class="font-weight-bold">Counter ID : PN001</label></div>
<div><label class="font-weight-bold">Ticket ID : 7</label></div>
<div><label class="font-weight-bold">Title : The Accidental Astronauts</label></div>
<div><label class="font-weight-bold">Category : Adult</label></div>
<div><label class="font-weight-bold">Type : Film</label></div>
<div><label class="font-weight-bold">Location : ROOM1</label></div>
</td>
<td class="text-nowrap">
<div><label class="font-weight-bold">Date : 21-02-2019</label></div>
<div><label class="font-weight-bold">Showtime : 12:30 AM - 11:30 PM</label></div>
<div><label class="font-weight-bold">Price : RM 12.00</label></div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
</body>
</html>
Current output : The picture is cut half
Expected output after rotating div:
.rot90 {
-webkit-transform: translateY(-100%) rotate(90deg); /* Safari */
-moz-transform: translateY(-100%) rotate(90deg); /* Firefox 3.6 Firefox 4 */
/*-moz-transform-origin: right top; */
-ms-transform: translateY(-100%) rotate(90deg); /* IE9 */
-o-transform: translateY(-100%) rotate(90deg); /* Opera */
transform: translateY(-100%) rotate(90deg); /* W3C */
-webkit-transform-origin: left bottom;
-moz-transform-origin: left bottom;
-ms-transform-origin: left bottom;
-o-transform-origin: left bottom;
transform-origin: left bottom;
}
Related
In an .aspx file I have this html in my Head tag to hopefully rotate things 90 degrees
<style>
.rotate{
writing-mode:tb-rl;
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform:rotate(90deg);
transform: rotate(90deg);
white-space:nowrap;
display:block;
font-size:8pt;
}
</style>
In my body I have this:
<td class="rotate"><span id="Barcode" runat="server" /> </td>
<td class="rotate"><span id="123" content="123" runat="server" /> </td>
<td class="rotate"><span id="abc" content="abc" runat="server" /> </td>
<td class="rotate"><span id="456" content="456" runat="server" /> <span id="xyz" content="xyz" runat="server" /></td>
<td class="rotate"><span id="def" content="def" runat="server" /> </td>
<td class="rotate"><span id="789" content="789" runat="server" /> </td>
<td class="rotate" style="line-height:7mm"> </td>
</tr>
Everything shows rotated 90 degrees as needed other than the barcode, that shows horizontally still. How can I get this to rotate 90 degrees as well?
Tried different versions of css to no avail
Set the object position to absolute
<style>
.rotate{
writing-mode:tb-rl;
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform:rotate(90deg);
transform: rotate(90deg);
white-space:nowrap;
display:block;
font-size:8pt;
}
#Barcode {position: absolute;}
</style>
I'm attempting to create a cube with style rules in CSS, and while I have the structure of the cube correct I'm failing to make it apply correctly. I can't determine if I'm just calling the wrong IDs in the structure of the cube.
div#cube {
height: 400px;
width: 400px;
margin: 180px auto 150px auto;
position: relative;
transform: perspective(450px);
}
div.cube_face {
position: absolute;
height: 400px;
width: 400px;
}
div#cube_front {
transform: translateZ(-50px);
}
div#cube_left {
transform: translateX(-200px) rotateY(90deg);
}
div#cube_right {
transform: translateX(200px) rotateY(-90deg);
}
div#cube_top {
transform: translateY(-200px) rotateX(-90deg);
}
div#cube_bottom {
transform: translateY(200px) rotateX(90deg);
}
<section id="center">
<div id="cube">
<div id="cube_bottom" class="cube_face">
<h1>The 15th Annual Chupacabra Music Festival</h1>
</div>
<div id="cube_top" class="cube_face">
<p>Snow Storm Pilot <span>-</span> Ivory Elephants <span>-</span> Laureen Torres
<span>-</span> Little Mouse <span>-</span> Sheila G <span>-</span> Tachyon Pulse
<span>-</span> Falstaff Ergo <span>-</span> The Roes <span>-</span> Porter Dew
<span>-</span> MLTPLX <span>-</span> Smoke Ring <span>-</span> James Po
<span>-</span> Kate Belle <span>-</span> Ian Mann <span>-</span> Back to the Front
<span>-</span> Codfish <span>-</span> The Chromatones <span>-</span> Fiona Bennett
<span>-</span> Crop Circles <br /> & MORE!!!! </p>
</div>
<div id="cube_left" class="cube_face">
<img src="cf_photo1.png" alt="" />
</div>
<div id="cube_right" class="cube_face">
<img src="cf_photo2.png" alt="" />
</div>
<div id="cube_front" class="cube_face">
<img src="cf_photo3.png" alt="" />
</div>
</div>
</section>
I've attempted changing the classes I'm calling by doing variations, I'll use cube_front as an example. I've tried div#cube_front, .cube_front, div.cube_front, cube.cube_front, etc. My understanding of IDs and classes may not be up to par either. I appreciate any assistance offered on this problem.
I think your css code is incorrect for perspective property.
It should be perspective: 450px;
Here is the CodePen demo for the same
HI I have a problem with modal, when I open another model from this one and close it first modal has blurry text.
Before opening second modal
After closing second modal
My css:
.label {
background-color: lightgrey;
font-weight: bold;
}
td {
padding: 10px;
font-size: 14px;
border: 1px solid black;
}
And page code:
<ng-container *ngIf="event">
<h3>Просмотр события от {{ event.systemDate | dateTime }}</h3>
<table>
<tr>
<td class="label">
Дата и время события по часовому поясу организации
</td>
<td>
{{ event.systemDate | dateTime }}
</td>
<td class="label">
Дата и время события по часовому поясу Системы
</td>
<td>
{{ event.systemDate | dateTime }}
</td>
<td class="label">
Кем инициировано
</td>
<td>
{{ event.initiatedBy | initiatorType }}
</td>
</tr>
</table>
</ng-container>
I think this is a problem to do with composite layers.
If I'm correct, adding the following code to your table and modal should solve it. If that doesn't work, try adding it to the body too. Just hack around!
-webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0) scale(1.0, 1.0);
See this answer: https://stackoverflow.com/a/19211952/3412847
The problem was caused by PrimeNG generated style: translateX(-50%) translateY(-50%) scale(1).
I add this to styles.scss:
.ui-dialog.ui-dynamicdialog {
margin-top: -20%;
margin-left: -40%;
transform: translateZ(0) scale(1.0, 1.0); !important;
}
And my problem was fixed
Using below code, I am able to highlight the element with value 2 and 3 instead of element 3. I tried using last child and nth-last-type but didn't work as expected. Issue is with highlighting immediate next element of class - active and apply blink to both tick mark of 3 and value 3 and change of active class to change blink
No Jquery solution, as currently trying to implement using CSS3
I am trying to choose first element of class hightlight without active class using CSS only
HTML:
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<div class="steps" style="width:26%;float:left">
<div class="stepSection">
<table>
<tr><td><div class="highlight active"><span class="glyphicon glyphicon glyphicon-ok"></span></div></td><td>1.</td><td> <span>one</span></td></tr>
<tr><td><div class="highlight active" ><span class="glyphicon glyphicon glyphicon-ok"></span></div></td><td>2.</td><td> <span>two</span></td></tr>
<tr><td><div class="highlight"><span class="glyphicon glyphicon glyphicon-ok"></span></div> </td><td>3.</td><td><span>three</span></td></tr>
<tr><td><div class="highlight"><span class="glyphicon glyphicon glyphicon-ok"></span></div> </td><td>3.</td><td><span>four</span></td></tr>
</table>
</div>
</div>
<div style="width:2%;float:left;">
<div class="highlight active">1</div>
<div class="highlight active">2</div>
<div class="highlight">3</div>
<div class="highlight">4</div>
</div>
CSS3:
.highlight{
color:white;
width:20px;
height:20px;
border-radius:50%;
background: rgb(234,116,0);
display: inline-block;
text-align: center;
}
.active{
background:green;
}
#keyframes blink {
to { background: rgb(234,116,0); }
}
.active + .highlight{
color: white;
background: white;
animation: blink 2s steps(2, start) infinite;
}
Method 1: Jquery
You can do it using jquery like so
$(".active:last").next().addClass("blink")
And change your css to have blink class
.blink {
color: white;
background: white;
animation: blink 2s steps(2, start) infinite;
}
Working Js fiddle
Method 2:
If you want to do it only using css , you need to book keep your last element
by adding a class to the last element say .last
<div style="width:2%;float:left;">
<div class="highlight active">1</div>
<div class="highlight active last">2</div>
<div class="highlight">3</div>
<div class="highlight">4</div>
</div>
and then do you css like
.last + .highlight {
color: white;
background: white;
animation: blink 2s steps(2, start) infinite;
}
Method 3:
change your css to
div.active + div:not(.active){
color: white;
background: white;
animation: blink 2s steps(2, start) infinite;
}
Basically it finds the element which has class active before it and the next class which does not have the class active.
working jsfiddle
Instead of nth-last-type you may use:
.highlight + .highlight:not(.active):nth-of-type(3) {
The snippet:
.highlight {
color: white;
width: 20px;
height: 20px;
border-radius: 50%;
background: rgb(234, 116, 0);
display: inline-block;
text-align: center;
}
.active {
background: green;
}
#keyframes blink {
to {
background: rgb(234, 116, 0);
}
}
.highlight + .highlight:not(.active):nth-of-type(3) {
color: white;
background: white;
animation: blink 2s steps(2, start) infinite;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="steps" style="width:26%;float:left">
<div class="stepSection">
<table>
<tr>
<td>
<div class="highlight active"><span class="glyphicon glyphicon glyphicon-ok"></span></div>
</td>
<td>1.</td>
<td><span>one</span></td>
</tr>
<tr>
<td>
<div class="highlight active"><span class="glyphicon glyphicon glyphicon-ok"></span></div>
</td>
<td>2.</td>
<td><span>two</span></td>
</tr>
<tr>
<td>
<div class="highlight"><span class="glyphicon glyphicon glyphicon-ok"></span></div>
</td>
<td>3.</td>
<td><span>three</span></td>
</tr>
<tr>
<td>
<div class="highlight"><span class="glyphicon glyphicon glyphicon-ok"></span></div>
</td>
<td>3.</td>
<td><span>four</span></td>
</tr>
</table>
</div>
</div>
<div style="width:2%;float:left;">
<div class="highlight active">1</div>
<div class="highlight active">2</div>
<div class="highlight">3</div>
<div class="highlight">4</div>
</div>
I need some help as to the reason IE7 will not render my image in the following HTML/CSS code
<html>
<head>
<meta name="generator" content="HTML Tidy for Linux (vers 25 March 2009), see www.w3.org" />
<title>Debugging IE 7 image problem</title>
<style>
.delete-icon
{
background-image: url("http://cdn4.iconfinder.com/data/icons/momenticons-basic/16x16/trash-can-delete.png");
background-position: top right;
background-repeat: no-repeat;
padding-right: 18px;
margin-left: 7px;
}
</style>
</head>
<body>
<table id="table_Locations">
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="div-input-default" id="LocationsTest2">
<td>
<select name="AllTests_Locations_Substance_2" id="LocationsTest2">
<option value="641">Okuku</option>
<option value="644">Oyan</option>
<option value="645">Ikirun</option>
<option value="646">Oshogbo</option>
</select>
</td>
<td>
<input id="LocationsTestResults2_negative" name="AllTests_Locations_Result_2" value="776" type="radio" />Negative <input id="LocationsTestResults2_positive" name="AllTests_Locations_Result_2" value="777" type="radio" />Positive<br />
</td>
<td>
<a class="delete-icon" href="#"></a>
</td>
</tr>
</tbody>
</table>
</body>
</html>
This renders well in IE8, IE9, Firefox and Chrome but not IE7. How can I change this markup to get it to work in IE7 please? Thanks.
Try this:
.delete-icon {
background: url("http://cdn4.iconfinder.com/data/icons/momenticons-basic/16x16/trash-can-delete.png") no-repeat right 0;
display: inline-block;
width: 100px; /* set to whatever you need */
height: 100px; /* set to whatever you need */
padding-right: 18px;
margin-left: 7px;
}
The key is giving the anchor tag the correct display value plus a width and height.
I'd also recommend that you don't use tables for layout purposes as that hasn't been good practice for at least 10 years or more.
Try to set width and height to .delete-icon style