This is a migrated thread and some comments may be shown as answers.

Scrollbar in Form

5 Answers 138 Views
Form
This is a migrated thread and some comments may be shown as answers.
Frans
Top achievements
Rank 1
Veteran
Iron
Frans asked on 16 Mar 2021, 09:19 AM

Hi,

How can I get a vertical scrollbar in the Form component ?
I mean, the form area excl. the buttons.
I'd prefer to achieve this without having to add a css style on the page, but instead achieve this with a simple piece of (serverside) code.

In html/css I can see the following structure

  - html form
    - div formlayout
      - fieldset
      - fieldset

I would like to have a vertical scrollbar on the div formlayout I guess. Buttons shouldnt scroll, but stay visible.
In my scenario I have only 1 column of fields, but should work for any amount of columns in layout.

 

Martin

 

5 Answers, 1 is accepted

Sort by
0
Stoyan
Telerik team
answered on 19 Mar 2021, 09:27 AM

Hello, Frans,
Thank you for your question.

The Telerik UI set the styles of the Components internally. This means that the configuration properties of the Components apply CSS styling on initialization. Unfortunately the Form Component currently doesn't support a configuration method setting up a vertical scrollbar.

However a scrollbar can be added by customizing the styling of the Component. As you have noticed the Form exposes the .k-form-fieldset class that contains only the Form items. By selecting it with CSS you can apply the following property to enable scrolling:

    .k-form-fieldset{
      overflow-y:scroll;
    }

 

Please note that for the scroll to be available the items' combined height must be bigger than the height of the .k-form-fieldset.

I hope this is helpful. Please let me know, if you have further questions.

Regards, Author nickname Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Frans
Top achievements
Rank 1
Veteran
Iron
answered on 16 Apr 2021, 08:43 AM

Thanks Stoyan,

I found a acceptable working solution for this.

Though, in general, I miss some trivial functionality in your Form component.
The concept is nice, and it does work to some extent, but I miss simple things like: number of decimals for integer fields, 
and also things scrolling thing should be feasible more easily, just by setting 1 or 2 properties or so.

I also dont succeed in setting the control type explicit, like:  items.Add()
                                .Field(propInfo.Name).Editor("NumericTextBox")

This gives me a Exception.

 

best regards,

Martin

0
Frans
Top achievements
Rank 1
Veteran
Iron
answered on 16 Apr 2021, 08:53 AM

I want it simple, and pure serverside.

Like code below. But this also doesnt work: I still get 2 decimals instead of 0.

 

                            items.Add()
                                .Field(propInfo.Name)
                                .Label(propInfo.Label)
                                .Editor(e =>
                                {
                                    e.NumericTextBox().Decimals(0);
                                });

0
Frans
Top achievements
Rank 1
Veteran
Iron
answered on 16 Apr 2021, 01:27 PM

Another thing that I think should be available out of the box in the Form control is to be able to submit when user presses Enter.

Just as 1 boolean property for the Form control. This is a very trivial functionality, that you dont want to do manually with jQuery every time.

0
Stoyan
Telerik team
answered on 21 Apr 2021, 08:42 AM

Hello Frans,

1. To set up the Form to successfully use a Model use the following syntax:

  i.Add()
                .Field(f => f.Numeric)
                .Label(l => l.Text("Numeric Text Box"))
                .Editor(e =>
                 {
                       e.NumericTextBox().Decimals(0);
                 });

The above uses this Model:

public class FormModel
    {
        public int  Numeric { get; set; }
    }
}

2. The decimals configuration property is applied to the Widget value when it is focused. Use the format property to achieve a similar result when the NumericTextBox is not focused.

e.NumericTextBox().Decimals(0).Format("0");

 

3. Unfortunately the Form Component currently doesn't support submit on keyboard Enter functionality out-of-the-box. If you'd like to see such a functionality implemented in the future, submit a Feature Request in our Feedback Portal. There we evaluate the interest in such requests based on community's votes.

Please let me know, if you have additional questions.

Regards,
Stoyan
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
Form
Asked by
Frans
Top achievements
Rank 1
Veteran
Iron
Answers by
Stoyan
Telerik team
Frans
Top achievements
Rank 1
Veteran
Iron
Share this question
or