Я добавляю форму оплаты Square в существующий файл ejs.Когда я добавляю квадратный HTML-код на страницу, теги привязки панели навигации Bootstrap больше не работают, а только для тегов привязки в середине панели навигации.Внешние ссылки работают.Раскрывающееся меню также отключается при добавлении квадратной формы.Если я закомментирую форму Square, функциональность панели навигации вернется в нормальное состояние, как и якорные теги.
Я попытался добавить div вокруг панели навигации, а также вокруг формы платежа Square, но нетпомогло.Я также попытался добавить отступы в CSS для всех элементов, но результаты те же.Может ли это быть поведением iframe, запускаемым файлом квадратного javascript?Возможно, это борьба с Bootstrap?
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="/">Friends of Roam</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="/mission">Our Mission<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://tranquil-caverns-74813.herokuapp.com/">Roam Music School</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/communityOutreach">Community Outreach</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/successStories">Success Stories</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/board">Our Board Members</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/contact">Contact Us</a>
</li>
<br>
<li class="nav-item active">
<a class="nav-link" href="/square">Donate Today</a>
</li>
</ul>
</div>
</nav>
<h2 class ="text-center">Thank you for supporting the arts in our community!</h1>
<div id="form-container">
<div id="sq-ccbox">
<form id="nonce-form" novalidate action="PATH/TO/PAYMENT/PROCESSING/PAGE" method="post">
<fieldset>
<span class="label">Card Number</span>
<div id="sq-card-number"></div>
<div class="third">
<span class="label">Expiration</span>
<div id="sq-expiration-date"></div>
</div>
<div class="third">
<span class="label">CVV</span>
<div id="sq-cvv"></div>
</div>
<div class="third">
<span class="label">Postal</span>
<div id="sq-postal-code"></div>
</div>
</fieldset>
<button id="sq-creditcard" class="button-credit-card" onclick="requestCardNonce(event)">Donate $1.00</button>
<div id="error"></div>
<input type="hidden" id="card-nonce" name="nonce">
</form>
</div> <!-- end #sq-ccbox -->
</div> <!-- end #form-container -->
CSS:
* {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body, html {
color: #373F4A;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: normal;
}
iframe {
margin: 0;
padding: 0;
border: 0;
}
button {
border: 0;
}
hr {
height: 1px;
border: 0;
background-color: #CCC;
}
fieldset {
margin: 0;
padding: 0;
border: 0;
}
h2 {
padding-top: 20px;
}
/*.navbar {*/
/* padding-bottom: 10px;*/
/*}*/
#form-container {
padding-top: 400px;
position: relative;
width: 380px;
margin: auto;
top: 50%;
transform: translateY(-50%);
}
.label {
font-size: 14px;
font-weight: 500;
line-height: 24px;
letter-spacing: 0.5;
text-transform: uppercase;
}
.third {
float: left;
width: calc((100% - 32px) / 3);
padding: 0;
margin: 0 16px 16px 0;
}
.third:last-of-type {
margin-right: 0;
}
/* Define how SqPaymentForm iframes should look */
.sq-input {
box-sizing: border-box;
border: 1px solid #E0E2E3;
border-radius: 4px;
outline-offset: -2px;
display: inline-block;
-webkit-transition: border-color .2s ease-in-out, background .2s ease-in-out;
-moz-transition: border-color .2s ease-in-out, background .2s ease-in-out;
-ms-transition: border-color .2s ease-in-out, background .2s ease-in-out;
transition: border-color .2s ease-in-out, background .2s ease-in-out;
}
#sq-ccbox {
padding-top: 20px;
}
/* Define how SqPaymentForm iframes should look when they have focus */
.sq-input--focus {
border: 1px solid #4A90E2;
background-color: rgba(74,144,226,0.02);
}
/* Define how SqPaymentForm iframes should look when they contain invalid values */
.sq-input--error {
border: 1px solid #E02F2F;
background-color: rgba(244,47,47,0.02);
}
#sq-card-number {
margin-bottom: 16px;
}
/* Customize the "Donate with Credit Card" button */
.button-credit-card {
width: 100%;
height: 56px;
margin-top: 10px;
background: #4A90E2;
border-radius: 4px;
cursor: pointer;
display: block;
color: #FFFFFF;
font-size: 16px;
line-height: 24px;
font-weight: 700;
letter-spacing: 0;
text-align: center;
-webkit-transition: background .2s ease-in-out;
-moz-transition: background .2s ease-in-out;
-ms-transition: background .2s ease-in-out;
transition: background .2s ease-in-out;
}
.button-credit-card:hover {
background-color: #22F022;
}
#error {
width: 100%;
margin-top: 16px;
font-size: 14px;
color: red;
font-weight: 500;
text-align: center;
opacity: 0.8;
}