Html - Label text on left page and right page not have alignment issue?

ahmedabdelaziz
September 24, 2023
358 views
0 votes
2 Answers

I work on template using html and CSS . I face issue I can’t make alignment to label text on right page and left page to start from same point.

so exactly I need all labels text on left page to be aligned to start from same point

and also all label text on right to be aligned to start from same point .

so How to do that ?

as sample issue on my design

submit date and employee id not aligned also mobile No and Employee Name also Arabic text

my code details for what I try

.label-container {
  display: flex;
  justify-content: space-between;
}

.left-label {
  text-align: left;
}

.right-label {
  text-align: right;
}

.form-header {
  color: black;
  background-color: gray;
  text-align: center;
  width: 50%;
  padding: 20px;
  margin: 10px auto;
}

.form-header h2 {
  margin: 0;
  font-weight: 500;
}

.form-container {
  border: 2px dashed gray;
  border-bottom: none;
  max-width: 100%;
  padding-bottom: 10px;
  margin: 0 auto;
}

.form-info {
  font-size: 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px 5px;
  background-color: gray;
}

.employee-info {
  display: flex;
  justify-content: space-around;
}

.id_container {
  display: flex;
  gap: 10px;
  margin-left: 10px;
}

.name_container {
  display: flex;
  gap: 10px;
}

.table-border-end {
  height: 50px;
  border-top: 2px dashed gray;
  border-bottom: 2px dashed gray;
}

label {
  display: block;
  font-weight: bold;
  margin-bottom: 5px;
}

input[type="text"] {
  width: 100%;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 3px;
}

h1 {
  text-align: center;
}

form {
  margin-top: 20px;
}

label {
  display: block;
  margin-top: 10px;
  font-weight: bold;
}

input[type="text"], textarea, input[type="date"] {
  width: 100%;
  padding: 5px;
}

input[type="submit"] {
  background-color: #4caf50;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 20px;
}

input[type="submit"]:hover {
  background-color: #45a049;
}

.line-container {
  margin-top: 30px;
}

.line {
  border: none;
  border-top: 1px solid black;
  margin: 0;
}

.solid-table {
  border-collapse: collapse;
  width: 100%;
}

.solid-table th,
.solid-table td {
  border: 1px solid black;
  padding: 8px;
  text-align: center;
}

<div class="form-header">
  <h2> نموذج تسجيل استقاله <br /> Resignation Submission Form </h2>
</div>
<div class="form-container">
  <div class="form-info">
    <div class="form-section">
      <label for="emp-input">To be filled by the Employee</label>
    </div>
    <div class="form-section">
      <p class="fill-by-employee">يتم ملئها من الموظف</p>
    </div>
  </div>

  
  <div class="form">
    <form>
      <div class="employee-info" style="margin-left:10px;">
        <div class="id_container">
          <label for="emp-id">Emp. ID:</label>
          <label for="emp-id">-------------------</label>
  
          <label for="dept-branch">:رقم الموظف</label>
  
        </div>
  
        <div class="name_container">
          <label for="submission-date">Emp Name:</label>
          <label for="submission-date">-----------------------------------</label>
  
          <label for="emp-sign">:اسم الموظف</label>
  
        </div>
      </div>
  
      <div class="employee-info" style="margin-left:30px;">
        <div class="id_container">
          <label for="emp-id">Dept./Branch:</label>
          <label for="emp-id">-------------------</label>
  
          <label for="dept-branch">:الفرع/لاداره</label>
  
        </div>
  
        <div class="name_container">
          <label for="submission-date">Designation:</label>
          <label for="submission-date">-----------------------------------</label>
  
          <label for="emp-sign">:المسمى الوظيفى</label>
  
        </div>
      </div>
      <div class="employee-info">
        <div class="id_container">
          <label for="emp-id">Submittion Date:</label>
          <label for="emp-id">-------------------</label>
  
          <label for="dept-branch">:تاريخ تقديم الاستقاله</label>
  
        </div>
  
        <div class="name_container">
          <label for="submission-date">Mobile No:</label>
          <label for="submission-date">-----------------------------------</label>
  
          <label for="emp-sign">:رقم الهاتف</label>
  
        </div>
      </div>
  
      <div class="employee-info">
        <div class="id_container">
          <label for="emp-id">Last Working Date:</label>
          <label for="emp-id">-------------------</label>
  
          <label for="dept-branch">:اخر يوم عمل</label>
  
        </div>
  
        <div class="name_container">
          <label for="submission-date">Employee Signature:</label>
          <label for="submission-date">-----------------------------------</label>
  
          <label for="emp-sign">:توقيع الموظف</label>
  
        </div>
      </div>
  
     
     
    </form>
  </div>
  <div class="table-border-end"></div>
