DmitryEfimenko / TwitterBootstrapMvc

Fluent implementation of ASP.NET-MVC HTML helpers for Twitter Bootstrap.
Apache License 2.0
221 stars 78 forks source link

Strange formgroup html #394

Open dcraigen opened 9 years ago

dcraigen commented 9 years ago

Hi,

In my dev environment the formgroup generates code like this:

<div class=" form-group">
    <label class="control-label col-xs-185 col-sm-3" for="Url">Unique URL<span class="required">*</span> </label>
    <div class="col-xs--173 col-sm--173 col-md--173">
        <input class="UrlInput  form-control" data-val="true" data-val-required="The Unique URL field is required." id="Url" name="Url" type="text" value="">
    </div>
</div>

Code used...

@using(var form = Html.Bootstrap().Begin(new Form().Type(FormType.Horizontal).LabelWidthSm(3))) {
@form.FormGroup().TextBoxFor(x => x.Url).Class("UrlInput").HelpText(helpText)
}

What am I doing wrong?

DmitryEfimenko commented 9 years ago

Never seen anything like this. Most likely some 3rd party javascript plugin interferes. One way to make sure of that is to check the actual response from the server using chrome dev tools (network tab) and see if the response comes like this or not.

dcraigen commented 9 years ago

Hi, This problem went away but has just come back. It only happens on my production server. It only happens to Horizontal forms, it is definitely being emitted by TwitterBookstrapMVC. Using version 3.16.2 TwitterBootstrapMVC5

Any ideas what could be causing it? Model

public class TestViewModel : BaseViewModel
    {
        public string TestName { get; set; }
    }
}

View

@model TestViewModel
@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <div>
        @using(var form = Html.Bootstrap().Begin(new Form().Type(FormType.Horizontal).HtmlAttributes(new { enctype = "multipart/form-data" })))
        {
            @form.FormGroup().TextBoxFor(x => x.TestName)
        }
    </div>
</body>
</html>

Result (from developer network tab)


<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <div>
<form action="/Test/Index" class="form-horizontal" enctype="multipart/form-data" method="post"><div class=" form-group"><label class="control-label col-xs-138" for="TestName">Test Name<span class="required" style="visibility:hidden;">*</span> </label><div class="col-xs--126 col-sm--126 col-md--126"><input class="form-control" id="TestName" name="TestName" type="text" value="" /><span class="field-validation-valid" data-valmsg-for="TestName" data-valmsg-replace="true"></span></div></div></form>    </div>
</body>
</html>
DmitryEfimenko commented 9 years ago

I'm not able to reproduce this. Could you create a sample project showing the issue and send it over to me via email?

dcraigen commented 9 years ago

Thanks for the response.

It doesn't happen on my dev box, only when I publish it to my production server. I can't recreate it, but neither can I resolve it.

Any ideas where I could start to look? I think it must be some combination of packages but not sure why it doesn't happen all the time?

On 10 November 2015 at 17:16, Dmitry A. Efimenko notifications@github.com wrote:

I'm not able to reproduce this. Could you create a sample project showing the issue and send it over to me via email?

— Reply to this email directly or view it on GitHub https://github.com/DmitryEfimenko/TwitterBootstrapMvc/issues/394#issuecomment-155493309 .

DmitryEfimenko commented 9 years ago

You could try making sure that all the same dlls are installed. Install them one by one and see if installing any of them results in this issue.

Guy--L commented 8 years ago

I have a similar issue that is hard to resolve. On form groups on a horizontal form, the only difference between development and production is an extra col-xs-3 in the production div's class. It's enough to make the UI unusable. I've compared dev and prd directories with BeyondCompare see no unusual differences.

Guy--L commented 8 years ago

It's a problem. So much so, that it's now got a hack. Where is that extra class coming from?

    <script type="text/javascript">
        $(function () {
            $('#contextform div.form-group').attr('class', 'form-group');
        });
    </script>
DmitryEfimenko commented 8 years ago

I've published my test website to production environment and still didn't see any errors. do you build your project using production configuration for production? If so, can you build it like that and run in dev environment to see if the issue is there?