Back to Questions
679
views4
comments
Override (or remove) submitButton class in Formlet enhanced with submit/reset buttons
websharpercssformletoverridesubmitbutton

Hello, I am trying to use bootstrap css to style the elements of a formlet enhanced with submit and reset buttons. I can add the bootstrap classes e.g. btn, btn-primary, etc using the WithCustomSubmitAndResetButtons function to the button elements. However, there is a submitButton class in front which I can't get rid of. The submitButton class overrides the background color, etc becaus of the specificity ".formlet input.submitButton". Looking at the code, the submitButton class is added in an internal function called InputButton and there doesn't seem to be a way to customize that.

I tried a few things

  • look for the button element in the formlet created and attempt to call the RemoveClass function on it to remove the submitButton class. I tried using the MapElement and MapBody functions, but it seems to only map the first level down, whereas the button elements are embedded deep within

  • use the Enhance.WithResetFormlet and Enhance.WithSubmitFormlet functions instead and roll my own submit and reset buttons with the "Button" function. For WithResetFormat, it's almost close but still there are some css overrides somewhere which I am trying to figure out. For WithSubmitFormlet, the function doesn't actually take another formlet, so not sure that's what I am looking for

  • remove the clashing stylings in the submitButton class in Formlet.css which is generated by the build and served out during run-time. This actually is the closest solution. However, each time the project is rebuilt, the entire directory containing Formlet.css is removed and then re-created, which is obviously not ideal

Does anyone know of a good way to go about this problem? Any suggestion greatly appreciated!

Cheers, Albert

.

Formlets were designed to use the baked in style and functionality. It's usually not easy to get them to behave and look differently. Perhaps you could give Piglets (or Websharper.Forms if you'd like to use UI.Next) a try if you want control over the rendering of your forms. Piglets can do everything that formlets can, only they let you define how you want to render the controls.

By on 3/7/2016 2:28 AM ()

Ended up just overriding the styles using specificity in Main.html. something like

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

        .formlet input.submitButton.btn.btn-primary {
            margin-right: 5px;
            margin-top: 5px;
            border: 0px;
            background-color: #DF691A; /* where this comes from looking up bootstrap.css */
            color: #FFFFFF; /* where this comes from looking up bootstrap.css */
        }
        
        .formlet input.submitButton.btn.btn-primary:hover
        {
            background-color: #b15315; /* where this comes from looking up bootstrap.css */
        }

        .formlet input.submitButton.disabledButton.btn,
        .formlet button.submitButton.disabledButton.btn
        {
	        color : #999999; /* where this comes from looking up bootstrap.css */
        }

If only there is a way to refer the value of the parameter to the rule defined in bootstrap.css automatically, then there is no need for me to remember to change these values when switching to a another bootstrap theme. But I will live with it for now...

By on 3/5/2016 12:45 AM ()

Found a way to do it. It's along the line of the first approach above, using the WebSharper.JavaScript.Dom module. It's possible to get the body out of a formlet. Here's the function I wrote:

1
2
3
4
5
6
7
8
9
10
11

  let removeCssFromFormlet tag className (formlet:Formlet<'a>) =
    let element = formlet.Body :?> Element
    let childNodes = element.GetElementsByTagName(tag)
    for i in [0..(childNodes.Length-1)] do
      let child = childNodes.Item(i) :?> Element
      if child.HasAttribute("class") then
        let oldClass = child.GetAttribute("class")
        let newClass = oldClass.Replace(className, "")
        child.SetAttribute("class", newClass)
        JS.Alert newClass
    formlet

To achieve what I asked originally in the question,

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

    let submitButtonConf = { 
      Enhance.FormButtonConfiguration.Default with 
        Label = Some "Calculate"; Class = Some "btn btn-primary" 
    }
    let resetButtonConf = { 
      Enhance.FormButtonConfiguration.Default with
        Label = Some "Reset"; Class = Some "btn"
    } 

    Formlet.Yield(...)
    |> Enhance.WithResetAction resetFunc
    |> Enhance.WithCustomSubmitAndResetButtons submitButtonConf resetButtonConf
    |> Enhance.WithFormContainer
    |> removeCssFromFormlet "input" "submitButton"

The above works for me. But still, if anyone has a better idea, it would be very much appreciated!

Cheers,

Albert

By on 3/4/2016 11:48 PM ()

Sorry I haven't actually tested it enough before I replied - the solution I wrote above has a big problem. It looks like the submit action actually depends on the button having the "submitButton" class in it. Removing it will cause it not to do anything upon being clicked. I will post again if I find a solution.

By on 3/5/2016 12:01 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