TwitterBootstrapMvc icon indicating copy to clipboard operation
TwitterBootstrapMvc copied to clipboard

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

Open AlonCG opened this issue 10 years ago • 12 comments

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;" })

2014-03-04 12_58_45-e-tabs dashboard designer

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!

AlonCG avatar Mar 04 '14 11:03 AlonCG