Column Alignment

Forums Dynamic Forms for SharePoint Column Alignment

This topic contains 5 replies, has 2 voices, and was last updated by  Alexander Bautz 2 weeks, 6 days ago.

  • Author
    Posts
  • #20713

    Kelly Turdanes
    Participant

    Hi Alexander,

    I’ve been trying to make the column alignment work but to no avail.
    I’ve added the css script from here http://spjsblog.com/dffs/dffs-styling/ but my form doesn’t look how I expect it to be.

    I’ve attached a screenshot of how it currently look. I was expecting it to be more aligned but the fields doesn’t seem to be adjusting as how it should be. Could you let me know what might be the reason please.

    Thank you.

    Kelly

  • #20740

    Alexander Bautz
    Keymaster

    Hi,
    This article is a bit outdated because I have removed the “dffs_tdWrap” class (as noted in the top of the article) – can you show me the CSS you use now?

    Alexander

  • #20756

    Kelly Turdanes
    Participant

    Hi Alex,

    Thanks. Yes I removed this css entry now and added the one particularly for TdIndex. My css entry below.

    .ms-formlabel {
    font-weight: bold;
    }
    .ms-formlabel h3.ms-standardheader {
    font-weight: bold;
    }

    .ms-standardheader {
    font-weight: bold;
    }

    td.ms-formlabel nobr {
    white-space: normal;
    font-weight: bold;
    }

    .tabH1, .tabH2, .tabH3 {
    background-color: #44788b;
    color: white;
    padding-left: 5px;
    text-transform: none;
    }

    .tablabel{
    text-transform: none;
    }

    .sbs_tdIndex_1, .sbs_tdIndex_2, .sbs_tdIndex_3, .sbs_tdIndex_4 {
    min-width:200px;
    width:200px;
    }
    .childTableCell {
    vertical-align: top;
    }

    thank you.

  • #20770

    Alexander Bautz
    Keymaster

    Did it make any difference to your forms layout?

    Alexander

  • #20779

    Kelly Turdanes
    Participant

    No. There was no change in the layout.

    Thanks.

    Kelly

  • #20795

    Alexander Bautz
    Keymaster

    Hi,
    I have updated the article here.

    Basically it was just a matter of removing the dffs_tdWrap from the selector like this:

    .sbs_FieldTable *{
     width:auto !important;
    }
    /* Ensure the tooltip icon won't collapse */
    .customTooltipIcon{
     width:18px!important;
    }

    Hope this gets you back on track.

    Best regards,
    Alexander

You must be logged in to reply to this topic.