</div>

desired result I need to get it as below :

Answers

Since you already using flexbox all you need to do is to cahnge the justify-content attribute on your employee-info flex box like this :

.employee-info {
  display: flex;
  justify-content: space-between;
}

And this will be the result:

.label-container {
  display: flex;
  justify-content: space-between;
}

.left-label {
  text-align: left;
}

.right-label {
  text-align: right;
}

.form-header {
  color: black;
  background-color: gray;
  text-align: center;
  width: 50%;
  padding: 20px;
  margin: 10px auto;
}

.form-header h2 {
  margin: 0;
  font-weight: 500;
}

.form-container {
  border: 2px dashed gray;
  border-bottom: none;
  max-width: 100%;
  padding-bottom: 10px;
  margin: 0 auto;
}

.form-info {
  font-size: 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px 5px;
  background-color: gray;
}

.employee-info {
  display: flex;
  justify-content: space-between;
}

.id_container {
  display: flex;
  gap: 10px;
  margin-left: 10px;
}

.name_container {
  display: flex;
  gap: 10px;
}

.table-border-end {
  height: 50px;
  border-top: 2px dashed gray;
  border-bottom: 2px dashed gray;
}

label {
  display: block;
  font-weight: bold;
  margin-bottom: 5px;
}

input[type="text"] {
  width: 100%;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 3px;
}

h1 {
  text-align: center;
}

form {
  margin-top: 20px;
}

label {
  display: block;
  margin-top: 10px;
  font-weight: bold;
}

input[type="text"],
textarea,
input[type="date"] {
  width: 100%;
  padding: 5px;
}

input[type="submit"] {
  background-color: #4caf50;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 20px;
}

input[type="submit"]:hover {
  background-color: #45a049;
}

.line-container {
  margin-top: 30px;
}

.line {
  border: none;
  border-top: 1px solid black;
  margin: 0;
}

.solid-table {
  border-collapse: collapse;
  width: 100%;
}

.solid-table th,
.solid-table td {
  border: 1px solid black;
  padding: 8px;
  text-align: center;
}

<div class="form-header">
  <h2> نموذج تسجيل استقاله <br /> Resignation Submission Form </h2>
</div>
<div class="form-container">
  <div class="form-info">
    <div class="form-section">
      <label for="emp-input">To be filled by the Employee</label>
    </div>
    <div class="form-section">
      <p class="fill-by-employee">يتم ملئها من الموظف</p>
    </div>
  </div>


  <div class="form">
    <form>
      <div class="employee-info" style="margin-left:10px;">
        <div class="id_container">
          <label for="emp-id">Emp. ID:</label>
          <label for="emp-id">-------------------</label>

          <label for="dept-branch">:رقم الموظف</label>

        </div>

        <div class="name_container">
          <label for="submission-date">Emp Name:</label>
          <label for="submission-date">-----------------------------------</label>

          <label for="emp-sign">:اسم الموظف</label>

        </div>
      </div>

      <div class="employee-info">
        <div class="id_container">
          <label for="emp-id">Dept./Branch:</label>
          <label for="emp-id">-------------------</label>

          <label for="dept-branch">:الفرع/لاداره</label>

        </div>

        <div class="name_container">
          <label for="submission-date">Designation:</label>
          <label for="submission-date">-----------------------------------</label>

          <label for="emp-sign">:المسمى الوظيفى</label>

        </div>
      </div>
      <div class="employee-info">
        <div class="id_container">
          <label for="emp-id">Submittion Date:</label>
          <label for="emp-id">-------------------</label>

          <label for="dept-branch">:تاريخ تقديم الاستقاله</label>

        </div>

        <div class="name_container">
          <label for="submission-date">Mobile No:</label>
          <label for="submission-date">-----------------------------------</label>

          <label for="emp-sign">:رقم الهاتف</label>

        </div>
      </div>

      <div class="employee-info">
        <div class="id_container">
          <label for="emp-id">Last Working Date:</label>
          <label for="emp-id">-------------------</label>

          <label for="dept-branch">:اخر يوم عمل</label>

        </div>

        <div class="name_container">
          <label for="submission-date">Employee Signature:</label>
          <label for="submission-date">-----------------------------------</label>

          <label for="emp-sign">:توقيع الموظف</label>

        </div>
      </div>



    </form>
  </div>
  <div class="table-border-end"></div>
</div>

Hi ahmed

first I advise that you stop mixing inline styles with CSS files due to styling specificity …

second your use of the flex items is wrong as well as the grouping of your tags in the html file.

