Adding table borders

[Sonoma]

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.

Attachments:

1. 

   missing-border-columns.gif
   

[Alexander Bautz]

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

[Sonoma]

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; 
}...

[Rad]

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;
}

[Alexander Bautz]

#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

[Rad]

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;
}

Attachments:

1. 

   2024-11-04_13-39-16.png
   

2. 

   2024-11-04_13-31-16.png
   

[Alexander Bautz]

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

[Rad]

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;
}

[Alexander Bautz]

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

[Rad]

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

Attachments:

1. 

   2024-11-05_11-37-15.png
   

2. 

   2024-11-05_11-35-33.png
   

[Alexander Bautz]

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

[Rad]

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.

[Rad]

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;

}

Attachments:

1. 

   2024-11-06_08-31-23.png
   

[Alexander Bautz]

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

[Alexander Bautz]

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

[Rad]

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

[Rad]

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?

[Rad]

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

[Alexander Bautz]

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

Alexander

[Rad]

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

[Author]

Posts