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

Question

Question

CSS to Widen One Field of Eight

Forms Web Customizations Version 10
Updated November 17, 2017
asked on November 16, 2017

I'm working on building a mileage reimbursement form that has a drop downs with predetermined locations.  When two predetermined locations are selected, it will auto fill miles traveled based on a lookup of a SQL table.  If Other is selected on either the departure or arrival locations, a field shows to detail that other location.

 

I'm doing this using standalone fields in a collection rather than a table, because my accounting department would prefer the Other Columns to not show unless necessary.  (Other is anticipated to be used less than 5% of the time.)

Here is the view when none of the fields are set to Other:

Here is the view when Other is Selected, displaying the two additional Columns:

As you can see, I can get the fields to line up as needed, but I'm having some trouble making the Purpose field a bit wider, as that one will likely need more space.  Also as can be seen, we can take shrink the Date, Miles Traveled, and Amount Fields if needed.  I'd like to avoid making any remaining fields smaller if possible.

 

Here is my CSS:

#q70, #q71, #q72, #q73, #q74, #q78, #q76, #q77 {display: inline-block; width: 12.5%; vertical-align:top;}

/* Date */
#q70 label {width: 90%;}
#q70 .cf-field {width: 10%;}
#q70 .cf-small {width: 75%;}

/* To */
#q71 label {width: 90%;}
#q71 .cf-field {width: 10%;}
#q71 .cf-medium {width: 100%;}

/* Other (To) */
#q72 label {width: 90%;}
#q72 .cf-field {width: 10%;}
#q72 .cf-medium {width: 100%;}

/* From */
#q73 label {width: 90%;}
#q73 .cf-field {width: 10%;}
#q73 .cf-medium {width: 100%;}

/* Other (From) */
#q74 label {width: 90%;}
#q74 .cf-field {width: 10%;}
#q74 .cf-medium {width: 100%;}

/* Purpose */
#q78 label {width: 90%;}
#q78 .cf-field {width: 10%;}
#q78 .cf-xlarge {width: 100%;}

/* Miles Traveled */
#q76 label {width: 90%;}
#q76 .cf-field {width: 10%;}
#q76 .cf-medium {width: 75%;}

/* Amount */
#q77 label {width: 90%;}
#q77 .cf-field {width: 10%;}
#q77 .cf-medium {width: 75%;}

I've been doing everything based on a percentage, rather than a firm pixel count, but if that's the only way to get it to work, so be it.

 

Thanks!

1 0

Answer

SELECTED ANSWER
replied on November 16, 2017 • Show version history

Now that you mention it, that makes sense. In my case I was working on a row-by-row basis so I wanted the column header to remain available.

Okay, if you feel like getting fancy try this,

  1. Set a custom CSS class on your table and one for each column that you need to evaluate or hide/show.
  2. Use something like the following code in your JavaScript
$(document).ready(function(){
  $('.column3').hide();
  $('.column3 input').hide();
  $('#' + $('.column3').attr('data-col')).hide();
  
  $('.table1').change(function(){
    var showHeader = false;
    
    $('.column1 select').each(function(i,elem){
      if($(elem).val() == 'Yes'){
        $('.column3 input').eq(i).show();
        showHeader = true;
      } else {
        $('.column3 input').eq(i).hide();
      }
    });
    
    if(showHeader){
      $('.column3').show();
      $('#' + $('.column3').attr('data-col')).show();
    } else {
      $('#' + $('.column3').attr('data-col')).hide();
      $('.column3').hide();
    }
  });
});

What this does:

  1. Every time the Table (custom class "table1") changes
    • Check each Column one value
      • If it is "Yes" then show the Column 3 field for that row
      • If it is not "Yes" hide the Column 3 field for that row
    • Check if ANY "yes" values were found
      • If so, show Column 3 (header and table cells)
      • If not, hide Column 3 (header and table cells)

 

Doing so, I got the following results

EDIT: Added missing closing parentheses to the code.

0 0

Replies

replied on November 16, 2017

Hey @████████ - don't know if this will be of any help to you, but here is some CSS that I re-use on a lot of my forms.  You use it by setting CSS Class names on the individual fields (like hiddenField, halfWidth, etc.) and setting the individual fields to x-large size on the Layout page. 

