Issue with new class

[Tricia S.]

Hi Alexander,

I’m having a number of issues with the a new classes I noticed was added in April or so. Its the dffs_req_and_tt_wrap and related classes and place holders.

I’m still on the 4/15 version and I didn’t see anything the change log otherwise I’d just update.
I have tried a number of different ways to deal with it but now there’s another issue and I’m wondering if theirs away I can just get rid of it… These are all just my preferences but I did discover a bug.
The first one is that it creates an very noticeable amount of space in the SBS setting for any special fields that have been wrapped by it. And once it becomes required It pushes it out of alignment.

I attempted to fix it with the following code:

.dffs_req_and_tt_wrap{
float:left;
z-index:1;
position: absolute;
}

That worked well until I added a number of CCDWs in a SBS. They would end up all on top of each other because of my code above. So I would go to the Field CSS :

dffs_req_and_tt_wrap{position: unset;}

And that worked well until I made some of the CCDWs Read-Only.

So now some of this seems more of a bug. It seems that the dffs_req_and_tt, the CCDW and the Read-Only classes conflict with each other especially when switching between tabs. You end up with the readonly and the dropdown showing…

Please let me know if you have any questions.

Attachments:

1. 

   SBS-padding.jpg
   

2. 

   Extra-space-after-CCDW.jpg
   

3. 

   SBS-required-issue.jpg
   

4. 

   conflict-CCDW-and-readonly.jpg
   

[Tricia S.]

Ran out of attachments. Here’s what the styling looks like with my custom CSS.

Attachments:

1. 

   z-setting.jpg
   

[Alexander Bautz]

Hi,
I’m not able to recreate these issues. Are you 100% sure you have updated the DFFS_frontend.css file to the correct version (the version shipped with the DFFS package you have downloaded)?

Alexander

[Tricia S.]

Hi Alexander,

I’m pretty sure its the latest version. Version screen shot include.

I included some front/back end shots. My field labels tend to be hidden.

I am on the 4/15/2020 version. Is it something I should update the may version?

Attachments:

1. 

   Version.jpg
   

2. 

   Backend.jpg
   

3. 

   Front-end.jpg
   

4. 

   Backend-for-DateSBS.jpg
   

[Tricia S.]

I removed all my custom CSS related the dffs_req_and_tt.
The items in red are all from a CCDW. Included the readonly which is set by an on load rule.

Attachments:

1. 

   Form-no-custom.jpg
   

[Alexander Bautz]

Thanks you for the detailed information. The problem here is that when you hide the default label and substitute it with your own custom HTML the required star is added to the left of the “body” of the field because the label is hidden and the user still needs to see if the field is required. Now when your field is to wide it will push the star down.

I’ll see if I can make this star stick to it’s position and not let wide fields push it down, but you can fix your problem by using “Label position = top” to your sbs-fields and then use Custom JS like this to replace your label:

jQuery("#dffs_YOUR_FIELD_NAME .ms-standardheader").html("<div class='tooltip'>Level 1<span class='tooltiptext'>Some tooltip text</span></div>");

Replace YOUR_FIELD_NAME with your internal field name.

Alexander

[Alexander Bautz]

I looked at the CSS and found that using this will align it properly with your existing setup:

.dffs_req_and_tt_wrap{
    position:absolute;
}

.dffs_required .ms-formbody span[dir=none]{
    margin-left:15px;
}

Let me know how this works out.

Alexander

[Tricia S.]

Hi Alexander,

I also attempted the position absolute and its messed with the CCDW. See After code image.

I also recreated the Tab issues. See other images attached.

Thanks,
Tricia

Attachments:

1. 

   After-code.jpg
   

2. 

   Pre-Tab-switch.jpg
   

3. 

   Post-Tab-switch.jpg
   

[Alexander Bautz]

Are all your field labels replaced with headings, or have you left some of them with “Label position = top”? – I think that could cause the vertical alignment issues.

Can you show me the CSS that causes the fields to float over each other?

Alexander

[Tricia S.]

Yes All Fields Have heading and No labels are shown.
Its the

.dffs_req_and_tt_wrap{
    position:absolute;
}

I have tried to push stuff out to the spjs_selected to counteract it but it won’t give.
Some testing version attached. Including ones where I unhid the field labels.

Attachments:

