Trying to convert a HTML to PDF using wkhtmltopdf.
I want the table in the generated PDF to be at the center but the table represented here in HTML always aligns left in the created PDF?
What could be going wrong?
PS: I am new to the front-end altogether. I think i am making some small mistake in styling.
<div class="divGeneral" id="sumDiv">
<table id="infoTable">
<tr>
<th>Pr Name: </th>
<td><textarea id="pName" class="noBorderInput" rows="1"></textarea></td>
</tr>
<tr>
<th>Su Date: </th>
<td><textarea id="suDate" class="noBorderInput" rows="1"></textarea></td>
</tr>
</table>
</div>
The style sheet has
.divGeneral {
width: 100%;
//float: left;
text-align: center;
margin: 0 auto;
object-fit: cover;
}
#sumDiv {
// margin-bottom: 50px;
// display: inline-block;
// float: none;
text-align: left;
margin: 0 auto;
}
#infoTable th {
border: 0px;
vertical-align: top;
padding: 4px 2px 0px 2px;
width: 180px;
text-align: right;
margin-left: auto;
margin-right: auto;
}
#infoTable td {
border: 1px solid black;
padding: 3px 3px 2px 3px;
text-align: left;
vertical-align: top;
margin-left: auto;
margin-right: auto;
}
textarea
{
margin: 0px;
}
textarea .multiline{
margin-top: 2px;
}
If I understand your question correctly, you can add
#infoTable{
margin: 0 auto;
}
This simply center-align the table in .divGeneral which is width:100%.
I also removed some css code that has no effect in the current task.
Please run the code below to see if this is what you want.
.divGeneral {
width: 100%;
object-fit: cover;
}
#sumDiv {
text-align: left;
margin: 0 auto;
}
#infoTable{
margin: 0 auto;
}
#infoTable th {
vertical-align: top;
padding: 4px 2px 0px 2px;
text-align: right;
}
#infoTable td {
border: 1px solid black;
padding: 3px 3px 2px 3px;
text-align: left;
vertical-align: top;
}
textarea .multiline{
margin-top: 2px;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="divGeneral" id="sumDiv">
<table id="infoTable">
<tr>
<th>Pr Name: </th>
<td><textarea id="pName" class="noBorderInput" rows="1"></textarea></td>
</tr>
<tr>
<th>Su Date: </th>
<td><textarea id="suDate" class="noBorderInput" rows="1"></textarea></td>
</tr>
</table>
</div>
</body>
</html>
Use flexbox method.I hope this will work for you.
.divGeneral {
display:flex;
justify-content:center;
align-items:center;
}
Related
Greetings Stackoverflow!
I have problems pixel-perfect setting my tags. Here is the codepen: https://codepen.io/anon/pen/NLbyag
My aim is to have my <svg> and <table id="time-h-axis"> tags horizontally scrollable inside their <div id="main-charts"> parent, but not vertically.
<svg> and <table id="time-h-axis"> have height 330 and 70 which makes the 400px height of <div id="main-charts">.
However, there are a few extra vertical pixels coming from somewhere (one can scroll vertically and see a bit of lightgreen of the div in the codepen)...
I am out of ideas... Help needed! Thanks ;-)
HTML:
<div id="main-charts">
<table id="time-h-axis"><tr></tr></table>
<svg height="330" width="11970"></svg>
</div>
CSS:
#main-charts {
width:1000px;
height: 400px;
background-color: lightgreen;
margin: 0px;
border: 0px;
padding: 0px;
overflow: scroll;
}
#time-h-axis {
border-spacing: 0px;
width: 11970px;
height: 70px;
background-color: violet;
padding: 0px;
border: 0px;
margin: 0px;
}
#main-charts svg {
background-color: red;
margin: 0px;
border: 0px;
padding: 0px;
}
Set the SVG to display:block (per this SO Q&A) and the wrapper to overflow:auto
#main-charts {
width: 1000px;
height: 400px;
background-color: lightgreen;
margin: 0px;
border: 0px;
padding: 0px;
overflow: auto;
}
#time-h-axis {
border-spacing: 0px;
width: 11970px;
height: 70px;
background-color: violet;
padding: 0px;
border: 0px;
margin: 0px;
}
#main-charts svg {
background-color: red;
margin: 0px;
border: 0px;
padding: 0px;
display: block;
}
<div id="main-charts">
<table id="time-h-axis">
<tr></tr>
</table>
<svg height="330" width="11970"></svg>
</div>
Codepen Demo
I've tried to move the table, but I couldn't do that. I want to move the table that is inside div. But I only can move the table only to the left/right. I want the table to be free. What is my mistake? What I missed? Maybe I did styling wrong? Please help me to solve this problem.
Here is the code:
/*Imports*/
#import url('https://fonts.googleapis.com/css?family=Ubuntu');
body{
background-color: #21ff00;
margin: 0;
padding: 0;
}
.division1 td{
padding: 5px;
border: 2px solid #000;
color: #fff;
}
.division1{
width: 100%;
height: 500px;
margin: 0;
padding: 0;
background-color: #fff;
}
.division1 table{
width: 380px;
height: 380px;
border: 1px solid #000;
margin: 35px 28px;
border-collapse: collapse;
text-align: center;
background-color: #0f6bff;
font-family: 'Ubuntu', sans-serif;
}
<!DOCTYPE html>
<html>
<head>
<title>Mirashraf</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="division1">
<table border="1">
<tr>
<td><b>Name</b></td>
<td><b>Price</b></td>
</tr>
<tr>
<td>MacBook</td>
<td>$999.99</td>
</tr>
<tr>
<td>iPhone</td>
<td>$499.99</td>
</tr>
<tr>
<td>iPad Pro</td>
<td>$649.99</td>
</tr>
<tr>
<td>Apple Watch</td>
<td>$1199.99</td>
</tr>
</table>
</div>
</body>
</html>
Please, help me.
Thanks to everyone in behind.
You can set the div to absolute position and place it anywhere you like.
.division1{
width: 100%;
height: 500px;
margin: 0;
padding: 0;
background-color: #fff;
position: absolute;
top: 35%;
}
Kindly split margin to 4 parameters as below margin: toppx rightpx bottompx leftpx , Below css will move table to center of the screen
.division1 table {
width: 380px;
height: 380px;
border: 1px solid #000;
margin: 50px 28px 41px 40%;
border-collapse: collapse;
text-align: center;
background-color: #0f6bff;
font-family: 'Ubuntu', sans-serif;
}
If you mean that you want the Table to be centred, you need to set margin-left:auto, margin-right:auto in your CSS for the table. This assumes your table has a width, which it does.
If you mean that you want to drag the table around, then that's a whole different question.
Im currently trying to get my window in sharepoint to auto-resize when the user changes the size of their window. im using a web version of sharepoint at work. not allowed to use designer.
<style type="text/css">
#dgwrap {
HEIGHT: 1000px; BACKGROUND-IMAGE: url(PublishingImages/graybk.png); BACKGROUND-REPEAT: repeat-y; MARGIN-TOP: 75px; WIDTH: 1325px
}
.dgtopbox {
FONT-SIZE: 9pt; HEIGHT: 200px; FLOAT: left; TEXT-ALIGN: center; MARGIN-LEFT: 350px; MARGIN-TOP: 110px; WIDTH: 700px
}
#dgtopboxleft {
HEIGHT: 50px; FLOAT: left; MARGIN-LEFT: 350px; MARGIN-TOP: 25px; WIDTH: 200px
}
#dgtopboxright {
HEIGHT: 50px; FLOAT: right; MARGIN-TOP: 25px; WIDTH: 200px; MARGIN-RIGHT: 300px
}
#dgtopboxother {
FLOAT: left; MARGIN-RIGHT: 25px
}
#otherbutton {
HEIGHT: 35px; BACKGROUND-IMAGE: url(PublishingImages/otherbutton.png); BACKGROUND-REPEAT: no-repeat; MARGIN-TOP: 70px; DISPLAY: block; WIDTH: 160px
}
#clmbutton {
BORDER-TOP: #838b8b 1pt solid; HEIGHT: 40px; BORDER-RIGHT: #838b8b 1pt solid; BACKGROUND-IMAGE: url(PublishingImages/CLMbutton.png); BORDER-BOTTOM: #838b8b 1pt solid; BORDER-LEFT: #838b8b 1pt solid; DISPLAY: block
}
#clmbutton:hover {
BACKGROUND-IMAGE: url(/Operations/ProviderOperations/SpecialOps/PublishingImages/CLMbutton2.png)
}
#confbutton {
BORDER-TOP: #838b8b 1pt solid; HEIGHT: 40px; BORDER-RIGHT: #838b8b 1pt solid; BACKGROUND-IMAGE: url(/PublishingImages/CONFbutton.png); BORDER-BOTTOM: #838b8b 1pt solid; BORDER-LEFT: #838b8b 1pt solid; DISPLAY: block
}
#confbutton:hover {
BACKGROUND-IMAGE: url(/PublishingImages/CONFbutton2.png)
}
</style>
<div id="dgwrap">
<div id="dgtopboxleft"><a title="1box" id="CLMbutton" href="####.html"></a></div>
<div id="dgtopboxright"><a title="2box" id="CONFbutton" href="####.html"></a></div>
<div id="dgtopboxother"><a title="3box" id="otherbutton" href="####.html"></a></div>
<div class="dgtopbox">
<h3>Request Policy</h3>
<p style="text-align: left">1.text here.</p>
<p style="text-align: left">2.text.</p>
</div>
</div>
if you are trying to make page responsive you should put all the values in %, give max-width and max-height instead of height and width, try to remove Display:Block as much as possible
Regards
Arjun
I'm trying to center a div within a div with equal margins. If possible, the box should be in the center of the page. So far I've got the following code:
* {
margin: 0px;
padding: 0px;
}
body {
background-color: #3D3D3D;
padding: 30px;
}
#box{
background-color: gray;
border: solid black 4px;
}
#header {
height:60px;
width: 800px;
margin: auto;
border: solid black 2px;
margin-top: 20px;
margin-bottom: 20px;
text-align: center;
line-height: 60px;
background: -webkit-gradient(linear, 0 0, 100% 0, from(black), to(white));
background: -webkit-linear-gradient(left, #52524E, #AAAAA4);
background: -moz-linear-gradient(left, #52524E, #AAAAA4);
background: -o-linear-gradient(left, #52524E, #AAAAA4);
background: linear-gradient(left,#52524E, #AAAAA4);
}
#header a {
font-size: 22px;
color: black;
margin: 30px;
text-decoration: none;
}
img#code {
display: block;
margin: auto;
margin-bottom: 10px;
margin-top: 30px;
width: 500px;
}
#container{
width: 800px;
border: solid white 2px;
margin: auto;
margin-bottom: 30px;
}
.splitter {
width: 500px;
height: 5px;
background-color:black;
margin: auto;
margin-bottom: 10px;
border-radius: 35px;
}
#text1{
background-color: #999999;
margin: auto;
margin-bottom: 30px;
width: 500px;
text-align: left;
border-radius: 5px;
}
.inside{
margin: 30px;
}
#text1 h3{
border-bottom: solid black 1px;
}
.border{
width: 200px;
margin-top: 20px;
margin: auto;
text-align: center;
}
#box2{
width: 500px;
height: 100px;
background-color: blue;
margin: 70px auto ;
position: relative;
}
.midbox{
width: 100px;
height: 50px;
background-color: red;
margin: 30px auto;
position: absolute;
}
and html
<html>
<head>
</head>
<body>
<div id="box">
<div id="header">
About Me
Hobbies
Pictures
Contact Me
</div>
<div id="container">
<img id="code" src="http://i380.photobucket.com/albums/oo250/willc86/IDreaminCode-Micro-TL-P-2_on_GR_BRAINS_GR_TC_on_LtGR_BACKGROUND_400x720in_for_Slideshow.jpg" border="0" alt=" photo IDreaminCode-Micro-TL-P-2_on_GR_BRAINS_GR_TC_on_LtGR_BACKGROUND_400x720in_for_Slideshow.jpg"/>
<div class="splitter"></div>
<div id="text1">
<div class="border">
<h3> Coding in clouds</h3>
</div /* border */>
<br>
<div class="inside">
<p> From coding, to Scripting. We all share
the same fate. We look, obsereve, figure out,
and analyze everything around us. We have an
eye to solve things, put things together, Fix
things, and show our pride when the work is done;
yet many of its roots gets unoticed.
<br> <br> To other souls,
we are just a body stuck in this world, but we, in fact
are the ones that assebles technology, make things whole,
and make everyone become one in this crazy thing
called the Web. We are Software developers. We code,
we fix, and we make it possible.
</div inside>
</div /*text1*/>
<div id="box2">
<div class="midbox">
hello
</div>
</div>
</div /* container */>
</div /* box */>
</body>
</html>
Something like this perhaps?
http://jsfiddle.net/tezf8/1/
You had two margin values on each box, so the "margin: auto;" was overriding the "margin: 30px;" in .testbox2
Here is the CSS:
#testbox{
border: 3px solid red;
width: 200px;
height: 200px;
margin: 50px auto 0;
}
.testbox2{
border: 3px solid blue;
width:100px;
height:100px;
margin: 48px auto;
}
Try This:
CSS
#testbox{
border: 3px solid red;
width: 200px;
height: 200px;
margin:0 auto;
margin-top:40px;
position:relative;
}
.testbox2{
border: 3px solid blue;
width:100px;
height:100px;
position:absolute;
margin:auto;
top:0;
bottom:0;
left:0;
right:0;
}
HTML
<div id="testbox">
<div class="testbox2">
</div>
</div>
When I zoom out far on my browser, Chrome, the info_table moves down. Why does it do this? Also when added overflow: auto; to section, it also moves. What can I do?
Jsfiddle http://jsfiddle.net/PbwS8/3/
CSS
*{
font-size:100%;
margin: 0px;
padding: 0px;
}
body{
width: 100%;
}
#info_table{
float: left;
width: 480px;
margin: 40px 0px 0px 16px;
border-spacing: 0px 0px;
}
#left{
float:left;
margin: 60px 0px;
}
#photo{
float: left;
width: 176px;
height: 176px;
border: 1px solid black;
}
#section{
margin: 160px auto 0px;
width: 675.2px;
height: 320px;
#overflow: auto;
#border:1px solid black;
}
#choosephoto{
width: 64px;
}
#submitwords{
width: 72px;
height: 28px;
margin-left: 104px;
#border:1px solid purple;
}
#wrapper{
display: block;
box-shadow: 3px 10px 5px #888888;
margin: 0px auto;
margin-top: 48px;
width: 1024px;
height: 960px;
overflow: auto;
background:white;
}
HTML
<div id="section">
<body>
</body>
<form>
<div id="left">
<div id="photo">
</div>
<br/>
<input type="file" id="choosephoto" name="uploadphoto"/>
</div>
<table id="info_table">
<tr>
<td>Name:</td>
</tr>
<tr>
<td><input/></td>
</tr>
<tr>
<td>Info:</td>
</tr>
<tr>
<td><textarea></textarea></td>
</tr>
<tr>
<td><button type="submit" id="submitwords">Update</button></td>
</tr>
</table>
</form>
</div>
As for what is going on: It appears the browser is compensating for the zoom level by changing the width of the borders on #photo.
67% Zoom:
50% Zoom:
As for how to fix it? Unless being able to zoom like this is a badly needed, I wouldn't worry about it because it is a lot of work to make sure everything scales correctly.
This is because the width for info_table is set too wide for section width.
For example, reducing the width in info_table would alleviate this. So you could try replacing it with the following.
#info_table{
float: left;
width: 460px;
margin: 40px 0px 0px 16px;
border-spacing: 0px 0px;
}
Having said that, it would be better to read up on using a Grid System (like 960.gs).
Why you have a body tag inside?
Your code is a mess, I re-write it for you here