Remove Border on Form Separator

[chris29]

I am trying to remove borders from the separators on a form.

I have tried to use a custom css style and class option in the separator but this seems to have no effect. Is there an easier way of achieving this with scripts?

Capture.PNG (9.57 KiB) Viewed 15915 times

[Jaymer]

easy.
long ago I created "nosep" CSS.
Just enter "nosep" as the Class and remove your style settings.

Code: Select all

.nosep { border: 0px; 	padding: 0px; 	 }
.nosep .aw-fieldset  {
	margin-top: 0px!important;
    margin-bottom: 0.7em!important;
	border: 0px  !important;}
.nosep .aw-fieldset-legend  {
	margin-bottom: 0em !important;  }

As you have discovered, you MUST use a separator sometimes.
So this removes the line around it, and tightens space.
I see you are actually using text in the Sep, so you might want to add some styling back in or adjust the padding. Just play with it.

--> JaymerTip

[chris29]

Thank you for your help, it works great.

[gernotlg]

Gold. Thanks Jaymer.

[Jhstephenson]

Jaymer, we had something similar to your 'nosep' that worked like that until version 9.

Now we get lines at the top of each separator.

Any thoughts on what might have changed?

It appears to us like something further up the ladder is over-riding our border-width setting.

Jim

[hpl123]

Jaymer, we had something similar to your 'nosep' that worked like that until version 9.

Now we get lines at the top of each separator.

Any thoughts on what might have changed?

It appears to us like something further up the ladder is over-riding our border-width setting.

Jim

I am not on v9 yet so haven´t seen this but the first thing you can do is set "!important" after all CSS styles in your classes which will most likely fix this. If not, something else is probably overriding it as you said and then you can try other things like changing the border color to transparent and see if that fixes this etc. etc..

[Jaymer]

Jim,
Other things broke,
but I don't recall having to do anything to "nosep"

Just checked.
this screen uses 5 "nosep"s on it.
I think its the exact code as originally posted:

Code: Select all

.nosep { border: 0px; 	padding: 0px; 	 }
.nosep .aw-fieldset  {
	margin-top: 0px!important;
    margin-bottom: 0.7em!important;
	border: 0px  !important;}
.nosep .aw-fieldset-legend  {
	margin-bottom: 0em !important;  }

Screenshot 2024-06-05 at 8.04.01 PM.png (167.64 KiB) Viewed 8508 times

[Jhstephenson]

Henrik, we have !Important on it.


Jaymer,

I put you 'nosep' in my css file just as you had it on the original post and here is what I get:

Screenshot 2024-06-05 185911.png (63.93 KiB) Viewed 8501 times

The only difference is that with your css the margin is slightly smaller than the one I usually use.

The separators are above 'Customer: W/O ID:', 'Entered By: xxxxxxxx Status: xxxxxxxx Priority: xxxxx', and there are two above 'Initial Contact Date'.

[Jaymer]

Ahhh
That’s because of the differences in the themes.
I use blue opal, and they discontinued that.
So I copied my blue opal over and renamed it as Classic opal or some thing crazy.
I was kind of panicking because I installed over a weekend & I had two different apps running on this server and both of them were trashed.
But I’d have to look at that personally to solve that for you.
Which I’m glad to do, but too hard to do without physically looking at the theme.

[hpl123]

Henrik, we have !Important on it.


Jaymer,

I put you 'nosep' in my css file just as you had it on the original post and here is what I get:
Screenshot 2024-06-05 185911.png

The only difference is that with your css the margin is slightly smaller than the one I usually use.

The separators are above 'Customer: W/O ID:', 'Entered By: xxxxxxxx Status: xxxxxxxx Priority: xxxxx', and there are two above 'Initial Contact Date'.

Ok, I didn´t look thoroughly on your classes (just saw the top class not having !important). If you know how to tinker using the browser inspector, you can try to find the "offender" and also solution to this.

[Jhstephenson]

We found the offending css:

.aw-fieldset-legend {
border-bottom: 1px solid #afafaf !important;
width: 100% !important;
margin-bottom: 1em !important;
}

Unchecking the "border-bottom: 1px solid #afafaf !important;" in Developer tools removes those lines.

So, I thought I could just add 'border-bottom: 0px !important;' to nosep, but it doesn't make any difference; the lines still show up.

[Jhstephenson]

Nevermind. I got it.

I just needed to add it to nosep .aw-fieldset-legend