I took the liberty of fixing the html nesting as well as the css addressing of the flex items & the flex implementation in your code (I made the flex 2 levels deep – one for the inline labels & one for the outer layer for the field groupings)

    <div class="form-header">
    <h2> نموذج تسجيل استقاله <br /> Resignation Submission Form </h2>
    </div>
    <div class="form-container">
      <div class="form-info">
        <div class="form-section">
          <label for="emp-input">To be filled by the Employee</label>
        </div>
        <div class="form-section">
          <p class="fill-by-employee">يتم ملئها من الموظف</p>
        </div>
      </div>

  
      <div class="form">
  
        <form class="field-container">
    
          <div class="left">

             <div class="field-container-row">
              <label for="submission-date">Emp Name:</label>
              <label for="submission-date">-----------------------------------</label>
              <label for="emp-sign">:اسم الموظف</label>
            </div>
        
            <div class="field-container-row">
              <label for="emp-id">Emp. ID:</label>
              <label for="emp-id">-------------------</label>
              <label for="dept-branch">:رقم الموظف</label>
            </div>
        
            <div class="field-container-row">
              <label for="emp-id">Dept./Branch:</label>
              <label for="emp-id">-------------------</label>
              <label for="dept-branch">:الفرع/لاداره</label>
            </div>
       
            <div class="field-container-row">
              <label for="emp-id">Submittion Date:</label>
              <label for="emp-id">-------------------</label>
              <label for="dept-branch">:تاريخ تقديم الاستقاله</label>
            </div>      
        
         </div>
     
         <div class="right">
     
           <div class="field-container-row">
              <label for="submission-date">Designation:</label>
              <label for="submission-date">-----------------------------------</label>
              <label for="emp-sign">:المسمى الوظيفى</label>
           </div>
           <div class="field-container-row">
              <label for="submission-date">Mobile No:</label>
              <label for="submission-date">-----------------------------------</label>
              <label for="emp-sign">:رقم الهاتف</label>
           </div>
       
           <div class="field-container-row">
              <label for="emp-id">Last Working Date:</label>
              <label for="emp-id">-------------------</label>
              <label for="dept-branch">:اخر يوم عمل</label>
           </div>
           <div class="field-container-row">
              <label for="submission-date">Employee Signature:</label>
              <label for="submission-date">-----------------------------------</label>
              <label for="emp-sign">:توقيع الموظف</label>
           </div>
       
         </div>


     
    </form>
  </div>
  <div class="table-border-end"></div>
</div>

CSS:

.label-container {
  display: flex;
  justify-content: space-between;
}

.left-label {
  text-align: left;
}

.right-label {
  text-align: right;
}

.form-header {
  color: black;
  background-color: gray;
  text-align: center;
  width: 50%;
  padding: 20px;
  margin: 10px auto;
}

.form-header h2 {
  margin: 0;
  font-weight: 500;
}

.form-container {
  border: 2px dashed gray;
  border-bottom: none;
  max-width: 100%;
  padding-bottom: 10px;
  margin: 0 auto;
}

.form-info {
  font-size: 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px 5px;
  background-color: gray;
}









.field-container{   /* Outer Flex   */
  display: flex;
}

.field-container-row{  /* inner Flex (3 inline item row)  */
  display: flex;
  flex-direction: row;
}

.left {               /* left flex item (outer flex) */
  /* set item size*/
  flex-basis: 50%;    
}

.right{               /* right flex item (outer flex) */
  /* set item size*/
  flex-basis: 50%;
  
  /* Push the flex item 25% to the right */
  position: relative;
  margin-left: 25%;
}








.table-border-end {
  height: 50px;
  border-top: 2px dashed gray;
  border-bottom: 2px dashed gray;
}

label {
  display: block;
  font-weight: bold;
  margin-bottom: 5px;
}

input[type="text"] {
  width: 100%;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 3px;
}

h1 {
  text-align: center;
}

form {
  margin-top: 20px;
}

label {
  display: block;
  margin-top: 10px;
  font-weight: bold;
}

input[type="text"], textarea, input[type="date"] {
  width: 100%;
  padding: 5px;
}

input[type="submit"] {
  background-color: #4caf50;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 20px;
}

input[type="submit"]:hover {
  background-color: #45a049;
}

.line-container {
  margin-top: 30px;
}

.line {
  border: none;
  border-top: 1px solid black;
  margin: 0;
}

.solid-table {
  border-collapse: collapse;
  width: 100%;
}

.solid-table th,
.solid-table td {
  border: 1px solid black;
  padding: 8px;
  text-align: center;
}

Hope I was able to help …

Edit: if there is a problem with text alignment, I suggest you fill the label strings with spaces to make up for the misalignment unless you want to set those strings as flex items & start manipulating them or use other methods to acheive this…

Please signup or login to give your own answer.

Click here to cancel reply.

Html – Label text on left page and right page not have alignment issue?

Answers