Form Style

Discussions about Forms Designer for SharePoint 2013 / 2016 and Office 365.
Locked
gselvag
Posts: 3
Joined: Tue Jul 31, 2018

31 Jul 2018

Is it possible to add custom css, to override default jquery ui. For example if user want to change relevant form attributes, e.g. background color to white, tabbed control button background to white etc.

Appreciate any feedback, thanks.

User avatar
Nikita Kurguzov
Posts: 889
Joined: Mon Jul 03, 2017

01 Aug 2018

Dear gselvag,
Sure, it is possible! You can customize style of particular elements by adding CSS rules to their LAYOUT -> Style attribute or give them CSS Classes in LAYOUT -> Css Class property:
LayoutFD.png
LayoutFD.png (2.84 KiB) Viewed 2650 times
You can also customize style of the whole form by adding CSS rules to the CSS editor:
CSSEditor.png
CSSEditor.png (5.61 KiB) Viewed 2650 times
Plus, you can use an HTML control to add HTML to the form, and load an external CSS file to the form.

Finally, all the styles from your master page, should apply to all the forms automatically.

There are no real limitations in terms of CSS rules that you can apply to the form.
Cheers

gselvag
Posts: 3
Joined: Tue Jul 31, 2018

01 Aug 2018

Nikita, thank you for the feedback.

I try to customize position of FD elements (e.g. Buttons), and position form buttons on the buttom of the page.

We would like to strech the form so the buttons (OK, Cancel) can be placed near the buttom of the page (ref. id="s4-workspace"). This way button always placed fixed same place.

Have tried to strech the form table (ref. class="fd_table") without getting desired result, the button always fixed its position under form. Any suggestion for custom fixed placement of buttons (Css Class: fd_commands)?

User avatar
Nikita Kurguzov
Posts: 889
Joined: Mon Jul 03, 2017

01 Aug 2018

Dear gselvag,
You can add buttons to the form with the Buttons button, then select newly added container, and adjust its style like this (can change width to the appropriate width):

Code: Select all

width: 640px;
position: fixed;
bottom: 0%;
Here's how it looks:
FixButtonsBottom.png
FixButtonsBottom.png (27.38 KiB) Viewed 2644 times
Cheers

gselvag
Posts: 3
Joined: Tue Jul 31, 2018

01 Aug 2018

Thank you for feedback.

I entered the syntax as you show. The buttons is placed on the bottom of form container, but how can we place the buttons fixed (e.g. near scroll bar)?

Like this on photo:
BtnPosition.JPG
BtnPosition.JPG (52.92 KiB) Viewed 2640 times

User avatar
Nikita Kurguzov
Posts: 889
Joined: Mon Jul 03, 2017

02 Aug 2018

Dear gselvag,
Can you show me where you've entered the CSS on the form? Because this is the result I get in my browser with this code:
ButtonsFixed.png
ButtonsFixed.png (8.12 KiB) Viewed 2637 times
Cheers

Mapleleaf
Posts: 29
Joined: Tue Oct 25, 2016

12 Feb 2019

I found this :

"Plus, you can use an HTML control to add HTML to the form, and load an external CSS file to the form."

in the postings above. Is that explained in detail anywhere? I would like to know, what code I have to use for this.

User avatar
AlexZver
Posts: 232
Joined: Mon Aug 27, 2018

14 Feb 2019

Hi!

HTML control allows you to add some custom HTML code to the form, there are no specifical examples on this theme, but you can describe your issue what custom functionality you want to add to the form and we'll help to implement it the best way.

Locked
  • Information
  • Who is online

    Users browsing this forum: No registered users and 6 guests