TextBoxFor with Appended Button and set width (not to 100%)

[AlonCG]

Apologies if this has been addressed elsewhere.

I have an issue rendering an "appended" button to a TextBox when setting a specific width. I did not test this with Bootstrap only, but assume it should work. Check the image to understand what is happening.

One of my hacked attempts ... top textbox looks correct, but is in the wrong location :( :

@Html.Bootstrap().Div(
     f.FormGroup().TextBoxFor(m => m.InternalConnectionModel.ConnectionSuccess).Readonly().Tooltip("Automatically assigned").Append(
         Html.Bootstrap().Button().Text("Test").Style(ButtonStyle.Default)
     )
).HtmlAttributes(new { style = "width:200px;" })

My first attempt (on the bottom of the image) was set like this:

@f.FormGroup().TextBoxFor(m => m.InternalConnectionModel.ConnectionSuccess).Readonly().Tooltip("Automatically assigned").Append(
    @Html.Bootstrap().Button().Text("Test").Style(ButtonStyle.Default)
).HtmlAttributes(new { style = "width:200px;" })

That is in the correct place, but renders the button at the end of where the textbox would normally extend too.

How should I actually be setting this? A link to RTFM! would be fine. Thanks!

[DmitryEfimenko]

Instead of setting 200px width to the wrapper div or just to the input, you need to set it to the div that contains all inputs (in your case a single input and whatever is appended to it). Use the following:

@f.FormGroup().ControlsHtmlAttrs(new { style = "width: 200px;"  }).TextBoxFor(m => m.InternalConnectionModel.ConnectionSuccess).Readonly().Tooltip("Automatically assigned").Append(
    @Html.Bootstrap().Button().Text("Test").Style(ButtonStyle.Default)
)

[AlonCG]

That's awesome thanks.

I did not see that option in the Help docs though (or I may be blind) ... but I now see it in the Change Log for 3.3.2 ... but probably needed to know exactly what I was trying to find. Just need to try and remember to go through the change log

I did try a number of other AttribSettings, this one was golden. Thanks!

[DmitryEfimenko]

Yeah, it's not anywhere besides the ChangeLog. I'll try to find a good place for it in the docs.

[AlonCG]

My suggestion would after the one titled "Controlling Column Widths" ...since it appears to only relate to the FormGroups. Glad your still around ;) Have missed your updates ... since I felt like I was getting so much (for so little of course). Any exciting news in the pipeline?

[DmitryEfimenko]

Thanks for good words. Well, I'm finally about to release implementation of Panels. Maybe will release them tonight, in couple of hours. Besides that, I'm working on something non BMVC related, another personal project - a website using Angular JS and Web Api. As it turns out - a pretty good combination. In time I'll either make it open source or share a bunch of code on CodeProject along with an article. Time will show.

[AlonCG]

Excellent, all the best. I guess if I was 20 years younger (ok, well maybe 15) and emjoyed writing articles, as compared to code, I would have gotten into blogging about the stuff I've worked on. But I don't take criticism very well unless I actually know the person criticizing me. Good luck with everything.

[AlonCG]

Sorry to re-open old wounds ... but this only works with "FormType.Horizontal". Would it be out of the question to have this work with the other form types? Or does that not make sense?

[DmitryEfimenko]

do you mean that ControlsHtmlAttrs(new { style = "width: 200px;" }) does not get applied when non-horizontal form type is used?

[AlonCG]

yeah sorry, that appears to be the case ... when I use Inline or NotSet ... the style (or whatever yo uput int he custom attributes) is not applied.

[DmitryEfimenko]

I'll look into this issue in the evening, when I get home. I agree, it makes sense to be working for all form types.

[AlonCG]

when form is set to inline or _NotSet ... HTML rendered is like

<div class=" form-group"><label class="control-label" for="SearchValue"> </label><div class="input-group"><span class="input-group-addon"><i class="fa fa-fw fa-search"></i></span><input class="form-control" data-val="true" data-val-maxlength="The field SearchValue must be a string or array type with a maximum length of &#39;128&#39;." data-val-maxlength-max="128" id="SearchValue" name="SearchValue" placeholder="Enter a US city or zipcode." type="text" value="" /><span class="input-group-btn"><button class="btn-default  btn" id="btnFindVouchers" type="submit">FoodVouch</button></span></div>

When using horizontal ...

<div class=" form-group"><label class="control-label col-lg-2" for="SearchValue"> </label><div class="col-lg-10" style="width: 450px;margin-top:30px;"><div class="input-group"><span class="input-group-addon"><i class="fa fa-fw fa-search"></i></span><input class="form-control" data-val="true" data-val-maxlength="The field SearchValue must be a string or array type with a maximum length of &#39;128&#39;." data-val-maxlength-max="128" id="SearchValue" name="SearchValue" placeholder="Enter a US city or zipcode." type="text" value="" /><span class="input-group-btn"><button class="btn-default  btn" id="btnFindVouchers" type="submit">FoodVouch</button></span></div>

with the same snippet:

@(form.FormGroup().ControlsHtmlAttrs(new { style = "width: 450px;margin-top:30px;" })
    .TextBoxFor(search => search.SearchValue)
    .Placeholder("Enter a US city or zipcode.")
    .PrependIcon("fa fa-fw fa-search")
    .Append(Html.Bootstrap().SubmitButton().Text("FoodVouch").Id("btnFindVouchers"))
    .Label().LabelText(string.Empty)
)

Thanks for everything, take your time ;-)

[DmitryEfimenko]

I just inspected this issue a bit dipper. So when a form is horizontal, the following markup is printed (notice the comments about div in the code):

<div class="form-group">
    <label for="inputEmail" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10"> // <-- this is the div where specified attributes would be applied
      <input type="email" class="form-control" id="inputEmail" placeholder="Email">
    </div>
  </div>

However, when other than Horizontal form is used, that div is completely missing. Everything is simply wrapped into <div class="form-group">. So if you need to apply custom html attributes in this case, use .HtmlAttributes() extension of the input.

Please let me know if that does not make sense or if it does not resolve the issue.