Targeting Text Width, Not Text Box

Forms SharePoint Online
1

I have created a CSS flex style to create a header that is positioned in the upper-left of the box. I looks ALMOST how I want it but having a challenge with the text vs text box.

GOAL: Create the same gap or space on both sides of the word; words have varying lengths (e.g, Item, Classifications, Discussions, etc.). the left side if perfect and is the exact space I want. The right side is stubborn.

RightSideGap
RightSideGap1516×594 16.1 KB

CSS

.section-header-flex {
  display: flex;
  flex-direction: row;
  position: relative;
  top: -47px;
  font-weight: bold;
  color: #a4262d;
  font-size: 26px;
  text-align: center;
  background-color: white;
  margin-bottom:-150px;
}

Text Control Box Properties

TextBoxDesigner
TextBoxDesigner296×594 11.7 KB

I bet this is so obvious but I have tried many things with no success yet.

2

Hi @shedev,

Could you share the rest of the form's CSS?

3

Thank you @IliaLazarevskii

GRID CELL CSS

.rcorners-la-platform {
  border-radius: 25px!important;
  border: 2px solid #337DC7 !important;
  padding: 20px !important; 
  width: 100% !important;
  height: 100% !important;  
}

TEXT CONTROL CSS

.section-header-flex {
  display: flex;
  flex-direction: row;
  position: relative;
  top: -47px;
  font-weight: bold;
  color: #a4262d;
  font-size: 26px;
  text-align: center;
  background-color: white;
  margin-bottom:-150px;
}

PLUMSAIL EDIT VIEW FORM IN DESIGNER

EditView
EditView1728×663 51.8 KB

4

Hi @shedev,

Could you try changing the headings' alignment in the UI?
image

5

@IliaLazarevskii,

Thank you for your recommendation. The alignment change made it worse :slight_smile:

CenterAlignment