0

過去数か月間取り組んできたプロジェクトがあります。今日まで、すべてがうまく機能しています。私が来たとき、私はすべてのボタンのサイズが同じであることに気付きました. Chrome の開発者ツールを使用してウェブサイトをデバッグするのが好きで、ボタンが正しく表示されない理由を調べたところ、何も問題はないようでした。では、何が起こっているのか、どのように修正すればよいのかを特定するのを手伝っていただけませんか?

.aspx コードは次のとおりです。

<div class="row section text-center">
    <h2><%: Page.Title %> Page</h2><br />
    <asp:Button ID="stReturnButton" runat="server" CssClass="stButton-lg" Text="Back to Training Portal" PostBackUrl="~/SST/SafetyTrainingPortal.aspx" />
    <hr />
</div>

<div class="row col-xs-12 text-center">
    <div class="col-xs-6 text-center">
        <asp:Button ID="btnEditUpdate" runat="server" Text="Update Employee Certificates" CssClass="stButton-lg" PostBackUrl="~/SST/SUPERVISOR/UpdateCertificates.aspx"/>
    </div>
    <div class="col-xs-6 text-center">
        <asp:Button ID="btnAddCerts" runat="server" Text="Update Employee Profile" CssClass="stButton-lg" PostBackUrl="~/SST/SUPERVISOR/UpdateEmployeeProfile.aspx" />
    </div>

ページは次のようになります。 ここに画像の説明を入力

ボタンの CSS は次のとおりです。

    .stButton {
    width: 190px;
    opacity: 1.0;
    color: #0e4676;
    background-color: #9FCF6E;
    border-color: #357ebd;
    padding: 5px;
    margin-bottom: 5px;
    border-radius: 10px;
    box-shadow: #063156 3px 3px;
    cursor: pointer;
    user-select: none;
    text-align:center;
}
.stButton-lg {
    width: 325px !important;
    opacity: 1.0;
    color: #0e4676;
    background-color: #9FCF6E;
    border-color: #357ebd;
    padding: 5px;
    margin-bottom: 5px;
    border-radius: 10px;
    box-shadow: #063156 3px 3px;
    cursor: pointer;
    user-select: none;
    text-align: center;
}

ご覧のとおり、通常のボタン用の CSS と大きなボタン用の CSS があります。大きなボタンは、.aspx コードでターゲットにしているものです。ボタンが正しく表示されないため、幅の最後に「!important」を含めます。それが役立つかどうかを確認するためだけに...明らかにそうではありませんでした。インライン スタイリングも試しましたが、どちらも機能しません。1 つの重要な注意事項として、IE、Chrome、および Edge のブラウザーでページを表示しました。

とにかく、プロジェクトのフォルダー構造内のファイルを表示するマスター ページのリンクを次に示します ここに画像の説明を入力 。プレースホルダーのすぐ上でリンクを宣言しているので、Script.Render のプレースホルダーをコメントアウトしました。また、コメントを外しても、私にとっても何もしませんでした。

私はそれをすべてカバーしたと思うので、何かを逃した場合はお知らせください。与えられたすべての助けに感謝します。

4

1 に答える 1

0

ご協力ありがとうございました。しかし、私は答えを見つけました。これが他の誰かに役立つことを願っています。問題は、経験の浅い別のチーム メンバーが、CSS で入力コントロールの幅を Max-Width: 150px に変更したことでした (上の図には示されていません)。その小さなことはほぼ一日中私を通り抜けましたが、少なくともそれは発見され、修正されました.

助けてくれた人やコメントしてくれた人に感謝します。

于 2018-04-05T23:24:28.870 に答える