You are viewing limited content. For full access, please sign in.

Question

Question

How to Properly Increase Font Size of Multiline Fields in Laserfiche Forms

Forms Forms Layout Designer Version 12
Updated 12 hours ago
asked one day ago

I'm currently customizing a Laserfiche Forms layout and need to increase the font size of multiline text fields (textarea components). I’ve attempted to apply custom CSS targeting these fields, but the changes don’t seem to take effect, especially within tables or certain layout containers.

here's the code:

 

/* =---=---= START OF FORM TABLES =---=---= */

/* ===== PREPARER TABLE ===== */

#q61 input,

#q61 textarea,

#q61 select {

    text-align: center;

    font-size: 25px;

    white-space: normal;

    word-wrap: break-word;

    overflow-wrap: break-word;

}

 

#q61 table th,

#q61 table td {

    text-align: center !important;

    vertical-align: middle !important;

    white-space: normal !important;

    word-wrap: break-word;

    overflow-wrap: break-word;

}

 

/* ===== REVIEWER TABLE ===== */

#q33 input,

#q33 textarea,

#q33 select {

    text-align: center;

    font-size: 25px;

    white-space: normal;

    word-wrap: break-word;

    overflow-wrap: break-word;

}

 

#q33 table th,

#q33 table td {

    text-align: center !important;

    vertical-align: middle !important;

    white-space: normal !important;

    word-wrap: break-word;

    overflow-wrap: break-word;

}

 

/* ===== APPROVER TABLE ===== */

#q38 input,

#q38 textarea,

#q38 select {

    text-align: center;

    font-size: 25px;

    white-space: normal;

    word-wrap: break-word;

    overflow-wrap: break-word;

}

 

#q38 table th,

#q38 table td {

    text-align: center !important;

    vertical-align: middle !important;

    white-space: normal !important;

    word-wrap: break-word;

    overflow-wrap: break-word;

}

 

/* ===== SPECIAL SECTION (e.g., high-risk) ===== */

#q97 {

    background-color: #ffcccc !important;

    color: #b20000 !important;

    font-weight: bold;

    padding: 10px;

    white-space: normal;

    word-wrap: break-word;

    overflow-wrap: break-word;

}

 

/* === COLOR CODING DO NOT DELETE === */

 

.score-green {

  background-color: #28a745 !important; /* Green */

  color: white !important;

  font-weight: bold;

  text-align: center;

}

 

.score-light-green {

  background-color: #92D050 !important; /* Light Green */

  color: black !important;

  font-weight: bold;

  text-align: center;

}

 

.score-yellow {

  background-color: #ffff00 !important; /* Yellow */

  color: black !important;

  font-weight: bold;

  text-align: center;

}

 

.score-red {

  background-color: #ff0000 !important; /* Red */

  color: white !important;

  font-weight: bold;

  text-align: center;

}

/* END OF COLOR CODING */

 

/* === ALL OVER FONT === */

/* ===== GLOBAL FONT & FIELD SIZING ===== */

body,

.cf-form,

.cf-section,

label,

input,

select,

textarea,

span {

    font-size: 40px !important;

    line-height: 1.4;

    white-space: normal !important;

    overflow-wrap: break-word;

}

 

/* ===== HEADINGS ===== */

.cf-form h1 {

    font-size: 60px !important;

}

 

.cf-form h2 {

    font-size: 54px !important;

}

 

.cf-form h3 {

    font-size: 48px !important;

}

 

/* ===== LABELS ===== */

label {

    font-size: 38px !important;

    font-weight: 600;

    display: inline-block;

    margin-bottom: 12px;

}

 

/* ===== INPUTS, SELECTS, TEXTAREAS ===== */

input,

select,

textarea {

    min-height: 60px !important;

    font-size: 36px !important;

    padding: 12px 16px !important;

    box-sizing: border-box;

}

 

/* Textareas taller */

/*textarea {

    min-height: 120px !important;

    resize: vertical;

}*/

 

/* ===== DATE FIELDS ===== */

input[type="date"],

input[placeholder*="DD-MM"] {

    min-width: 300px !important;

    min-height: 60px !important;

    font-size: 36px !important;

    padding: 12px 16px !important;

    margin-bottom: 30px !important;

    box-sizing: border-box;

}

 

/* ===== DROPDOWNS ===== */

select {

    min-width: 320px !important;

    cursor: pointer;

}

 

/* ===== CHECKBOXES ===== */

/* Make checkbox bigger and vertically aligned */

input[type="checkbox"] {

    width: 40px !important;

    height: 40px !important;

    vertical-align: middle;

    margin-right: 12px;

    cursor: pointer;

}

 

/* Label next to checkbox */

input[type="checkbox"] + label,

label[for^="checkbox"] {

    font-size: 36px !important;

    vertical-align: middle;

    cursor: pointer;

}

 

/* ===== LOOKUP FIELDS ===== */

/* Assuming lookup fields use input or select */

input.lf-lookup-input,

select.lf-lookup-select {

    min-width: 320px !important;

    min-height: 60px !important;

    font-size: 36px !important;

    padding: 12px 16px !important;

    box-sizing: border-box;

}

 

