Question

Trying to use CSS in Forms Professional 11 to Section Headers

Forms Layout Designer Version 11

Updated September 29

asked on September 23

I have a section header that I would like to Center, I could do it in version 10.4 with html code on the same line. Now in version 11 I cannot. I would like to horizontally center and vertically center the word "Signatures" in the Section title.

Any CSS suggestions? I've looked all through the online help and cannot find how to alter these titles. What am I missing here?

0 0

Answer

SELECTED ANSWER

replied on September 29

The version number you listed, 11.0.2311.505585, is Forms 11 Update 5. I've been doing form headers with centered text and several other formatting changes since Forms 11 Update 3, so it can be done.

Here's the CSS I've been using:

/*Dictate the appearance of the section headers.  They won't be as tall, 
will be dark blue with rounded corders, and have white text.*/
fl-section .section-label { 
  text-align: center; 
  width: 100%; 
  background-color: #194077!important; 
  border-width: 0px!important; 
  border-radius: 15px; 
  padding: 0px; 
  margin: 0px; 
  color: #FFFFFF!important; 
  align-items: center; 
  justify-content: center; 
  line-height: 1.5; 
  font-size: 16px!important; 
  font-weight: 600!important; 
}
fl-section .section-title { 
  border-bottom-style: none!important; 
  padding-right: 5px!important; 
  padding-left: 5px!important; 
}

It results in section headers that look like this:

1 0

Replies

replied on September 23

Here's a start for the Layout Designer:

fl-section .section-label { 
  text-align: center; 
  width: 100%; 
}

0 0

View 1 previous reply

replied on September 24

He forgot to include the period (.) at the start of the first class.

Corrected code looks like:

.fl-section .section-label { 
  text-align: center; 
  width: 100%; 
}

0 0

replied on September 25

Bert, I have corrected it as you mentioned, but it is still not centering the section header text. Not sure what else to try.

0 0

replied on September 29

Actually - it works with or without the period, because the sections have an element of type fl-section that has a class of fl-section, so whether or not you are using the period, it refers to the same element.

0 0

replied on September 25

In your browser, use the F12 key to open the DevTools. Then click the Element Selector button at the top left of the DevTools bar and then select the element on the page. This will bring you to the HTML code on the page for the selected element. In the image below, I have highlighted the 2 classes that are being used CSS to Select/Denote the element(s) that the CSS applies to.

If your DevTools show different class names, then you may be dealing with something other than a "Section".

0 0

replied on September 25

Hello,

Since you mentioned HTML code on the same line I'm thinking this is actually a HTML field and not a section. If you want to just use inline to make it centered, you can try this:

<!-- Signatures header -->
<div style="background-color: #7fab5c; text-align: center;">
	<h2 style="color: #FFFFFF; font-weight: 600; padding: 12px;">Signatures</h2>
</div>

Replace the styling in the <h2> tags with what you prefer, or you can create a class and reference it in the CSS as Matthew and Bert proposed. Example output in my sandbox test form:

0 0

replied on September 26

You can also try using the FieldID to center the label. This will work for Section, Table, and/or Collection. To reference the element by FieldID, use "#q" + FieldID. You state that your fieldID is 19, so you would use

#q19 label { 
  text-align: center; 
  width: 100%; 
}

0 0

replied on September 26 • Show version history

Bret, what version of Forms are you using? We are on

This was a version 10 form, and I converted it to version 11, so I'm wondering if that has anything to do with it. Although in version 10, I was able to add the following and it worked.

0 0

replied on September 26 • Show version history

I was assuming that you are using the modern designer, but it looks like you are using the classic designer.

Post a screenshot of the DevTools showing the HTML for the element in question if the below does not work.

#q19 .cf-section-header {
  text-align: center; 
  width: 100%; 
}

0 0

View 9 previous replies

replied on September 26

No, I am using the Modern Designer in version 11 after converting the form from the Classic Designer.

That last screen shot was showing what I did before and it worked with the HTML code in that version, but that doesn't work in the new converted version.

I can send a copy of the HTML from the old version if you still want, but it just seems odd to me that the CSS has changed that much. It would be nice if on the Themes to have the "Container Labels" which are the section headers have an Alignment option there. But it does not.

0 0

replied on September 26

We cannot just pull the CSS out of thin air. You need to include a screenshot of the DevTools screen showing the HTML for the element you need to modify. This will give the class names needed to generate working CSS.

0 0

replied on September 26

Here you go...

0 0

replied on September 26 • Show version history

