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

Question

Question

Modern Designer Set Column Width

Forms Version 11 Self-Hosted Forms Layout Designer
Updated June 14
asked on June 3

Anyone have a tip for setting a column to a set number of px?

These look ridiculous ha ha:


I have been going round & round with CSS trying to adjust it, but it appears that it is taking my CSS and classifying it a certain way that doesn't reach the actual form:


Anyone figure a way to 'lock' the width of a column? I have tried using bootstrap in the css as well to no avail. 

 

Thank you very much in advance :)

1 0

Answer

SELECTED ANSWER
replied on June 13

I think it does make sense to provide an override for width in the advanced pane of field settings. Something that accepts precents or other units like px/rem/em. At somepoint I do want to spec out more support for grid classes so you can handle medium/large breakpoints on your own without CSS but I seem to be the only one that needs that haha. 

Anyway, the following CSS seems to work for me. Not a fan of needing all of the !important flags, but its the only way to override inline styles on the html elements. Add the custom-table class to your table so you dont break all the other tables on your form. The first two rules will fix all columns to be auto by default, and then the subsequent rules are for the individual column sizes. Make sure you are targeting the correct columns in the nth-child selector and copy that for each column you need to not be auto. It doesn't work in the designer view but that is probably a good thing as small columns are hard to work with there.

/* make all columns auto-size by default */
.custom-table table colgroup > col {
  width: auto !important;
}
/* remove all static widths from table cells */
.custom-table table td {
  width: unset !important;
}
/* add specific column widths where needed */
.custom-table table colgroup > col:nth-child(1) {
  width: 10% !important;
}
.custom-table table colgroup > col:nth-child(2) {
  width: 50% !important;
}

 

6 0

Replies

replied on June 3 • Show version history

With the way the Modern Designer is set-up to handle the width of the fields by sliders on the Layout page, it's going to be really complicated to get the table structure resized the way you want via CSS and not have the system undo it when you do things like add/delete rows on the table.  It would be much easier to size the columns in the table using the built-in functionality to drag the sliders to resize the columns.

If the issue is that you just want want those two columns not to be so wide and fill the full width of the form, then I would just put an empty Custom HTML element either to the right of those fields within the table, or to the right of the table itself to force them to a smaller width.

Additional side-note: With your CSS that is formatting the header of the table - I would not recommend using those "pdc" class names to target elements.  I would recommend adding a CSS Class name to the table and using that to target your CSS, like this (which has myTable as the class on the table): 

.myTable table th {
  background: #337ab7;
  color: white;
  text-align: left;
}

 

1 1
View 17 previous replies
replied on June 3

It's entirely possible to resize table columns with CSS. Here's my coding showing it working:

100px:

200px:

1 0
replied on June 3

@████████- does that work on the actual form, and not just the preview in the Layout page?  I was playing around with it, and could get it working on the Layout preview, but not in the actual form, at least not in a way that didn't revert as soon as I added or deleted a row.

0 0
replied on June 3 • Show version history

Matt, I like this idea of repurposing the customHTML field. One thing to note is that there will be on add rows to this table, it is static. 

How do you resize using the customHML field? set the width on that?

Can we use bootstrap in the modern designer? I don't see that working either..

0 0
replied on June 3 • Show version history

If the number of rows are fixed, then I was able to resize the columns with CSS by changing the display setting of the entire table (to block or something similar).  But I was having a hard time getting the individual columns to be different widths (they were all the same width, and changing one changed all), and it reverted back to the default look as soon as I added or removed a row.

I haven't even tried using bootstrap, but I would guess either it isn't possible, or it at least isn't going to be easy to get it included.

0 0
replied on June 3

@████████It works on the actual form, as well as the form when saved to the repository. My use was to set a min-width so pricing columns didn't overflow into multiple rows, but the opposite should work the same.

1 0
replied on June 3

I'm surprised - because that wasn't the behavior I was seeing at all.

Out of curiosity - what version are you on?  I'm on Version 11.0.2311.50556

0 0
replied on June 3

I'm on 11.0.2311.50553

0 0
replied on June 3

I'm on Cloud, maybe that's making the difference?
I just double checked that it was showing on the form itself with the coding I screenshotted, and it wasn't, but adjusting it to min-width: 200px instead of width: 200px worked. I tested with max-width: 20px and that worked as well. Hopefully you can get it working on your end!

0 0
replied on June 3

thanks! I'm on prem, I bet that is a difference. 

1 0
replied on June 3

Oh, if you're on Cloud - that could actually mean some differences in the structure.  Forms Cloud versus Self-Hosted is closer to each other than a lot of the other programs, but there are still differences, this could be one.

1 0
replied on June 3

Just to show I'm not crazy..

Max width 20px:

Min width 200px:

Hopefully the functionality will come to both of you soon!!

1 0
replied on June 3

haha - no one thinks you're crazy - just not seeing the same behavior here.

I'm glad it works for you - it is nice to have the option to control it that precisely.

The tricky thing is that it could be a really small difference between the default CSS that is applied to the tables in Cloud versus Self-Hosted that changes how it acts with our custom CSS, and prevents it from working the same way.

1 0
replied on June 3

What's bizarre to me is that you're able to alter the column width for all columns using a CSS class for the table as a whole, but you're not able to isolate specific columns using a custom CSS class for the individual fields/columns within the table.

Anyways, hopefully Laserfiche is on it for you guys!