/*set re-usable field layouts*/
.hiddenField {display: none!important;}
.noLabel .cf-label {display : none;} 
.fifteenPercentWidth {display : inline-block; width : 15%;}
.fifteenPercentWidth .cf-field {min-width : 80px;}
.quarterWidth {display : inline-block; width : 25%;}
.oneThirdWidth {display : inline-block; width : 33%;}
.fortyPercentWidth {display : inline-block; width : 40%;}
.halfWidth {display : inline-block; width : 50%;}
.twoThirdsWidth {display : inline-block; width : 67%;}
.threeQuarterWidth {display : inline-block; width : 75%;}
.quarterWidthDateField {display : inline-block; width : 25%;}
.quarterWidthDateField .cf-xlarge {width : 80%;}
.superWideLabel .cf-label {width : 300%; max-width : 300%;} 
.alignVerticalTop {vertical-align: text-top;}

 

2 0
replied on November 16, 2017

Thanks!  I'll look to see if I can incorporate these into this form.  If nothing else, they are handy to have for other cases too.

1 0
replied on November 16, 2017 • Show version history

On a side note. You can hide specific columns (even per row) with Field Rules, so based on what you're describing you should be able to avoid using independent fields.

As an example

  • I have a table with 2 columns (A and B) and Column A is a drop down with 3 options (1,2,3).
  • I can set a Field Rule to Show Column B when Column A = 1
    • If I select Option 1, Column B appears
    • If I select Options 2 or 3, Column B remains hidden

 

If the condition is based on another column, it works on a row-by-row basis. If the condition is based on an outside field, then it would apply to the entire column.

1 0
View 3 previous replies
replied on November 16, 2017 • Show version history

That was my original plan, to do field rules with a table, but I'm not able to hide the column, only the field.  

 

Initial Table View with Nothing Selected

View when the To or From Fields have other selected:

As such, I went with a home built collection, using field rules to hide the Other (To) and Other (From) Columns and Fields.

 

Am I missing a setting somewhere to actually hide the Other (To) and Other (From) Columns in a Table?

 

Edit: I reread your last sentence, and I think you did answer my question.  I need to have the Other (To) and Other (From) be based on fields outside of the table.  Is that correct?

0 0
SELECTED ANSWER
replied on November 16, 2017 • Show version history

Now that you mention it, that makes sense. In my case I was working on a row-by-row basis so I wanted the column header to remain available.

Okay, if you feel like getting fancy try this,

  1. Set a custom CSS class on your table and one for each column that you need to evaluate or hide/show.
  2. Use something like the following code in your JavaScript
$(document).ready(function(){
  $('.column3').hide();
  $('.column3 input').hide();
  $('#' + $('.column3').attr('data-col')).hide();
  
  $('.table1').change(function(){
    var showHeader = false;
    
    $('.column1 select').each(function(i,elem){
      if($(elem).val() == 'Yes'){
        $('.column3 input').eq(i).show();
        showHeader = true;
      } else {
        $('.column3 input').eq(i).hide();
      }
    });
    
    if(showHeader){
      $('.column3').show();
      $('#' + $('.column3').attr('data-col')).show();
    } else {
      $('#' + $('.column3').attr('data-col')).hide();
      $('.column3').hide();
    }
  });
});

What this does:

  1. Every time the Table (custom class "table1") changes
    • Check each Column one value
      • If it is "Yes" then show the Column 3 field for that row
      • If it is not "Yes" hide the Column 3 field for that row
    • Check if ANY "yes" values were found
      • If so, show Column 3 (header and table cells)
      • If not, hide Column 3 (header and table cells)

 

Doing so, I got the following results

EDIT: Added missing closing parentheses to the code.

0 0
replied on November 17, 2017

Maybe I'm missing something.  I'm using your exact JavaScript, except I've given the To column the css class of column2.  [I've given the table the class of table1, and the Other (To) column the class of column3]

 

Something right off the get go isn't working though, as the column3 isn't being hidden.

0 0
replied on November 17, 2017

Which element exactly is still present? For example, do you see the column header only, both the header and the fields, etc.

A screenshot would make it easier to troubleshoot. I would also suggest opening it in Chrome and checking the debug console for errors.

Also, I know you didn't make many changes to the code, but please include that as well just to be thorough.

0 0
replied on November 17, 2017

I was in the middle of gathering a screenshot and such, when I gave the debug in Chrome a try.  That worked, as it showed that line 26 of your JavaScript you provided was missing a close parenthesis.  ")"  That fixed it!

 

For what its worth, missing the ) was causing the column and the field to not hide at all -- essentially it was behaving like the JavaScript wasn't even there.

0 0
replied on November 17, 2017

Yea, I copied it from a larger collection of code and I have a bad habit of missing brackets and parentheses haha. Glad that's all it was!

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

Sign in to reply to this post.

Details
Related Posts
Loading ...