Text align within sbs fields?

[Artaker]

Hello!

I’m trying (unsuccessfully) to change the text-align in sbs fields. The form has a few tabs, each showing fields, in a matrix-kind-of layout.
This works fine with the new and the edit form, since here the input fields have a give size, etc.

Now for the display form I obviously need to do some css changes to format it to a matrix-looking-like table. So I gave the fields a fixed size and some border.
Since those fields are numbers or currency only, I wanted the text-align on the right side, but that doesn’t seem to work. No matter why I try to put in the style, even with the !important flag, it’s not moving to the right side.
If I remove the MS-formbody from the body cell with the value, the text-align right works but all the other formats (like vertical align) are gone as well. (And I can’t get them back either with out adding the MS class again)

Please let me know, how can I change the text-align of my fields in the display form?

Thanks

BR,
Nicole

Attachments:

1. 

   DispMatrix.jpg
   

[Alexander Bautz]

Hi
I did a little test, and if you add this to the Custom CSS it should work:

#sbs_OuterTR_4444 .ms-formbody .dffs_tdWrap{
    border:1px red solid;
    padding:3px;
    width:200px;
    text-align:right;
}

You must change “4444” with the Side-by-side index you have used on the side-by-side section.

Hope this helps,
Alexander

[Artaker]

Hi

Thank you for the reply (and sorry for the late answer).

The right align is working that way, but the borders are totally off now.
Specially the headers – I don’t want the headers of my columns to cahnge their align. Only the values in the fields (original input fields).

I changed the color back to black but that’s how it looks like for me when I apply this CSS.

BR
Nicole

Attachments:

1. 

   DisplaySnip.png
   

2. 

   DisplaySnip2.png
   

[Alexander Bautz]

From your screenshot it seems you are missing the “.ms-formbody” part of my CSS example.

If your snippet looks like this:

#sbs_OuterTR_4444 .dffs_tdWrap{
...
...
}

You need to change it to:

#sbs_OuterTR_4444 .ms-formbody .dffs_tdWrap{
...
...
}

Alexander

[Artaker]

Hi

No, I took the exact code you posted only changed the color.
I tried again – now with the read color with 2 rows – see the code and the result

/* First set all width to auto */
.sbs_FieldTable .dffs_tdWrap *{
	width:auto !important;
}

#sbs_OuterTR_1 .ms-formbody .dffs_tdWrap{
    border:1px red solid;
    padding:3px;
    width:200px;
    text-align:right;
}

#sbs_OuterTR_2 .ms-formbody .dffs_tdWrap{
    border:1px red solid;
    padding:3px;
    width:200px;
    text-align:right;
}

Version information
DFFS frontend: 4.4.1
DFFS frontend CSS: 4.19 / 4.19
Autocomplete: 1.4.7
Cascading dropdowns: 3.528
jQuery: 1.12.4
Lookup: 1.1.5
Resource management: not loaded
SPJS-Utility: 1.267
vLookup: frontend v2.2.75

Not sure where the problem is here 🙁

Thanks

BR,
Nicole

Attachments:

1. 

   SPODisplayProblem3.jpg
   

[Alexander Bautz]

This is strange. I get the exact same layout as you if I skip the .ms-formbody part.

Are you 100% sure you have this CSS in the correct form? – try changing the color of the border to confirm it.

Alexander

[Artaker]

This is what I have in the Custom CSS field. There are no rules, Custom JS or other things in this form. The fields layout was created with the side-by-seide option.

.headerCSS1 {
    text-align: center;
    font-weight: bold;
}

/* First set all width to auto */
.sbs_FieldTable .dffs_tdWrap *{
	width:auto !important;
}

#sbs_OuterTR_1 .ms-formbody .dffs_tdWrap{
    border:1px yellow solid;
    padding:3px;
    width:200px;
    text-align:right;
}

#sbs_OuterTR_2 .ms-formbody .dffs_tdWrap{
    border:1px green solid;
    padding:3px;
    width:200px;
    text-align:right;
}

Ich changed the colors, so yes it is reacting. (DesignProblem4.png)

If I remove the .ms-formbody there is no change 🙁
I also checked to find out, if it is my browser or my SF, but Edge, IE, FF as well as a different PC showed the same. (I know that’s what you’d expect but well, just making sure)

Maybe the problem truely is that this is Office365? They try to force me to the new design all the time.

Thanks

BR
Nicole

Attachments:

1. 

   DesignProblem4.png
   

[Alexander Bautz]

It could be O365 messing with us. Could you right click the “kWh” label and select “Inspect element” and then send ma a screenshot of the HTML for this label and the surrounding elements?

Would it be possible to log into this site and check it myself? – if so, please email me the login details.

PS: If you install DFFS with the new DFFS installer, it will force the form to be rendered in classic view.

Alexander

[Artaker]

Hello!

So sorry about the delay, but I got the permision fromthe client. Which email adress should be invited? (This is also the same site with the CCDD problem)

Thanks

BR,
Nicole

[Alexander Bautz]

Hi,
I have emailed you on the address you use in the forum.

Best regards,
Alexander

[Artaker]

Hi!

I sent the invitation, thanks very much

BR,
Nicole

[Alexander Bautz]

The sbs grid layout in DispForm was fixed by using this CSS:

.sbs_InnerTR .ms-formbody .dffs_tdWrap{
    border:1px #ABABAB solid;
    min-height:18px;
    padding:3px;
    width:100px;
    text-align:right;
}

Alexander

[Artaker]

Thank you so much for helping out here!
It looks really great now 😀

BR,
Nicole

• This reply was modified 7 years, 3 months ago by Artaker.

[Author]

Posts