Jump to content

Responsive Label Text Position


Go to solution Solved by Jan,

Recommended Posts

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!

Link to post
Share on other sites
  • Solution

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?

Link to post
Share on other sites
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?

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...