1 0
replied on June 13

@████████ any tips on locking a column width here? I ran into this need again today on a separate project. Thanks!!

0 0
replied on June 13

What is your goal with the column widths that makes the field width sliders not work? You could theoretically do it with CSS but it would have to be very specific to your use case.

1 0
replied on June 13

Chris probably has his own answer, but I have a couple situations where the sliders seem lacking:

  1. Adding a new field to the table resets everything to equal width. So if I've taken time to set the columns the way I like it--potentially having the form in use for a while--and then there is need to add another column, I have to fenagle it all again once I add the new column. In particular, there are some fields that I work hard to find the right balance of wide enough to show the relevant data (whether manual or from lookup), but skinny enough to leave room for the other columns. Sometimes it takes quite a bit of back and forth, especially since I tend to set my forms to 950 width so what you see in the designer is not the same as the end result.
  2. Sometimes there is reason to have a couple of tables on the form that have a similar number of columns. I would prefer to them to be consistent in their column width because it looks better.
1 0
replied on June 13

It would be nice if we could disable the auto sizing of all items in a row when we add a new item to the row (just resize a single item, or stick the new item off the side or something), and then being able to set the width of the fields by a numerical value in addition to the slider.  smiley

2 0
replied on June 13 • Show version history

Glad I am not alone on this one, thanks guys for the added uses cases. 

Zac, my problem is that I have a very narrow column with 1 or 2 digits in it and uses 3 or 4 times as much space as I need. So I want to lock them to specific width. The sliders seem to only allow a % that adjusts with the screen size. I see the value in that for adaptability, but that isn't my case here. My biggest problem is that the sliders are not effective after a certain number of columns exist:

Highlighted sections are as small as I can get them:

This translates to (checkbox on far right hidden):


I'd like to give the name and address fields a wider size ideally. Also the format is wonky with the aID column being so wide. 

I did make a run at using CSS to lock the width on the column and header but have failed there. If you can tell me the best way to do that, or if you have any better suggestions, I'd be really greatfull :)

Thanks so much!

1 0
SELECTED ANSWER
replied on June 13

I think it does make sense to provide an override for width in the advanced pane of field settings. Something that accepts precents or other units like px/rem/em. At somepoint I do want to spec out more support for grid classes so you can handle medium/large breakpoints on your own without CSS but I seem to be the only one that needs that haha. 

Anyway, the following CSS seems to work for me. Not a fan of needing all of the !important flags, but its the only way to override inline styles on the html elements. Add the custom-table class to your table so you dont break all the other tables on your form. The first two rules will fix all columns to be auto by default, and then the subsequent rules are for the individual column sizes. Make sure you are targeting the correct columns in the nth-child selector and copy that for each column you need to not be auto. It doesn't work in the designer view but that is probably a good thing as small columns are hard to work with there.

/* make all columns auto-size by default */
.custom-table table colgroup > col {
  width: auto !important;
}
/* remove all static widths from table cells */
.custom-table table td {
  width: unset !important;
}
/* add specific column widths where needed */
.custom-table table colgroup > col:nth-child(1) {
  width: 10% !important;
}
.custom-table table colgroup > col:nth-child(2) {
  width: 50% !important;
}

 

6 0
replied on June 14

You're the best! This was exactly what I needed. I saw the colgroups in the html and tried to manually change them but didn't get any results so I moved on. My OCD is happy now :)

0 1
replied on June 3

Try changing

width: 83px !important;

to:

max-width: 83px !important;

See if that works for you. Fingers crossed!

0 0
replied on June 3

You should only need:

.YourClassName {
max-width: 83px !important;
}
0 0
replied on June 3

Ah that didn't work. I'll post the things I've tried so far for reference:

 

.workMonthHours table-col-130 {
  width: 83px !important;
}

.workMonthHours table thead tr .fl-table.fl-component th.table-header-cell:first-child
 {
  width: 83px!important;
}

 

0 0
View 1 previous reply
replied on June 3 • Show version history

Instead of 

.workMonthHours table-col-130 {

Try:

#q1 {   (Replacing 1 with the field number for the column you are trying to select)

Edit: Ignore this one, I could have sworn I'd used it in the past but it's not working for me now.

0 0
replied on June 3 • Show version history

Is there a reason you're trying to use multiple selectors? Could you create a new CSS class that only targets those two fields and use that?

For example if you just use this, it should work for you:

.workMonthHours {
  width: 83px !important;
}
0 0
replied on June 3

Ya, putting the width on the specific cell is where I started, then I slowly became more & more specific. 

Still, without adjusting the column header, it won't matter what I set the individual input field to. So, I have been focusing on this element where .workMonthHours is the class on the table itself:

.workMonthHours table thead tr  th:first-child

I'm just not certain this is even possible any more in the modern designer...

0 1
replied on June 3

It's possible, I'm currently doing it on one of my tables.

What you need to do is set a custom CSS class for the field (header) you are wanting to target, and use that CSS class in the code specified above. You don't need to target the header itself, just the CSS class for the field that the header represents. If that makes any sense at all.

In short, try being a bit less specific and see if you can get that working.

Let me know if I'm not making sense and I'll try to rephrase!

1 1
replied on June 3

Sarah, are you using the modern designer (no classic designer)?

I tried doing just what you suggested but no luck :)

You are not allowed to follow up in this post.

Sign in to reply to this post.

Details
Related Posts
Loading ...