Formatting fields

Hi,

Is it possible to format the text box for fields and not both the text box/title at the same time?

Essentially I want to change the border radius for the text box so that it has rounded edges instead of square edges.

Thanks!

Hello @BradM,

You can change the border radius of the field's input using the below CSS. Please paste the code in CSS editor, top Ribbon.
image

span.k-dropdown-wrap.k-state-default {
    border-radius: 20px !important;
}

input {
    border-radius: 20px !important;
}
1 Like

Thanks a tonne!

This seems to work for everything except the date input fields, is there a way to do this field too?

@BradM,

You are welcome!

And for the date and time fields, please use the below CSS.

span.k-picker-wrap.k-state-default {
    border-radius: 20px !important;
}

Hi mnikitina,
About if you want to change the border radius style just for a specific textbox?
How do we do that?

Thanks in Advance

Hello @naijacoder,

You can add a CSS class to the field, e.g. border-to-change, and use the CSS styling below to change the border radius of the specific input.
image

.border-to-change .form-control {
    border-radius: 20px !important;
}

Hi @mnikitina,

Is it possible to add this CSS style to drop-down fields?

This is the result I got:

/*User Input Fields*/.Font.Font-dropdown.Font-state-default{font-family: 'Fira sans', sans-serif;border-radius: 20px !important;} input {border-radius: 20px !important;}

Hello @Qman,

Use this CSS to change the radius of the dropdown box border:

span.k-dropdown-wrap.k-state-default {
    border-radius: 20px !important;
}

input {
    border-radius: 20px !important;
}

Hello @mnikitina,

This code has only worked with a few fields in my Form.

I have assigned the other drop down fields with class 'k' but nothing has happened.

I am using SharePoint 2019 'onPremise'

image

image

@Qman,

You don't need to assign a new class to fields to change. You can use the existing class to apply styling to all fields.

Which fields have not been changed? Do you mean that the border radius of the dropdown field icon has not been changed?

image

You can change its border radios too like this:

span.k-select {
    border-radius: 0px 20px 20px 0px !important;
}

Thus a dropdown field will look like this:

1 Like

Yep, the border radius of the drop down hasn't changed. Is it also possible to create a custom drop down stylings, like the example below:

What programming language/library is used to produce the style like below?

image

@Qman,

Some field types have their own unique CSS class. Like Person or Date fields.

What is the field type of the field that has not been stylied? Is it a choice or a lookup field? Does it allow a user to select multiple options?

You can change the appearance of any field using CSS. You can add borders, show/hide elements, change font, text and background color, etc.

1 Like

Oh I see, that's interesting. Thanks for advice and the link.

1 Like

Hi @mnikitina,

I have used the code you have kindly provided. How can I apply the same settings to a Number field and a multiline text field?

Also, how can I target the border radios in drop-down and date & time fields and change its colour? I can't find any documentation from Plumsail.

Hello @DryChips,

There is no documentation on CSS styling. You can inspect (Ctrl+Shift+C) any element on the form and know its CSS class:
image

To change the border radius for the Number and multiline text fields use this CSS:

.k-numeric-wrap.k-state-default, input.k-formatted-value, textarea.form-control.fd-textarea {
    border-radius: 20px !important;
}

And to change the border color and radius for the drop-down and date & time fields:

.k-state-default input, span.k-picker-wrap.k-state-default, 
.fd-form .k-dropdown-wrap .k-input, span.k-dropdown-wrap.k-state-default {
    border-color: red !important; 
    border-radius: 20px !important;
}
2 Likes

@mnikitina

Oh WOW, that is amazing! Thank you so much!!!! :slight_smile:

Hi @mnikitina,

Actually, its fine, I used Plain text field option instead of rich text option for my multiline text field.

Are there plans to document the CSS?
It really is a PIA to have to use the console to find the Class.

Hello @drryan,

Yes, we plan to add an article with examples of basic CSS styling and instructions on how to check classes to create more complex styling.

We won't describe all the available CSS classes in our documentation. Most fields are built on top of Kendo UI, and the CSS classes may vary in different versions of Kendo UI.

1 Like

I understand the difficulties involved.
It just feels like there all this hidden knowledge regarding plumsail and documentation can be so hard to find sometimes.

Examples are great, it would be nice to see some solid documentation as well.

2 Likes