Responsive Label Text Position

[DataCobalt]

Good morning all,

 

I am currently using the Caspio article to make my datapage responsive, the one issue I am having is trying to adjust the label text so it is left aligned instead of right aligned when the page responds to a smaller view width.

 

I have put the line of code I have been trying to use between two "//PROBLEM CODE HERE//" lines.

 

 

This is a details datapage where the labels are normally right aligned.

<!-- Responsive Code Begin -->
<style>
/* Change max-width to what size you want the form to change at */
@media (max-width: 768px) {
  * {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  }

//PROBLEM CODE HERE//


  #datapage-form labelcell {text-align: left !important;}


//PROBLEM CODE HERE//

  #datapage-form table { width: 100% !important; margin: 0px !important; }
  #datapage-form td { display: block; }

  #datapage-form input, 
  #datapage-form select,
  #datapage-form textarea { width: 100% !important; }

  #datapage-form input[type=radio],  #datapage-form input[type=checkbox] {
    width: auto !important;
  }

  #cbCalendarConteiner {;}



  img[alt~="Calendar"] {
    position: relative; left: -19px; top: 5px;
  }

  img[alt~="Audio"] {
    position: relative; left: -19px; top: 5px;
  }

  img[alt~="Download"] {
    position: relative; left: -46px; top: 5px;
  }  

  #datapage-form input + span > a {
    display: inline-block;
    width: 1px;
    overflow: visible;
    position: relative;
    left: -8px;
  }

  #datapage-form input + a[href="#"],
  #datapage-form input + a[href="#"] + a {
    display: inline-block;
    width: 1px;
    overflow: visible;
    position: relative;
    left: -8px;
  }
}
</style>
<div id="datapage-form">
<!-- Responsive Code End -->

Thank you!

[Jan]

Hello DataCobalt,

 

If I understand correctly, you can replace your line 

#datapage-form labelcell {text-align: left !important;}

 

With the following line:

.cbFormLabelCell {text-align: left;}

Does it work for you?

[DataCobalt]

Works perfect!

 

I can't believe I didn't just try pasting the source code first.

 

Thank you Jan!

[DataCobalt]

Hey Jan,

 

I just now realized that it works out perfectly when the datapage is being previewed, but does not work once deployed to a web page.

 

I was attempting to make the code match the rest of it in syntax but was unsuccessful. Any ideas?

[Jan]

Hello DataCobalt,

 

Then you can delete the ".cbFormLabelCell {text-align: left;}" line and edit the next line:

 

#datapage-form td { display: block; }

 

To

#datapage-form td { display: block; text-align: left !important; }

But now in "Responsive mode" all content is left-aligned, label and data.

 

Does it work for you?

[DataCobalt]

Thank you Jan, that did the trick!