While I was at KWizCom's booth, one of our customers approached me with a question: He had a list form with lots of radio buttons.
They each had just a few choices, but the form didn't look very nice since they all stretched out too long and narrow.
See, SharePoint always renders radio button choice fields vertically...
He wanted to have these choice columns render in a horizontal layout instead of the OOB vertical one. (side by side instead of under each other)
In other words, from something that looks very much like this:
So, you might notice the customer was already using our forms solution and had the form render in a 2 column layout and with the column captions above the controls.
Because of that, the change he requested was very simple to implement so I was happy to do it on the spot with him, on his laptop.
It took about 2 minutes to complete, he was very impressed, but I must admit - this wasn't a very challenging request if you know your way around CSS.
All he had to do was:
1. Create a CSS file with a new class that targets the table in radio buttons choice columns
2. Change the rows of the table to display inline instead of breaking row like it usually does in HTML
2. Save the CSS file in site assets
3. Get our Forms solution to load this new CSS file and all done!
Here is the CSS needed to make this change, it should work on SP2013, SP2016 and SharePoint online in classic UI:
table[id$='RadioTable'] tr{
display: inline;
}
Note: if you don't use KWizCom Forms, you will have to load the CSS some other way to the page, but this solution should still work.
Note #2: this wasn't tested on modern UI, but on classic. It might require some minor tweaking to work in modern UI, let me know in the comments if this is something you need and having trouble achieving.
Enjoy!
No comments:
Post a Comment