ASP.NET窗体中的md按钮大小不正确

时间:2017-03-21 16:44:27

标签: c# html asp.net razor angular-material

我有一个ASP.NET表单,其中我想添加一个md按钮,但是当我将md-button放在表单中时,它会被调整大小并且它不适合我想要的行。< / p>

我找不到有关此行为的任何文档,我尝试在按钮本身上设置布局,将其放在md-input-container等中......

我想在表单中使用此按钮,因此我不必自己重写提交表单功能。

这是我在HTML中的表单:

<div layout-padding layout="column">
    @using (Html.BeginForm("Login", "Home", FormMethod.Post))
    {
        <md-input-container class="mt-35" layout="row">
            <label>Ton email :</label>
            @Html.TextBoxFor(x => x.Username)
        </md-input-container>
        <md-input-container layout="row">
            <label>Ton mot de passe :</label>
            @Html.PasswordFor(x => x.Password)
        </md-input-container>
        <md-input-container layout="row">
            <md-checkbox aria-label="Rester connecté">
                Rester connecté
            </md-checkbox>
        </md-input-container>
        <md-button class="md-raised md-primary">Me connecter</md-button>
        <!-- This button doesn't fit -->
    }
    <md-button class="md-raised md-primary">Connect with Facebook</md-button>
    <!-- This one does -->
</div>

我没有更改任何CSS,我正在使用Angular Material 1.1.0

以下是我想要实现的内容和现在的内容的两个屏幕截图:

What I have now 这就是我现在所拥有的,我上面写的代码。

What I want 这就是我想要实现的目标。

编辑: 这是我的附加CSS:

.parent {
  overflow: hidden;
}

.card img {
  width: 100%;
  height: auto;
}

.mt-35 {
    margin-top: 35px !important;
}

.mb-35 {
    margin-bottom: 35px !important;
}
.mb-15 {
    margin-bottom: 15px !important;
}
.md-content.md-default-theme, md-content {
    background-color: white !important;
    border-radius: 10px !important;
}
.md-datepicker-input-container {
    width: 100% !important;
}
.md-datepicker-input {
    max-width: 100% !important;
}

1 个答案:

答案 0 :(得分:0)

发现它!

表单弄乱了布局,我通过在BeginForm方法中添加layout属性来实现它:

<meta http-equiv="Content-Security-Policy" content="default-src *; style-src *  'unsafe-inline'; script-src *  'unsafe-inline'; media-src *">

自定义CSS以消除@using (Html.BeginForm("Login", "Home", FormMethod.Post, new { @layout = "column" })) { <md-input-container class="mt-35" layout="row"> <label>Ton email :</label> @Html.TextBoxFor(x => x.Username) </md-input-container> <md-input-container layout="row"> <label>Ton mot de passe :</label> @Html.PasswordFor(x => x.Password) </md-input-container> <md-input-container layout="row"> <md-checkbox aria-label="Rester connecté"> Rester connecté </md-checkbox> </md-input-container> <md-button class="md-raised md-primary md-button-no-margin" layout-padding type="submit">Me connecter</md-button> } 类中的边距:

md-button