/* ===== TABLES ===== */

#q61 table th, #q61 table td,

#q33 table th, #q33 table td,

#q38 table th, #q38 table td {

    font-size: 40px !important;

    vertical-align: middle !important;

    text-align: center !important;

    padding: 15px !important;

}

 

/* ===== PARAGRAPHS ===== */

.cf-form p {

    font-size: 40px !important;

    margin-bottom: 30px;

}

/* Flatpickr header container: ensure enough width and flex layout */

.flatpickr-months {

    font-size: 20px !important;

    padding: 8px 12px;

    display: flex !important;

    justify-content: center !important;

    align-items: center !important;

    gap: 12px !important;

    width: 100% !important;  /* take full width */

    box-sizing: border-box;

}

 

/* Month + Year container */

.flatpickr-current-month {

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    gap: 12px !important;

    flex-wrap: nowrap !important;

    min-width: 200px !important;  /* make sure enough space */

}

 

/* Month dropdown */

.flatpickr-monthDropdown-months {

    font-size: 20px !important;

    padding: 6px 10px !important;

    min-width: 120px !important;  /* ensure visible */

}

 

/* Year input */

.flatpickr-current-month .numInput.cur-year {

    font-size: 20px !important;

    width: 100px !important; /* slightly wider */

    padding: 6px 10px !important;

    text-align: center !important;

    box-sizing: border-box !important;

    border-radius: 4px;

    border: 1px solid #ccc;

}

 

/* Prevent year input spinner arrows */

.flatpickr-current-month .numInput.cur-year::-webkit-inner-spin-button,

.flatpickr-current-month .numInput.cur-year::-webkit-outer-spin-button {

    -webkit-appearance: none;

    margin: 0;

}

 

/* Arrows */

.flatpickr-prev-month svg,

.flatpickr-next-month svg {

    width: 20px;

    height: 20px;

    fill: #333;

}

 

/* === Weekday Headers === */

.flatpickr-weekdaycontainer {

    display: flex;

    justify-content: space-around;

}

.flatpickr-weekday {

    font-size: 18px !important;

    font-weight: bold;

    padding: 6px 0;

}

 

/* === Day Grid === */

.flatpickr-day {

    font-size: 16px !important;

    width: 44px;

    height: 44px;

    padding: 6px;

    margin: 2px;

    line-height: 32px;

    display: inline-flex;

    justify-content: center;

    align-items: center;

}

 

/* === Selected / Today Styling === */

.flatpickr-day.today {

    border: 2px solid #007bff;

}

.flatpickr-day.selected {

    background-color: #007bff;

    color: #fff;

}

 

/* === Prevent Calendar from Being Cut Off === */

.cf-form,

.cf-section {

    overflow: visible !important;

}

 

/* ==FOR SIGNATURE BUTTON== */

.signature-button {

    font-size: 20px !important;  /* malaking font */

    padding: 16px 20px !important; /* mas malaki ang button */

    min-width: 200px !important;  /* fixed minimum width */

    min-height: 60px !important;  /* fixed minimum height */

    border-radius: 8px !important; /* optional: bilugan ang corners */

    cursor: pointer;

}

 

/* FOR THE CHECK BOXES, DROP-DOWN, AND LOOK UP CHOICES */

 

input.lf-lookup-input,

select.lf-lookup-select,

select {

    font-size: 40px !important;

    min-height: 80px !important;

    min-width: 500px !important;

    padding: 20px 24px !important;

    box-sizing: border-box;

    line-height: 1.4 !important;

}

 

/* Choices sa dropdown at lookup */

select option {

    font-size: 38px !important;

    padding: 20px !important;

}

 

/* ===== LAKIHAN ANG CHECKBOXES ===== */

input[type="checkbox"] {

    width: 48px !important;

    height: 48px !important;

    margin-right: 16px !important;

    vertical-align: middle;

    cursor: pointer;

}

 

/* Label ng checkbox */

input[type="checkbox"] + label,

label[for^="checkbox"] {

    font-size: 38px !important;

    vertical-align: middle;

    cursor: pointer;

}

 

textarea {

    min-height: 160px !important;

    font-size: 38px !important;

    padding: 20px !important;

    line-height: 1.4 !important;

    resize: vertical !important;

    box-sizing: border-box;

    white-space: normal !important;

    word-wrap: break-word !important;

    overflow-wrap: break-word !important;

}

these are the fields with small input text that I want to increase:

0 0

Replies

replied one day ago • Show version history

This should work - Just replace #q76 with your table field ID's:

#q76 input,
#q76 .cf-field > div,
#q76 .cf-field > *, 
#q76 select {
  font-size: 25px;
}

Then at the end of your CSS, add this to shrink down the Search bar text:

.repeatables-pagination-search {
  font-size: 12px !important;
}
2 0
replied one day ago

it worked, thanks for the answer Sarah!

1 0
replied 14 hours ago

Perfect! No problem at all, happy to help. :)

0 0
replied 12 hours ago

@████████ please mark @████████post as the answer.

0 0
You are not allowed to follow up in this post.

Sign in to reply to this post.

Details
Related Posts
Loading ...