1. 

   Inspect.jpg
   

2. 

   inspect-code-with-field-label.jpg
   

3. 

   inspect-no-code-with-field-label.jpg
   

[Alexander Bautz]

It’s hard to tell without looking at it live – can you “inspect” the space between the “End Date” and the input field to show what’s taking up space?

Also double check that your heading HTML is correct with all quotes and start / end tags in the correct order.

Alexander

[Tricia S.]

Please see the following attachments.

The files called Cascade inspect 2 Is the goal and it reflects both changes:
.dffs_req_and_tt_wrap{display:inline block;}
and
.dffs_req_and_tt{display:none;}

It seems that
.dffs_req_and_tt{display:none;}
Work fine by itself as well.
But it done not Work for Switching tabs when there is a readonly set on a Cascdading Drop down. I will post that image in the next comment.

Attachments:

1. 

   Inspect-End.jpg
   

2. 

   Inspect-End2.jpg
   

3. 

   Casccade-inspect1.jpg
   

4. 

   Casccade-inspect2.jpg
   

[Tricia S.]

Here is the readonly after switching between tabs

Attachments:

1. 

   Readonly-new.jpg
   

2. 

   Readonly-new2.jpg
   

[Alexander Bautz]

Thanks for all the detailed screenshots. I had to go back to look at the version you are running, and found that I have actually fixed one thing that caused this alignment issues without knowing about it. It was related to another change and I didn’t realize it had an impact on the problem you experienced.

If you are able to update to the latest version the issue should be fixed already.

Sorry for the inconvenience,
Alexander

[Tricia S.]

Sadly I updated it Yesterday so All those Screens shots are from the 5/10 version.

[Alexander Bautz]

You are right! – then change was not part of the 5/10 release but the one I’m currently working on that is not yet released!

I’l compare the two and figure out what caused this and let you know if it is a quick fix you can add to the current version or if you must wait for the new release.

Sorry again for the back and forth.

Alexander

[Tricia S.]

I was in the middle of typing this up when I saw your latest response:

I have a workaround but its not Ideal. At least I don’t require a ton of fields.
My work around is to add this in my loader:

.dffs_req_and_tt{float:left;
    z-index:1;display: none;
}
.dffs_req_and_tt_wrap {
display: unset;}

and then before the my HTML Heading I added:

<div class="dffs-formvalidation" style= "float:left;z-index:1;" >&nbsp;*</div>

Let me know about the update and as always thank you for all the help! Sorry if we took the long way to get there.

[Alexander Bautz]

I have looked at it and could not find any changes – then I did some testing and found that it only happens if the SBS tab is the first one (maybe you already mentioned that). This is why I didn’t originally see it when I did my testing.

I’ll address it in the next release.

Thanks again for your patience!

Alexander

[Alexander Bautz]

I located the problem – it is in the SPJS-Casc file. I have attached an updated version if you like to test it out. Just unzip and replace the one you have in your /DFFS/plugins folder.

Alexander

Attachments:

1. SPJS-casc_v3.7.39.zip

[Tricia S.]

It works perfectly if I add this to the to the loader file:

.dffs_req_and_tt{float:left;
    z-index:1;
}
.dffs_req_and_tt_wrap {
 display: unset!important;}

Except when its in a dialog box. Then I still have some issues.

.dffs_req_and_tt{float:left;
    z-index:1;position:absolute;
}
.dffs_req_and_tt_wrap {
 display: unset!important;position:absolute}

I need to test it a bit more.

[Alexander Bautz]

Please disable all custom css addressing this placeholder and show me a screenshot of how it looks with the new spjs-casc file.

Alexander

[Alexander Bautz]

Hi,
I have found some similar alignment issues as you are describing in a new form. Not sure why I wasn’t able to see it in my original test list, but I’ll look into it and try to figure out the best way to fix it in the upcoming version.

Alexander

[Tricia S.]

What I put in my custom CSS seems to be working. I haven’t had any issues with it combined with your new casc file. here is the code one more time:

.dffs_req_and_tt{float:left;
    z-index:1;position:absolute;
}
.dffs_req_and_tt_wrap {
 display: unset!important;position:absolute}

Thanks again!

[Alexander Bautz]

Thanks, I have made some changes to this in the latest BETA and hope to release it later today.

Alexander

[Author]

Posts