Add popover as helptext in custom control

[bobdigi80]

Hi Dmitry, I have a textbox control with a button appended within it and I would like to have a popover next to it that will contain some help text.

I have tried to use a custom control but I have found the popover appears on the next line as it is not contained within the previous div with the class of input-group.

My code is below:

@f.FormGroup().CustomControls(
        Html.Bootstrap().TextBoxFor(m => m.postCode).Class("uppercase").Append(Html.Bootstrap().Button().Text(Buttons.AddressSearch).Id("btnAddress").Class("search").HtmlAttributes(new { onclick = npafstr })),
        Html.Bootstrap().Icon("glyphicon glyphicon-info-sign").Popover(new Popover("Detailed Popover", "Some cool facts about...").Closeable())
    ).LabelFor(m => m.postCode)

Please could you tell me if there is any way that I can append the pop over icon so that it will appear next to the button?

In addition I have found that the popover is not closing when I click on the x in the corner of it. I wonder if there is something that I am doing wrong.

Any help would be gratefully received.

Thanks in advance

[DmitryEfimenko]

Hello. This is due to the fact that Bootstrap stretches input to the 100% width of its container. This functionality was introduced in Bootstrap 3. So to deal with this, you now need to wrap inputs in divs and specify width on these divs. Basically you'll have to play with Bootstrap's grid and css.

[DmitryEfimenko]

The close button used to function in earlier version of Bootstrap 3. It appears in latest version they've updated things a bit. I'll make an update to BMVC to adjust for the changes.

[bobdigi80]

Thanks for the reply, Just to be clear then. There is no way to use a custom control to achieve what I want to do as the icon for the popover will alway be in the wrong div. At the moment it is in the div with input-group as it's class and I need it to be in the parent div with the class for-group if I am to use a custom control.

In order for me to get the icon where I want I would need to remove the icon from the custom control wrap the control in a div and set a width on it and then float the icon next to it?

Please let me know if that's correct, thanks.

[DmitryEfimenko]

You can have as many divs as you'd like inside Custom controls.

@f.FormGroup().CustomControls(
    "<div>" + Html.Bootstrap()... + "</div>",
    "<div>" + Html.Bootstrap()... + "</div>",
)

Give these divs custom css classes and style them with appropriate width.

[bobdigi80]

I wasn't aware you could do that, thanks.

However I seem to have found a problem in that I can't use this syntax for my existing control as I am getting an error in that argument 'string' is not assignable to parameter type System.Web.IHtmlString

This is my code and Visual Studio doesn't seem to like the second line.

@f.FormGroup().CustomControls(
            "<div>" + Html.Bootstrap().TextBoxFor(m => m.postCode).Class("uppercase").Append(Html.Bootstrap().Button().Text(Buttons.AddressSearch).Id("btnAddress").Class("search").HtmlAttributes(new { onclick = npafstr }))+ "</div>" ,
           "<div>" + Html.Bootstrap().Icon("col-xs-1 help").Popover(new Popover(HelpText.PostcodeTitle, HelpText.Postcode).Closeable()) + "</div>"
        ).LabelFor(m => m.postCode)

Is there something I am doing wrong?

Thanks.

[DmitryEfimenko]

my bad, indeed it can't take string in that form. You can either wrap it in MvcHtmlString.Create() or use BMVC's Div method:

@Html.Bootstrap().Div(... your button here...)