Responsive Forms

[Travis Goodman]

Is there a recommended solution that would make custom forms format differently based on media queries?

I have a fully custom CSS section that I plan to share with you as a demo once I’m satisfied with it. The only piece left is to figure out a reliable way to make the forms work well on a mobile device. Wondering if you might have some ideas based on existing css classes you already have on the form, especially for SBS fields.

[Alexander Bautz]

Unfortunately I have not been able to do any work on creating support for mobile forms / small screens in this version. I am working on a new version, but this is still somewhere in the future.

The problem with the side-by-side fields in DFFS is that they are not only handled with CSS, but rely heavily on JS. The next version will use CSS (display:flex), but this will not unfortunately not work with the current forms because how they are rendered using the default SharePoint form and then DFFS as an overlay to modify the form.

I’ll do my best to answer any question you may have, and will happily share your custom css here if you like.

Best regards,
Alexander

[Travis Goodman]

Funny you say that Alex, because that is actually what I have built my Custom CSS around is display:flex.

I have altered your sbs_tdIndex display settings to change it to flex, and then have hacked up the rest of it to cooperate. I’m sure you can make it better than what I have since I’ve tried to basically overwrite the core script, but I’m more than happy to share what I have.

Attached you will find screenshots showing the customization’s I’ve made. They are available to you if you’d like them.

Attachments:

1. 

   Screenshot_2019-04-24-Disability-Form.png
   

2. 

   Screenshot_2019-04-24-PMO-Projects-New-Item.png
   

3. 

   Screenshot_2019-04-24-Disability-Form-2.png
   

[Alexander Bautz]

This looks really nice! – please share it and I’ll look at it as soon as I can manage and see how I can implement this functionality in the standard version (or as a override of the default theme).

Best regards,
Alexander

[Travis Goodman]

It’s all yours! You can change whatever you feel needs changed, css requirements are always in need of personal tweaks anyway.

.dffsTabRow {
    border: none !important;
}

.tabH1 {
    text-align:center;
}

.ms-formtable h2,
.ms-formtable h1 {
    color:dodgerblue;
}

.ms-formtable tr[id^="dffsHTML_"] a {
    font-weight:bold;
}

#part1 select,
#part1 input:not([type="checkbox"]):not([type="radio"]):not(.sp-peoplepicker-editorInput),
#part1 .sp-peoplepicker-topLevel,
#part1 .ms-rtestate-field.ms-inputBox,
#part1 textarea {
    border: 1px solid #ABABAB;
    border-radius: 4px;
    -webkit-box-sizing: border-box; /* For legacy WebKit based browsers */
    -moz-box-sizing: border-box; /* For legacy (Firefox 29) Gecko based browsers */
    box-sizing: border-box;
}

#part1 input:not([type="checkbox"]):not([type="radio"]):not(.sp-peoplepicker-editorInput):focus,
#part1 .sp-peoplepicker-topLevelFocus,
#part1 .ms-inputBoxActive:focus,
#part1 select:focus,
#part1 textarea:focus,
#part1 .ms-inputBoxActive .ms-rtestate-field:focus{
    box-shadow: 0 0 10px;
    border:1px solid #B0CFE0;
}

td.accordionHeading div {
    color: dimgray!important;
    border: thin lightsteelblue solid;
    background-color: paleturquoise;
    font-size: x-large;
    margin-top:0px!important;
    text-align:center;
    font-weight: lighter;
}

tr[id^="dffsHTML_"] .dffs_headingOrHTMLWrap {
    padding: 0 10px;
    max-width: 900px;
}

.ms-standardheader {
    font-size: 17px;
    color:steelblue;
    margin-right: 0px!important; /*When a customToolTip is used, it adds a margin-right of 20px which isn't necessary*/ 
}

.ms-formbody,
.ms-formlabel,
.dffs-readonly-inner {
    padding: 10px!important;
}

.ms-formlabel{
    width:130px!important;
    white-space:normal!important;
}

.ms-formtable > tbody > tr {
  background-color:  #eee;
}

.ms-formtable > tbody > tr > .ms-formlabel,
.ms-formtable > tbody > tr > .ms-formbody,
.ms-formtable > tbody > tr > .dffs-readonly-inner {
    border-top: thin solid lightgray;
}

.ms-formtable {
    margin-bottom: 10px;
    border: 1px solid lightslategray;
    box-shadow: 0 0 10px;
    border-radius: 4px;
}

.sbs_FieldTable *{
    width:auto!important;
}

.sbs_OuterTable {
    width: 100%!important;
    border-top: thin solid lightgray;
}

