Back to Questions
471
views1
comment
Is it possible to control formlet components size?
websharperformlet

For example, I want to use TextArea as input and i want to specify default size for it Let I use the next code to create formlet.

1
2
3

wsfc.TextArea ""
|> wsfe.WithTextLabel "Grammar"
|> wsfe.WithLabelAbove

How can I set width and height for TextArea with WebSharper (without separated CSS file creation)?

.

It is possible in a somewhat convoluted way:

1
2
3
4
5
6
7

Controls.TextArea ""
|> Formlet.MapElement (fun e ->
    JQuery.Of(e.Dom.QuerySelector("textarea"))
        .Css("height", "200px")
        .Css("width", "300px")
        .Ignore
    e)

We need to use a QuerySelector rather than setting styles directly on e itself because e is a wrapper element around the actual input element.

If you need to do it often then you can write a helper function such as:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

let WithStyle (selector: string) (style: JavaScript.Object<string>) (formlet: Formlet<'T>) =
    formlet
    |> Formlet.MapElement (fun e ->
        JQuery.Of(e.Dom.QuerySelector(selector))
            .Css(style)
            .Ignore
        e)

/// Example usage:
Controls.TextArea ""
|> WithStyle "textarea"
    (New [
        "height" => "200px"
        "width" => "300px"
    ])
By on 3/4/2016 6:55 AM ()

    Topic tags

    IntelliFactory Offices Copyright (c) 2011-2012 IntelliFactory. All rights reserved.
    Home | Products | Consulting | Trainings | Blogs | Jobs | Contact Us | Terms of Use | Privacy Policy | Cookie Policy     		Built with WebSharper