You want to ensure that you put it in the CSS section, but this should work

#q19 label { 
  text-align: center !important; 
  width: 100% !important; 
}

Also, ensure that in your CSS code you do not have any commented out lines using "//"

0 0

replied on September 26

I'm beginning to think this version doesn't allow for the Sections to be formatted by anything other than what is in the Themes > Container Labels.

0 0

SELECTED ANSWER

replied on September 29

The version number you listed, 11.0.2311.505585, is Forms 11 Update 5. I've been doing form headers with centered text and several other formatting changes since Forms 11 Update 3, so it can be done.

Here's the CSS I've been using:

/*Dictate the appearance of the section headers.  They won't be as tall, 
will be dark blue with rounded corders, and have white text.*/
fl-section .section-label { 
  text-align: center; 
  width: 100%; 
  background-color: #194077!important; 
  border-width: 0px!important; 
  border-radius: 15px; 
  padding: 0px; 
  margin: 0px; 
  color: #FFFFFF!important; 
  align-items: center; 
  justify-content: center; 
  line-height: 1.5; 
  font-size: 16px!important; 
  font-weight: 600!important; 
}
fl-section .section-title { 
  border-bottom-style: none!important; 
  padding-right: 5px!important; 
  padding-left: 5px!important; 
}

It results in section headers that look like this:

1 0

replied on September 29

You said you converted the form from the Classic Designer to the Layout Designer.

On the off-chance that the conversion does something weird with the sections, can you add a section manually to the form and see if the CSS works on that?

The screenshot you shared showing the DevTools screen looks different than the one that Bert shared back on 9/25/2025.

0 0

replied on September 29 • Show version history

Matt,

Hang on: updating my response. After the below didn't work, I went back and added the Period before the fl-section and got this: Now we are getting somewhere, but what part of it do I remove to keep Green?

Before without (.) ....

I'm using Edge if that matters. I copied everything you had into the CSS just to test it and it doesn't change a thing.

Does the "fl-section" in Red mean error?

This is the version we are on of Edge.

I didn't notice anything weird when I converted to 11.5 forms designer. I have tried to create a new section, and it does the same thing. I have also tried to center these sections in newly created forms (11.5) and can't seem to get it to work.

0 0

replied on September 29

Okay, I changed the background color to #7CAB5A and got this. WooHoo!!!

0 0

replied on September 29

Thank you, Matt and Bret for all your help!!

I truly appreciate it!!

0 0

replied on September 29

Sorry, one more question. When I do a Preview, how do I vertically center the word in the box?

0 0

replied on September 29 • Show version history

Hang on: updating my response. After the below didn't work, I went back and added the Period before the fl-section and got this: Now we are getting somewhere, but what part of it do I remove to keep Green?

Okay, it should have worked without the period or with it, because the element in question is both an element of type fl-section (this doesn't use the period) and has the class fl-section (this uses the period).

But if one works for you and the other doesn't, use the one that works.

Does the "fl-section" in Red mean error?

It's just how the viewer is color coding components. It's referring to an element of type fl-section, so it's red. You'd likely see the same thing if you were referring to an element of type div or span, etc. You can see the item next to it that refers to a class name (the . at the start of it indicates class name) is white. It's just how the editor color codes the display.

I didn't notice anything weird when I converted to 11.5 forms designer. I have tried to create a new section, and it does the same thing. I have also tried to center these sections in newly created forms (11.5) and can't seem to get it to work.

Just an FYI, the version numbering is not 11.5, it's 11 Update 5, the version number in that case is actually going to be along the lines of 11.0.2311... where the 2311 is the year and month of release and it is still version 11.0 - there never was a version 11.1, 11.2, etc. becasue 11.0.2311 was the last release of Forms before version 12.

Sorry, one more question. When I do a Preview, how do I vertically center the word in the box?

Difficult to tell for sure, but it might just be a result of the fact that the default structure of the section header has 20px padding above the label - as demonstrated by the green versus blue highlighting on this screenshot.

We can try either removing that padding, like this:

.fl-section .section-title { 
  padding-top: 0px!important; 
}

Or we can try doing 10px padding both above and below instead of 20px above, like this:

.fl-section .section-title { 
  padding-top: 10px!important; 
  padding-bottom: 10px!important; 
}

Do either of those work in your case?

0 0

You are not allowed to follow up in this post.

Question

Question

Trying to use CSS in Forms Professional 11 to Section Headers

Answer

Replies

Sign in to reply to this post.