Issue with new class

Forums Dynamic Forms for SharePoint Issue with new class

Tagged: ,

Viewing 22 reply threads
  • Author
    Posts
    • #30029
      Tricia S.
      Participant

      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.

    • #30035
      Tricia S.
      Participant

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

      Attachments:
    • #30062
      Alexander Bautz
      Keymaster

      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

    • #30069
      Tricia S.
      Participant

      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?

    • #30075
      Tricia S.
      Participant

      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:
    • #30085
      Alexander Bautz
      Keymaster

      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

    • #30087
      Alexander Bautz
      Keymaster

      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

    • #30089
      Tricia S.
      Participant

      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

    • #30094
      Alexander Bautz
      Keymaster

      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

    • #30096
      Tricia S.
      Participant

      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.

    • #30101
      Alexander Bautz
      Keymaster

      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

    • #30114
      Tricia S.
      Participant

      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.

    • #30120
      Tricia S.
      Participant

      Here is the readonly after switching between tabs

    • #30129
      Alexander Bautz
      Keymaster

      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

    • #30131
      Tricia S.
      Participant

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

    • #30139
      Alexander Bautz
      Keymaster

      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

    • #30141
      Tricia S.
      Participant

      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.

    • #30143
      Alexander Bautz
      Keymaster

      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

    • #30145
      Alexander Bautz
      Keymaster

      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

    • #30152
      Tricia S.
      Participant

      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.

    • #30154
      Alexander Bautz
      Keymaster

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

      Alexander

    • #30160
      Alexander Bautz
      Keymaster

      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

    • #30327
      Tricia S.
      Participant

      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!

      • #30364
        Alexander Bautz
        Keymaster

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

        Alexander

Viewing 22 reply threads
  • You must be logged in to reply to this topic.