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

Question

Question

How to change the length of the datetime field in a table?

Forms Forms Layout Designer
Updated June 26, 2023
asked on June 5, 2023 • Show version history

Hello, I have a form that has a datetime field on it and I know the input won't be large so I've tried to shorten the width of the field.  However, there is a space AND the date picker icon that does not allow me to do this.  The picture included is what happens when I try to shorten the width, with the field getting covered up. I would love some help with this please and thank you.

0 0

Answer

SELECTED ANSWER
replied on June 26, 2023

I figured it out! I had the default label alignment set to "Left" on the form and I guess it was messing with the date field within the table! So what I did was add the class "top_label" that I had created that makes the field label set to the top.

CSS for top_label:

.top_label .form-q {
    display: block;
}

Thank you all for helping!

1 0
replied on June 26, 2023

Oh!  And that's why I couldn't replicate the issue - since I (out of long habit) set labels to top as the very first thing I do when creating any forms.

0 0

Replies

replied on June 23, 2023

I'm not smarter than Matthew as he's one of the forum greats here, but have you given the css rules you have a border property like:
 

border: 1px solid red;
border: 1px solid blue;
etc

This would help see what all classes are affected by your width properties.

Also, you could download the form and upload it here I think for someone to look at it. I believe we are allowed to do that?

1 0
replied on June 23, 2023

I just masquerade as a smart person - it's all an act!  wink

1 0
replied on June 23, 2023

Haha! Your reputation itself says otherwise!

0 0
replied on June 5, 2023

Hi,

 

I was able to adjust the size in a table with the new modern designer. Not sure if this is what you were looking to do.

 

0 0
replied on June 6, 2023

Yeah, that's what I would want done but instead of M/D/YYYY, I would want MM/DD/YYYY, how did you do it?

0 0
replied on June 5, 2023 • Show version history

Based on your screenshot, it looks like you are using the Forms Layout Designer (new designer).  In the Forms Layout Designer, you can resize the table columns by dragging on the border between columns.  I don't believe I have personally seen that issue with a date field being kind of cut off in the table like that.

Can you verify what version of Forms you are on?  To see the version number, in Forms go to the [Your Name] menu and select About.

Also, have you applied any CSS to this field to impact how it is displayed?

0 0
View 5 previous replies
replied on June 6, 2023

I'm on "Laserfiche Forms Professional Version 11.0.2212.30987" and there is some css:

 

.pdc fl-date-time {
  padding-top: 2px !important;
  padding-bottom: 0px !important;
}

0 0
replied on June 6, 2023

That's the same version I'm on, and it's only a bit behind the most recent release (version 11.0.2212.31000) from a couple weeks ago.

Do you have any other CSS that could be impacting that field.  I've tried to replicate your table with the CSS you provided, along with similar CSS for the single-line and number fields, and I see it looking like this.  It isn't losing part of the field:

 

This is the only CSS I'm using on this test: 

.pdc fl-date-time {
  padding-top: 2px !important;
  padding-bottom: 0px !important;
}
.pdc fl-single-line {
  padding-top: 2px !important;
  padding-bottom: 0px !important;
}
.pdc fl-number {
  padding-top: 2px !important;
  padding-bottom: 0px !important;
}

 

0 0
replied on June 6, 2023

This is all of the css that I'm using on this form:

 

.form-info {
  display: none;
}

.cf-formtitle {
  display: none;
}

.pane {
  padding-top: 1px !important;
  padding-bottom: 3px !important;
  padding-left: 0px !important;
  padding-right: 0px !important;
}

.hidelabel .section-title {
  display: none;
}

.top_label .form-q {
    display: block;
}

.nowrap {
  white-space: nowrap;
  width: 500px;
}

.form-q {
  line-height: 20px;
}

/* No Padding For Single Line */
.pdc fl-single-line {
  padding-top: 2px !important;
  padding-bottom: 0px !important;
}

.pdc fl-multi-line {
  padding-top: 2px !important;
  padding-bottom: 0px !important;
}

/* No Padding For Single Line */
.pdc fl-date-time {
  padding-top: 2px !important;
  padding-bottom: 0px !important;
}

.pdc fl-file-upload {
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}

.pdc fl-number {
  padding-top: 2px !important;
  padding-bottom: 0px !important;
}

.pdc fl-checkbox {
  padding-top: 2px !important;
  padding-bottom: 0px !important;
}

.pdc fl-signature{
  padding-top: 2px !important;
  padding-bottom: 2px !important;
}

 

I can't honestly remember or know if any of it would affect my table.

0 0
replied on June 6, 2023

FYI - you can use the "{...} code" button on this site to make your code easier to read.

Are you applying CSS Classes to any of the specific fields?  I'm still not replicating the exact issue from your screenshot, but it did act very weird in the designer when I added that "nowrap" class to the date field in the table.

0 0
replied on June 6, 2023

There are no CSS classes assigned to that specific date field.

0 0
replied on June 6, 2023

Ugh.  I'm not certain why it's doing it to you, but not when I try to replicate it.

What happens if you rearrange the columns in the table, such as moving the date after the invoice number, does it still continue to cutoff part of the field width?

0 0
replied on June 7, 2023

It does, here's a screenshot:

0 0
replied on June 7, 2023

I'm really sorry, but I'm kind of out of ideas.  Because I can't replicate the issue based on the information you have shared here.

Even if I make the field super small, it still doesn't exceed the width of the column.

The only way I could replicate it in any form was with extra CSS, like this: 

.pdc fl-date-time {
  width: 120% !important;
}

 

But of course, that's not the issue, because you've provided all the CSS you have on your form, and nothing in your CSS is doing anything like that.

 

It can be a little tricky sometimes, but you should be able to dig through the field and its various components in the "Inspect" part of your browser to try to identify what is causing the behavior.  For example, the CSS I included just above looks like this in the "Inspect" screen:

 

I'm sorry I wasn't able to be of more assistance.  Hopefully someone smarter than me chimes in and know what is happening here.  Failing that, you may want to ask your Solution Provider to take a look.  Good luck.

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

Sign in to reply to this post.

Details
Related Posts
Loading ...