Menu icon Foundation
Postfix with "select" input not working

Hello,

I am having difficulty using the Postfix form entry capability. I have placed a "select" input element with a postfix button inside of a navigation bar (nav class="top-bar" data-topbar). When I do this, the "select" input floats back up to the very top of the navigation bar and is out of line with the postfix button. I duplicated my exact code with an input type="text" element instead of the "select" element and everything works perfectly. However, when I change this to the "select" element, it will not cooperate. I assumed that the "select" element would take on the same properties as the input type="text" element but alas this is not so. The interesting thing is that when I am on a mobile device (small-columns), the "select" actually does work just like the "input" element is supposed to and it looks great. But when I transition to medium or large columns, the "select" element once again floats upward.

I have tried many css 'hacks' to get this to work but they have been sadly unsuccessful. I am in need of a Zurb doctor, I believe :(

Please see the attached images and code.

Thank you for your time!
-Matt

Menu help 1

Menu help 2

/*--This one will not work as it is the <select> element--*/
<div class="fixed">
<nav class="top-bar" data-topbar>
    <ul class="title-area">
		<li class="name"><h1><a><?php echo constant('MANUF').' - '.constant('ENTITY').' '.$_SESSION['dealercode']; ?></a></h1></li>
		<li class="toggle-topbar menu-icon"><a><span>Menu</span></a></li>
	</ul>
	<section class="top-bar-section">
    <ul class="left">
		<li class="divider"></li>
		<li><a data-reveal-id="myModal" style="color: #46BCDE; font-weight: bold;">Select Survey &raquo </a></li>
		<li class="divider"></li>
		<div id="myModal" class="small reveal-modal" style="background-color: #ffffff;" data-reveal>
			<div class="row">
				<div class="medium-12 large-12 columns">
					<div class="medium-1 large-1 columns">
						<p> </p>
					</div>
					<div class="medium-10 large-10 columns">
						<form method="post" action="selectsurvey_process.php">
							<h6 style="color: #008cba; text-align: center;">Select <?php echo constant('ENTITY')?> Survey </h6>
							<hr style="margin-top: 0px; margin-bottom: 0px; border-color: #909090;">
							<select style="margin-top: 30px; margin-bottom: 20px;" name="survey_selection" id="survey_selection">
								<option value="">Select survey...</option>
<?php
for ($i=0; $i<3; $i++) {
echo'							<option value= '.$survey[$i]['surveyindex_id']. '>' .$survey[$i]['survey_description']. '</option>';
}
?>								
							</select>
							<input type="submit" class="tiny button radius" value="Submit">
						</form>
					</div>
					<div class="medium-1 large-1 columns">
						<p>  </p>
					</div>
				</div>
			</div>
		    <a class="close-reveal-modal" style="font-size: 19px;">&#215;</a>
		</div>
		<li class="divider"></li>
		<li class="has-form">
		<form method="post" action="dealercodeswitch_process.php">
			<div class="row collapse">
				<div class="small-6 medium-8 large-8 columns">
					<select style="height: 2rem; padding-top: 0; padding-bottom: 0; margin-top:0; margin-bottom: 0;">
						<option value="">Select Dealer </option>
						<?php
					    for ($i=0; $i<$dlr_rows; $i++) {
						    echo '<option value='.$dlr_list[$i]['dealerID'].'>'.$dlr_list[$i]['dealercode'].'</option>';
						}
						?>
					</select>
				</div>
				<div class="small-2 medium-4 large-4 columns">
					<input style="height: 2rem;" type="submit" value="Go" class="alert button postfix" >
				</div>
				<div class="small-4 columns">
					
				</div>
			</div>
		</form>
		</li>
    </ul>
    <ul class="right">
		<li class="divider"></li>
		<li class="has-dropdown">
			<a>Welcome, <?php echo $user->firstName?> </a>
			<ul class="dropdown">
				<li class="has-dropdown">
				<?php
				include('templates/menubar_sidecontents.php');
				?>
			</ul>
        </li>
      </ul>
    </section>
</nav> 
</div>         

/*--This one works perfectly, using the <input> element--*/
<div class="fixed">
<nav class="top-bar" data-topbar>
    <ul class="title-area">
		<li class="name"><h1><a><?php echo constant('MANUF').' - '.constant('ENTITY').' '.$_SESSION['dealercode']; ?></a></h1></li>
		<li class="toggle-topbar menu-icon"><a><span>Menu</span></a></li>
	</ul>
	<section class="top-bar-section">
    <ul class="left">
		<li class="divider"></li>
		<li><a data-reveal-id="myModal" style="color: #46BCDE; font-weight: bold;">Select Survey &raquo </a></li>
		<li class="divider"></li>
		<div id="myModal" class="small reveal-modal" style="background-color: #ffffff;" data-reveal>
			<div class="row">
				<div class="medium-12 large-12 columns">
					<div class="medium-1 large-1 columns">
						<p> </p>
					</div>
					<div class="medium-10 large-10 columns">
						<form method="post" action="selectsurvey_process.php">
							<h6 style="color: #008cba; text-align: center;">Select <?php echo constant('ENTITY')?> Survey </h6>
							<hr style="margin-top: 0px; margin-bottom: 0px; border-color: #909090;">
							<select style="margin-top: 30px; margin-bottom: 20px;" name="survey_selection" id="survey_selection">
								<option value="">Select survey...</option>
<?php
for ($i=0; $i<3; $i++) {
echo'							<option value= '.$survey[$i]['surveyindex_id']. '>' .$survey[$i]['survey_description']. '</option>';
}
?>								
							</select>
							<input type="submit" class="tiny button radius" value="Submit">
						</form>
					</div>
					<div class="medium-1 large-1 columns">
						<p>  </p>
					</div>
				</div>
			</div>
		    <a class="close-reveal-modal" style="font-size: 19px;">&#215;</a>
		</div>
		<li class="divider"></li>
		<li class="has-form">
		<form method="post" action="dealercodeswitch_process.php">
			<div class="row collapse">
				<div class="small-6 medium-8 large-8 columns">
					<input type="text" style="height: 2rem;" placeholder="Select Dealer">
				</div>
				<div class="small-2 medium-4 large-4 columns">
					<input style="height: 2rem;" type="submit" value="Go" class="alert button postfix" >
				</div>
				<div class="small-4 columns">
					
				</div>
			</div>
		</form>
		</li>
    </ul>
    <ul class="right">
		<li class="divider"></li>
		<li class="has-dropdown">
			<a>Welcome, <?php echo $user->firstName?> </a>
			<ul class="dropdown">
				<li class="has-dropdown">
				<?php
				include('templates/menubar_sidecontents.php');
				?>
			</ul>
        </li>
      </ul>
    </section>
</nav> 
</div>
            

         

prefixpostfixselectinput

Hello,

I am having difficulty using the Postfix form entry capability. I have placed a "select" input element with a postfix button inside of a navigation bar (nav class="top-bar" data-topbar). When I do this, the "select" input floats back up to the very top of the navigation bar and is out of line with the postfix button. I duplicated my exact code with an input type="text" element instead of the "select" element and everything works perfectly. However, when I change this to the "select" element, it will not cooperate. I assumed that the "select" element would take on the same properties as the input type="text" element but alas this is not so. The interesting thing is that when I am on a mobile device (small-columns), the "select" actually does work just like the "input" element is supposed to and it looks great. But when I transition to medium or large columns, the "select" element once again floats upward.

I have tried many css 'hacks' to get this to work but they have been sadly unsuccessful. I am in need of a Zurb doctor, I believe :(

Please see the attached images and code.

Thank you for your time!
-Matt

Menu help 1

Menu help 2

/*--This one will not work as it is the <select> element--*/
<div class="fixed">
<nav class="top-bar" data-topbar>
    <ul class="title-area">
		<li class="name"><h1><a><?php echo constant('MANUF').' - '.constant('ENTITY').' '.$_SESSION['dealercode']; ?></a></h1></li>
		<li class="toggle-topbar menu-icon"><a><span>Menu</span></a></li>
	</ul>
	<section class="top-bar-section">
    <ul class="left">
		<li class="divider"></li>
		<li><a data-reveal-id="myModal" style="color: #46BCDE; font-weight: bold;">Select Survey &raquo </a></li>
		<li class="divider"></li>
		<div id="myModal" class="small reveal-modal" style="background-color: #ffffff;" data-reveal>
			<div class="row">
				<div class="medium-12 large-12 columns">
					<div class="medium-1 large-1 columns">
						<p> </p>
					</div>
					<div class="medium-10 large-10 columns">
						<form method="post" action="selectsurvey_process.php">
							<h6 style="color: #008cba; text-align: center;">Select <?php echo constant('ENTITY')?> Survey </h6>
							<hr style="margin-top: 0px; margin-bottom: 0px; border-color: #909090;">
							<select style="margin-top: 30px; margin-bottom: 20px;" name="survey_selection" id="survey_selection">
								<option value="">Select survey...</option>
<?php
for ($i=0; $i<3; $i++) {
echo'							<option value= '.$survey[$i]['surveyindex_id']. '>' .$survey[$i]['survey_description']. '</option>';
}
?>								
							</select>
							<input type="submit" class="tiny button radius" value="Submit">
						</form>
					</div>
					<div class="medium-1 large-1 columns">
						<p>  </p>
					</div>
				</div>
			</div>
		    <a class="close-reveal-modal" style="font-size: 19px;">&#215;</a>
		</div>
		<li class="divider"></li>
		<li class="has-form">
		<form method="post" action="dealercodeswitch_process.php">
			<div class="row collapse">
				<div class="small-6 medium-8 large-8 columns">
					<select style="height: 2rem; padding-top: 0; padding-bottom: 0; margin-top:0; margin-bottom: 0;">
						<option value="">Select Dealer </option>
						<?php
					    for ($i=0; $i<$dlr_rows; $i++) {
						    echo '<option value='.$dlr_list[$i]['dealerID'].'>'.$dlr_list[$i]['dealercode'].'</option>';
						}
						?>
					</select>
				</div>
				<div class="small-2 medium-4 large-4 columns">
					<input style="height: 2rem;" type="submit" value="Go" class="alert button postfix" >
				</div>
				<div class="small-4 columns">
					
				</div>
			</div>
		</form>
		</li>
    </ul>
    <ul class="right">
		<li class="divider"></li>
		<li class="has-dropdown">
			<a>Welcome, <?php echo $user->firstName?> </a>
			<ul class="dropdown">
				<li class="has-dropdown">
				<?php
				include('templates/menubar_sidecontents.php');
				?>
			</ul>
        </li>
      </ul>
    </section>
</nav> 
</div>         

/*--This one works perfectly, using the <input> element--*/
<div class="fixed">
<nav class="top-bar" data-topbar>
    <ul class="title-area">
		<li class="name"><h1><a><?php echo constant('MANUF').' - '.constant('ENTITY').' '.$_SESSION['dealercode']; ?></a></h1></li>
		<li class="toggle-topbar menu-icon"><a><span>Menu</span></a></li>
	</ul>
	<section class="top-bar-section">
    <ul class="left">
		<li class="divider"></li>
		<li><a data-reveal-id="myModal" style="color: #46BCDE; font-weight: bold;">Select Survey &raquo </a></li>
		<li class="divider"></li>
		<div id="myModal" class="small reveal-modal" style="background-color: #ffffff;" data-reveal>
			<div class="row">
				<div class="medium-12 large-12 columns">
					<div class="medium-1 large-1 columns">
						<p> </p>
					</div>
					<div class="medium-10 large-10 columns">
						<form method="post" action="selectsurvey_process.php">
							<h6 style="color: #008cba; text-align: center;">Select <?php echo constant('ENTITY')?> Survey </h6>
							<hr style="margin-top: 0px; margin-bottom: 0px; border-color: #909090;">
							<select style="margin-top: 30px; margin-bottom: 20px;" name="survey_selection" id="survey_selection">
								<option value="">Select survey...</option>
<?php
for ($i=0; $i<3; $i++) {
echo'							<option value= '.$survey[$i]['surveyindex_id']. '>' .$survey[$i]['survey_description']. '</option>';
}
?>								
							</select>
							<input type="submit" class="tiny button radius" value="Submit">
						</form>
					</div>
					<div class="medium-1 large-1 columns">
						<p>  </p>
					</div>
				</div>
			</div>
		    <a class="close-reveal-modal" style="font-size: 19px;">&#215;</a>
		</div>
		<li class="divider"></li>
		<li class="has-form">
		<form method="post" action="dealercodeswitch_process.php">
			<div class="row collapse">
				<div class="small-6 medium-8 large-8 columns">
					<input type="text" style="height: 2rem;" placeholder="Select Dealer">
				</div>
				<div class="small-2 medium-4 large-4 columns">
					<input style="height: 2rem;" type="submit" value="Go" class="alert button postfix" >
				</div>
				<div class="small-4 columns">
					
				</div>
			</div>
		</form>
		</li>
    </ul>
    <ul class="right">
		<li class="divider"></li>
		<li class="has-dropdown">
			<a>Welcome, <?php echo $user->firstName?> </a>
			<ul class="dropdown">
				<li class="has-dropdown">
				<?php
				include('templates/menubar_sidecontents.php');
				?>
			</ul>
        </li>
      </ul>
    </section>
</nav> 
</div>
            

         
Rafi Benkual almost 5 years ago

The top-bar CSS doesn't have styles for <select> so you need to write some CSS to make it happen. Here is something I started that you can make perfect with some tweeking: http://codepen.io/rafibomb/pen/QwvmGr

Matthew Holland almost 5 years ago

Thank you, Rafi. I appreciate your prompt response and am looking at your code now. Fast reply!!