Adding table borders

Home Forums Classic DFFS Adding table borders

  • This topic has 26 replies, 3 voices, and was last updated 1 month ago by Rad.
Viewing 22 reply threads
  • Author
    Posts
    • #6207
      Sonoma
      Participant

        In the Field CSS I can add cell borders fairly easy but I if I have the field’s label set to top it does not surround it completely.
        Is there a simple solution for this?

        Thank you.

      • #6220
        Alexander Bautz
        Keymaster

          Hi,
          When using side-by-side the Field CSS tab cannot take you all the way. Skip setting the border CSS there, and go to the Misc tab and add this to the custom CSS:

          #sbs_FieldTable_YourFieldNameHere{
          border-left:2px red dashed;
          }

          “YourFieldNameHere” is the FieldInternalName of the field you want to target.

          Alexander

        • #6225
          Sonoma
          Participant

            Perfect. That works. Thank you.

            
            
            #sbs_Field_PN1DATE, #sbs_Field_PN2DATE, #sbs_Field_PN3DATE{
            border-left:2px  solid;
            border-right:2px  solid;
            border-top:2px  solid;
            }
            
            #sbs_Field_TIPN1DATE, #sbs_Field_TIPN2DATE, #sbs_Field_TIPN3DATE{ 
            border-right:2px  solid;
            border-top:2px  solid; 
            }...
          • #38103
            Rad
            Participant

              Hi Alex, I am trying to create borders around a group of fields so they can be separated in sections. Tried using below code but doesn’t seem to work for me. What does FieldTable stand for in #sbs_FieldTable_YourFieldNameHere?

              Also, did you mean adding the code to “Custom styling of read-only fields in addition to the style selected above (CSS Syntax)” in Misc tab?

              #sbs_FieldTable_YourFieldNameHere{
              border-left:2px red dashed;
              }

            • #38108
              Alexander Bautz
              Keymaster

                #sbs_FieldTable_YourFieldNameHere is one field (label and body) – and the YourFieldNameHere keyword should be replaced with the FieldInternalName of that field.

                If you want to add a border around the entire line (with side-by-side fields) you can use this format (where the number 100 is the side-by-side index used in the tab):

                #sbs_OuterTable_100 {
                    outline: 2px red dashed;
                    outline-offset: 2px;
                }
                

                Alexander

              • #38209
                Rad
                Participant

                  Hi, this doesn’t seem to work for me still. I copy/pasted the code for #sbs_OuterTable_100 as is and update the index to 100.
                  Please see the attached screenshots. Am i missing something?

                  if were to draw a border around an internal field txtfrequency, is this right code?

                  #sbs_FieldTable_txtfrequency{
                  border-left:2px red dashed;
                  }

                • #38215
                  Alexander Bautz
                  Keymaster

                    You must add the CSS code to the Custom CSS tab. Where you put it now, only custom styling of the read-only fields are supposed to go (and then without the ID selector).

                    Alexander

                  • #38216
                    Rad
                    Participant

                      got it. I added below to my custom CSS code but the border is not showing still

                      .sbs_OuterTable_100 {
                      outline: 2px red dashed;
                      outline-offset: 2px;
                      }

                    • #38218
                      Alexander Bautz
                      Keymaster

                        Can you show me a screenshot of the field after you right click and select “Inspect” (I need to see the HTML code in the developer tools).

                        Also, show me a mockup of what you are looking to make the border around so I know you are looking at the correct solution (this is specifically to highlight side-by-side fields).

                        Alexander

                      • #38220
                        Rad
                        Participant

                          I am trying to create sections within a tab by placing a bunch of fields within borders. Please see the screenshots for sample.

                        • #38223
                          Alexander Bautz
                          Keymaster

                            Try setting the border on the table and not the tr using this ID (from your screenshot it looks like you have the SBS index set to 4):

                            .sbs_OuterTable_4 {
                            outline: 2px red dashed;
                            outline-offset: 2px;
                            }
                            

                            Alexander

                          • #38225
                            Rad
                            Participant

                              I had updated it to 100 to match with the code you shared. It still doesn’t display the border with 4.
                              I’ve added the code to my CSS file. also tried adding it to the Field CSS but nothing seems to work.

                              • #38226
                                Rad
                                Participant

                                  this code works but ofc draws borders around all the fields. for some reason doesn’t work for a specific field.

                                  .sbs_OuterTable {

                                  outline: 2px red dashed;
                                  outline-offset: 2px;

                                  }

                              • #38228
                                Alexander Bautz
                                Keymaster

                                  I see now what was wrong – when addressing by ID you must prefix the selector with “#” and not “.”.

                                  I didn’t notice it in your code snippet, but if you change it from this:

                                  .sbs_OuterTable_4 {
                                  outline: 2px red dashed;
                                  outline-offset: 2px;
                                  }
                                  

                                  to this it should work:

                                  #sbs_OuterTable_4 {
                                  outline: 2px red dashed;
                                  outline-offset: 2px;
                                  }
                                  

                                  Alexander

                                • #38229
                                  Alexander Bautz
                                  Keymaster

                                    I see now what was wrong – when addressing by ID you must prefix the selector with “#” and not “.”.

                                    I didn’t notice it in your code snippet, but if you change it from this:

                                    .sbs_OuterTable_4 {
                                    outline: 2px red dashed;
                                    outline-offset: 2px;
                                    }
                                    

                                    to this it should work:

                                    #sbs_OuterTable_4 {
                                    outline: 2px red dashed;
                                    outline-offset: 2px;
                                    }
                                    

                                    Alexander

                                  • #38230
                                    Rad
                                    Participant

                                      ah! That was it! Thank you so much, works like a charm now 🙂

                                    • #38231
                                      Rad
                                      Participant

                                        ah! That was it! Thank you so much, works like a charm now 🙂

                                        what would be the code to draw one border around multiple fields?

                                      • #38232
                                        Rad
                                        Participant

                                          I am good now, thank your help! Could you please look into my other question regarding email current tab contents not working? thank you

                                        • #38235
                                          Alexander Bautz
                                          Keymaster

                                            I think I have missed your other question regarding email current tab – where can I find it?

                                            Alexander

                                          • #38236
                                            Rad
                                            Participant

                                              I am posting it here:

                                              The Enable E-Mailing the active tab doesn’t seem to work for me.

                                              It was initially working only on 2nd tab and not the first one. The email pop up shows but nothing happens when clicking the OK button.

                                              this is the error I get after clicking OK button:

                                              VM17502:1 Uncaught TypeError: Cannot read properties of undefined (reading ‘hidden’)
                                              at String.eval (eval at <anonymous> (DFFS_frontend_min.js:10:1), <anonymous>:1:99824)
                                              at Function.each (jQuery.js?v=1730264777187:2:2881)
                                              at Object.emailCurrentTab (eval at <anonymous> (DFFS_frontend_min.js:10:1), <anonymous>:1:99613)
                                              at Object.init_emailTab (eval at <anonymous> (DFFS_frontend_min.js:10:1), <anonymous>:1:95231)
                                              at Object.ok (eval at <anonymous> (DFFS_frontend_min.js:10:1), <anonymous>:1:94745)
                                              at Object.ok (eval at <anonymous> (DFFS_frontend_min.js:10:1), <anonymous>:1:295246)
                                              at HTMLInputElement.onclick (DispForm.aspx?List=0f3d624b%2D292b%2D48af%2Da894%2Dbfdb71577fc3&ID=1&Source=http%3A%2F%2Fsharepoint2%2Ebankofamerica%2Ecom%2Fsites%2FDUA%5FOther%2FLists%2FAffinityRequests%2FAllItems%2Easpx&ContentTypeId=0x0100040EC9A443EDCD4EBD9D702A1A50BA54:1:12)

                                              November 5, 2024 at 16:37 in reply to: Sending email#38212Reply

                                              • #38238
                                                Alexander Bautz
                                                Keymaster

                                                  Which version of the classic DFFS are you running? (hover over the “Enhanced with DFFS” link and click “License and version information.

                                                  Alexander

                                              • #38239
                                                Rad
                                                Participant

                                                  Version information
                                                  DFFS Loader: v2
                                                  DFFS frontend: 4.4.5.43 – March 27, 2022
                                                  DFFS frontend CSS: 4.65 /
                                                  Autocomplete: 1.6.52 – April 25, 2021
                                                  Cascading dropdowns: 3.7.48 – September 22, 2021
                                                  jQuery: 1.10.2
                                                  Lookup: 1.1.20 – March 10, 2020
                                                  Resource management: 2.4.5 – August 29, 2019
                                                  SPJS-Utility: 1.356 – November 20, 2021
                                                  vLookup: 2.2.162 – October 12, 2021

                                                • #38245
                                                  Rad
                                                  Participant

                                                    that fixed it. thank you!

                                                  • #38253
                                                    Rad
                                                    Participant

                                                      sorry, have a follow up on emailing the tab. Currently there is no labeling of the fields in the email box that opens up which can be a bit confusing to users. Is there a way to customize this pop up to add labels against the text boxes? Something like the screenshot?

                                                      • #38257
                                                        Alexander Bautz
                                                        Keymaster

                                                          You must specify the labels in the Email and Print tab under the Email active tab.

                                                          Alexander

                                                      • #38262
                                                        Rad
                                                        Participant

                                                          Apologies, I should’ve looked in detail. thank you

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