Jump to content
Sign in to follow this  
DataCobalt

Responsive Label Text Position

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!

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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?

Share this post


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?

Share this post


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...
Sign in to follow this  

×
×
  • Create New...