.sbs_InnerTR .spjs_casc_multi,
.sbs_InnerTR table[id^="casc_multiselect"] {
  width:100%!important;
}

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

.customTooltip{
    float:none!important;
    display:inline!important;
    margin-right:5px;
}

.sbs_InnerTR {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    justify-content: flex-start;
}

.sbs_InnerTR td[class*="sbs_tdIndex_"] { /
    width: 250px;
    align-self:  stretch;
    text-align: left;
    /*! flex: 1; */  
/*Use flex:1 if you want your sbs columns to stretch the entire width of the form, otherwise leave it off if you want your columns to always line up.  Example, if you have a sbs row with 4 columns, and below that you have a sbs row with 3 columns, then without flex:1, the columns will line up evenly, but with flex:1 turned on, then they will space out using all the available width.  They will still look good, just won't be all lined up*/
}

.ms-rtestate-write {
    text-align: left;
}

.ms-rtestate-write * {
/*I hate it when people use custom font*/
    font-family:sans-serif!important;
    font-size: small!important;
}

.sbs_Field select {
/*If you have a select option with a really long text string, this will make it so that it doesn't bleed over into its neighbors column*/
    max-width: 230px!important;  
    text-overflow: ellipsis;
}

.sbs_Field .ms-rtefield {
    min-width: auto!important;
}

.sbs_FieldTable .sp-peoplepicker-topLevel, 
.sbs_FieldTable .sp-peoplepicker-topLevelDisabled {
    min-width:200px!important;  /*These shrink up horribly when used in sbs*/
    text-align:left;
}

td[id$='_casc_btnWrap']{
    padding-top:14px;  /*Better aligns the add/remove arrow buttons for multi choice cascading dropdowns*/
}

.ms-RadioText {
    white-space:nowrap;  /*makes multi-choice radio checkboxes easier to read instead of wrapping and looking messy*/
}

.sbs_FieldLabel{
    height:auto;
}

.dffs-readonly-inner {
    min-width: auto!important;  /*Overwrites the min-width that gets set automatically which made the form format extremely wide on occasion when there is a lot of text in a field*/
    padding: 10px;
}

.sbs_Field .ms-metadata {
    display:none; /*I recommend using the DFFS Tooltip, as the metadata for field descriptions was giving me formatting issues.*/
}

.sbs_InnerTR table[id$='DateTimeFieldTopTable'] {
    /*! margin: 0 auto; */  
    /*Only use this if you use a text-align:center for your display:flex children*/
}

.sbs_Field .ms-rtestate-field.ms-inputBox,
.sbs_Field textarea {
    max-height:200px;
    overflow-y:auto;
    resize: vertical;
}

#idAttachmentsRow {
    background-color: lightsteelblue;
}

#idAttachmentsTable td img {
	margin-left:20px;
}

#Attachments {
    color: #444!important;
}

#Attachments > nobr {
    vertical-align:middle;
}

[Alexander Bautz]

Thanks, I’ve been a bit busy and haven’t had time to look at it properly yet, but will try to get there later this week.

Best regards,
Alexander

[Travis Goodman]

No worries, Alexander. You will probably be able to come up with something better than what I have there, as I wrote that to work around your built in CSS classes, and you might be able to identify areas where you can improve the overall layout. I’ve even tweaked it a couple of times already since I posted this. For me, while flex:1 gets the job done, I didn’t like how if one row had 4 columns and another row only had 3 columns, they didn’t line up vertically, so I instead am using a standard column width which accommodates the width of peoplepicker and date fields, and then making it all uniform. Still a work in progress, but this is a great start for anyone looking for a design that will make your forms look “not like sharepoint”.

Also, VERY IMPORTANT this design is built around the side-by-side settings set to Stretch side-by-side fields over both form columns (hiding the field label) – This MUST BE CHECKED! Or else this css will look like garbage.

[Alexander Bautz]

I’m working on a new version and finally got time to look closely at your customizations. They look great and is most likely the best you can get out of the rather quirky side-by-side code. Unfortunately I cannot really implement this into DFFS because it will mess with whatever Custom CSS other users have used to style their form.

I’m certain others will make good use of your modifications and I’ve made it a sticky-post so it is easy to find in the top of the DFFS forum. Please update if have a new version!

Best regards,
Alexander

[Silvestre Kassoka]

Hi Travis,

Thank you for your contribution to the community, I have used a bit of you code it
really improves the look of the forms.

Thank you.

[Travis Goodman]

Hi all! Glad to see people are finding value in this custom CSS configuration. I actually have made some more updates to it to even further improve upon it, but of course styling is subjective, so feel free to adjust the styling to your personal preferences. I hope to get the updated CSS posted in here in the next week or two.

[Author]

Posts