Home › Forums › Classic DFFS › Issue with new class
- This topic has 23 replies, 2 voices, and was last updated 4 years, 4 months ago by Alexander Bautz.
-
AuthorPosts
-
-
May 18, 2020 at 16:57 #30029
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:
-
May 18, 2020 at 16:58 #30035
Ran out of attachments. Here’s what the styling looks like with my custom CSS.
Attachments:
-
May 19, 2020 at 18:42 #30062
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
-
May 19, 2020 at 18:57 #30069
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:
-
May 19, 2020 at 19:02 #30075
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:
-
May 19, 2020 at 20:56 #30085
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
-
May 19, 2020 at 21:04 #30087
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
-
May 19, 2020 at 21:09 #30089
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,
TriciaAttachments:
-
May 19, 2020 at 21:25 #30094
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
-
May 19, 2020 at 21:41 #30096
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:
-
May 19, 2020 at 22:39 #30101
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
-
May 20, 2020 at 13:25 #30114
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:
-
May 20, 2020 at 13:27 #30120
Here is the readonly after switching between tabs
Attachments:
-
May 20, 2020 at 17:54 #30129
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 -
May 20, 2020 at 17:56 #30131
Sadly I updated it Yesterday so All those Screens shots are from the 5/10 version.
-
May 20, 2020 at 18:28 #30139
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
-
May 20, 2020 at 18:35 #30141
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;" > *</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.
-
May 20, 2020 at 18:38 #30143
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
-
May 20, 2020 at 19:13 #30145
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:
-
May 20, 2020 at 21:55 #30152
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.
-
May 20, 2020 at 22:19 #30154
Please disable all custom css addressing this placeholder and show me a screenshot of how it looks with the new spjs-casc file.
Alexander
-
May 22, 2020 at 15:06 #30160
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
-
May 28, 2020 at 16:17 #30327
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!
-
June 1, 2020 at 08:40 #30364
Thanks, I have made some changes to this in the latest BETA and hope to release it later today.
Alexander
-
-
-
AuthorPosts
- You must be logged in to reply to this topic.