Width automatically changes when JavaScript function occurs?
Question
I'm currently experiencing something rather strange. I'm building a website for a client which includes a horizontal nav bar that dynamically changes the page content without reloading via javascript. Three of the four tabs function correctly, however when I select the last tab, the side bar dramatically increases in width, pushing my service form out of it's background and off the page - even though the javascript shouldn't be affecting that element at all. I've been playing with it all day and cannot figure out what's causing this.
My JavaScript is:
var jsOverview = document.getElementById('overview'); var jsQuote = document.getElementById('quote'); function changeTextQuote() { if (jsOverview.style.display === 'none') { jsOverview.style.display = 'block'; jsQuote.style.display = 'none'; } else { jsOverview.style.display = 'none'; jsQuote.style.display = 'block'; } }
<!-- begin snippet: js hide: false console: true babel: false -->
/*Service Pages CSS*/
.services {
display: grid;
width: 100%;
margin: 0 600px;
margin-bottom: 10px;
}
.side-bar {
grid-column: 1;
grid-row: 1;
background: black;
border-bottom: 5px solid white;
border-left: 5px solid white;
border-top: 5px solid white;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
width: 100%;
height: 258px;
margin: 30px 0;
margin-right: 25px;
}
ul.side-bar-list {
text-align: left;
padding: 0;
width: 100%;
}
.side-bar-list li {
margin-bottom: 10px;
margin-top: 10px;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 10px;
width: 100%;
}
.side-bar-list li:hover {
color: white;
text-decoration: none;
background-color: darkred;
}
.side-bar-list li:focus {
color: white;
text-decoration: none;
background-color: darkred;
}
.side-bar ul {
list-style-type: none;
}
.side-bar-item {
color: white;
text-align: left;
text-decoration: none;
}
.side-bar-item:hover {
color: white;
text-decoration: none;
}
.side-bar-item:focus {
color: white;
text-decoration: none;
}
.services-content {
grid-column: 2;
grid-row: 1;
background: rgba(90, 90, 90, 0.6);
border: 5px solid black;
border-radius: 5px;
padding-left: 10px;
width: 30%;
margin-bottom: 5px;
}
.serviceForm {
background: rgba(90, 90, 90, 0.6);
border: 5px solid black;
border-radius: 5px;
grid-column: 2;
grid-row: 1;
display: grid;
grid-column-gap: 20px;
width: 30%;
margin: 20px auto;
padding: 10px;
padding-left: 20px;
}
.col-left { grid-column: 1; grid-row: 1; } .col-right { grid-column: 3; grid-row: 1; } .commentText { grid-column-start: 1; grid-column-end: 4; } label { color: black; } span { color: white; } textarea[name=comments] { resize: none; padding: 0; margin: 0; width: 100%; max-width: 520px; height: 150px; }
HTML:
<body>
<div class="services">
<div class="side-bar">
<ul class="side-bar-list">
<li><a class="side-bar-item" href="#" onclick="changeTextOverview(); return false;">Overview</a></li>
<li><a class="side-bar-item" href="#" onclick="changeTextInterior(); return false;">Interior Lighting</a></li>
<li><a class="side-bar-item" href="#" onclick="changeTextExterior(); return false;">Exterior Lighitng</a></li>
<li><a class="side-bar-item" href="#" onclick="changeTextQuote(); return false;">Request a Quote</a></li>
</ul>
</div>
<div class="services-content">
<div id="overview">
<h1>Lighting Service:</h1><br />
<p>Text removed for sake of business entity.</p>
</div>
<div id="quote" style="display: none;" <h1>Request a Quote</h1>
<form class="serviceForm" action="mailto:companyemail" method="post" enctype="text/plain">
<div class="col-left">
<label>
<span>* Name:</span><br />
<input type="text" name="LightingRequestName" required />
</label><br />
<label>
<span>* Email:</span><br />
<input type="text" name="LightingRequestEmail" required />
</label><br />
<label>
<span>Company:</span><br />
<input type="text" name="LightingRequestCompany" />
</label><br />
<label>
<span>Address:</span><br />
<input type="text" name="LightingRequestAddress" />
</label><br />
</div>
<div class="col-right">
<label>
<span>City:</span><br />
<input type="text" name="LightingRequestCity" />
</label><br />
<label>
<span>State:</span><br />
<input type="text" name="LightingRequestState" />
</label><br />
<label>
<span>Zip Code:</span><br />
<input type="text" name="LightingRequestZip" />
</label><br />
<label>
<span>Phone Number:</span><br />
<input type="text" name="LightingRequestNumber" />
</label><br />
</div>
<label class="commentText">
<span>Comments:</span><br />
<textarea name="comments"></textarea><br />
</label>
<div class="formSubmitButton">
<input type="submit" value="Submit" /><br />
<br />
</div>
</form>
</div>
</div>
</div>
<script src="~/Content/LightingPageText.js"></script>
<script src="~/Content/ServicesQuote.js"></script>
</body>
I'm sure it's probably something really stupid I overlooked, but any help is appreciated!
EDIT: I was looking around in the inspect window on chrome, whenever I click the button to display the form, the actual grid column the side bar is in expands, pushing the rest of the content off of the screen. Not sure why this is happening. I'm still playing with it, but hopefully this revelation will help lead to some answers.
1 answers
solution1
0 2018-11-19 20:30:44
If this is a direct copy-paste from your source, you forgot the closing angle bracket on #quote .
Yours: <div id="quote" style="display: none;" <h1>Request a Quote</h1> <div id="quote" style="display: none;" <h1>Request a Quote</h1>
Updated: <div id="quote" style="display: none;"> <h1>Request a Quote</h1>
Note the > before opening <h1> .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.