Text align within sbs fields?

Forums Dynamic Forms for SharePoint Text align within sbs fields?

This topic contains 12 replies, has 2 voices, and was last updated by  Artaker 3 months, 1 week ago.

  • Author
    Posts
  • #13520

    Artaker
    Participant

    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:
  • #13561

    Alexander Bautz
    Keymaster

    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

  • #13877

    Artaker
    Participant

    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

  • #13929

    Alexander Bautz
    Keymaster

    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

  • #13937

    Artaker
    Participant

    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

  • #13950

    Alexander Bautz
    Keymaster

    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

  • #13995

    Artaker
    Participant

    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:
  • #14054

    Alexander Bautz
    Keymaster

    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

  • #14662

    Artaker
    Participant

    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

  • #14710

    Alexander Bautz
    Keymaster

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

    Best regards,
    Alexander

  • #14859

    Artaker
    Participant

    Hi!

    I sent the invitation, thanks very much

    BR,
    Nicole

  • #14903

    Alexander Bautz
    Keymaster

    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

  • #15001

    Artaker
    Participant

    Thank you so much for helping out here!
    It looks really great now ๐Ÿ˜€

    BR,
    Nicole

    • This reply was modified 3 months, 1 week ago by  Artaker.

You must be logged in to reply to this topic.