Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

css flex not working #173

Open
mahfozmt opened this issue May 6, 2023 · 5 comments
Open

css flex not working #173

mahfozmt opened this issue May 6, 2023 · 5 comments

Comments

@mahfozmt
Copy link

mahfozmt commented May 6, 2023

in html not breaking ,

image
but dink pdf generated like this

image

my CSS code is @page {
size: 8.7in 11.56in;
margin-left: 1in;
margin-right: 1in;
margin-top: 0.8in;
margin-bottom: 0.5in;
line-height: 8px;
}

label {
font-size: 20;
}

.grid-container {
display: grid;
grid-template-columns: auto auto auto;
grid-template-rows: wrap;
}

#left {
width: 50%;
float: left;
display: flex;
}

#right {
width: 50%;
float: right;
display: flex;
}

table,
th,
td {
border: 2px solid black;
border-collapse: collapse;
text-align: center;
}

table.Center {
    margin-left: auto;
    margin-right: auto;
}

@media print {
button {
display: none !important;
}

input,
textarea {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

}

button {
display: none !important;
}

input,
textarea {
border: none !important;
box-shadow: none !important;
outline: none !important;
}

/* -------- */
div {
/background: rgba(255, 255, 0, 0.1);/
border: 2px rgba(0, 0, 0, 0.5);
}

#gridBox2 {
display: flex;
justify-content: stretch;
width: 285px;
height: 184px;
}

.top-right-table {
border: 2px solid black;
border-radius: 10px;
}

.top-right-table-body {
display: table;
width: 16.5rem;
margin-left: 0.5rem;
}

.top-right-table-data {
text-align: left;
}

.top-right-table-row,
.top-right-table-data {
border: none;
}

.top-right-table-data label {
    font-size: 18;
    display: inline-block;
}

.main-title {
text-align: center;
border: none;
image-orientation: top;
}

.main-title-1 {
margin-bottom: 2rem;
}

h2.main-title.top-title {
padding-top: 1rem;
}

.top-title {
font-size: 30;
}

.building-details-form {
display: flex;
justify-content: flex-end;
}

.top-center-table-container {
display: flex;
justify-content: center;
}

.top-center-table td,
tr {
border: none;
}

.top-center-table {
border: none;
}

.top-center-table tbody td {
    text-align: left !important;
}

.top-left-picture {
border: 2px solid black;
height: 180px;
width: 160px;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
font-size: 18;
border-radius: 10px;
}

.underlined-input-container {
border-bottom: 2px solid black;
border-bottom-style: dotted;
}

.main-form-element {
display: flex;
margin-top: 5px;
margin-bottom: 5px;
}

.main-form-element .underlined-input-container {
    width: 68%;
}

    .main-form-element .underlined-input-container input {
        width: 100%;
    }

.main-form-element #right .underlined-input-container {
    width: 65%;
}

.full-name-input-container {
flex: 1 !important;
}

.father-name-input-container {
flex: 1 !important;
border-bottom: none;
}

.birth-date-input-container {
flex: 1 !important;
}

.marital-status-input-container {
flex: 1 !important;
}

.permanent-address-container {
display: flex;
flex-direction: column;
}

.upper-form-element {
display: flex;
flex-direction: row;
}

.lower-form-element {
display: flex;
flex: 1 !important;
margin-left: 6.5rem;
margin-top: 0.5rem;
}

.full-width-input-container {
flex: 1 !important;
}

.current-address-input-container {
flex: 1 !important;
}

.work-address-input-container {
flex: 1 !important;
}

.religion-input-container {
flex: 1 !important;
}

.educational-qualification-input-container {
flex: 1 !important;
}

.other-contacts-input-container {
flex: 1 !important;
}

.contact-number-2-input-container {
flex: 1 !important;
}

.contact-number-3-input-container {
flex: 1 !important;
}

.email-id-input-container {
flex: 1 !important;
}

.national-id-input-container {
flex: 1 !important;
}

.passport-number-input-container {
flex: 1 !important;
}

.contact-name-input-container {
flex: 1 !important;
}

.contact-relation-input-container {
flex: 1 !important;
}

.contact-address-input-container {
flex: 1 !important;
}

.contact-number-input-container {
flex: 1 !important;
}

.top-right-underlined-input-container {
border-bottom: 2px solid black;
border-bottom-style: dotted;
flex: 1 !important;
}

.top-right-input {
width: 100%;
}

.spouse-contact-input-container {
flex: 1 !important;
}

.national-id-2-input-container {
flex: 1 !important;
}

.spouse-address-input-container {
flex: 1 !important;
}

.driver-name-input-container {
flex: 1 !important;
}

.driver-address-input-container {
flex: 1 !important;
}

.previous-owner-input-container {
flex: 1 !important;
}

.previous-owner-contact-input-container {
flex: 1 !important;
}

.left-margin-1 {
margin-left: 2.2rem;
}

.previous-owner-address-input-container {
flex: 1 !important;
}

.reason-for-move-input-container {
flex: 1 !important;
}

.current-owner-input-container {
flex: 1 !important;
}

.current-owner-contact-input-container {
flex: 1 !important;
}

.date-of-move-input-container {
flex: 1 !important;
}

.bottom-form-container {
margin-top: 2rem;
justify-content: space-between;
}

.bottom-form-element-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}

#left.bottom-form-element-container {
align-items: flex-start;
}

#right.bottom-form-element-container {
align-items: flex-end;
}

.form-submission-date-input-container {
width: 100% !important;
}

.blank-spacer {
width: 90rem;
}

.signature-input-container {
width: 100% !important;
}

.center-label {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
}

.logo-table,
.logo-table th {
border: none;
}

.logo-table-container {
display: flex;
flex-direction: column;
align-items: center;
font-size: 14;
}

.contacts-table-serial-number {
size: 10;
}

.no-wrap {
white-space: nowrap;
padding: 3px;
}

  • {
    font-family: "Bangla", sans-serif;
    }
    /* -------- */
@zanyar3
Copy link

zanyar3 commented Jun 16, 2023

+1

I have same problem,
any update?

@Jackson-Antunes-Sampaio

+1

I have same problem,
any update?

@schmidom
Copy link

schmidom commented Jan 3, 2024

+1

I have same problem,
any update?
any workarounds?

@raashiqyusufkk
Copy link

@schmidom Kindly refer this link wkhtmltopdf/wkhtmltopdf#1522

@kimcuongden1712
Copy link

using display: table for the parent element
after using display: table-cell for child element

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

6 participants