Canvas Support

Input form on sub-menu nav?

7 replies·opened Jan 5, 2017
M
maccapperJan 5, 2017

Is it possible to put a form input field on the sub-menu bar?

S
SemiColonWebSTAFFJan 6, 2017

Hello,

Yes this is Definitely Possible! Consider adding the following code as a Sub Menu Item: 

<li style="padding: 5px;">
	<input type="text" class="form-control" placeholder="Enter a Text..">
</li>

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

M
maccapperJan 9, 2017

That didn't quite work. Here is the code I'm working with (or trying to get to work)

<div class="menu-title"><span>Weather Conditions:</span> <?php echo $locData; ?> <!--<?php echo $locCity; ?>, <?php echo $locState; ?>--></div>

The above code is flush left. I'd like to include this form flush right in the same menu:

            <!-- input-group -->
            <form method="post" action="<?=$_SERVER['PHP_SELF'];?>">
              <div class="input-group">
                <input type="search" id="geocomplete" class="form-control" size="30" name="address" placeholder="Search by Address or Zip">
                <span class="input-group-btn">
                  <button class="btn btn-default" type="submit">Go!</button>
                </span>
              </div></form>
              <!-- /input-group -->
M
maccapperJan 9, 2017

It does sort of work like this:

<div class="menu-title"><span>Weather Conditions:</span> <?php echo $locData; ?> <!--<?php echo $locCity; ?>, <?php echo $locState; ?>--></div>
            <!-- input-group -->
            <form method="post" action="<?=$_SERVER['PHP_SELF'];?>">
              <div class="input-group">
                <input type="search" id="geocomplete" class="form-control" size="30" name="address" placeholder="Search by Address or Zip">
                <span class="input-group-btn">
                  <button class="btn btn-default" type="submit">Go!</button>
                </span>
              </div></form>
              <!-- /input-group -->

However I can't change the size of the input field (see attached screenshot). Is it possible to split the menu-title div into two columns?

M
maccapperJan 11, 2017

bump

S
SemiColonWebSTAFFJan 12, 2017

Hello,

Consider using the following Code: 

<div id="page-menu">

	<div id="page-menu-wrap">

		<div class="container clearfix">

			<div class="menu-title">Explore <span>CANVAS</span></div>

			<div class="input-group fright" style="max-width: 300px;">
				<input type="text" class="form-control" placeholder="Search for..." style="margin-top: 5px;">
				<span class="input-group-btn">
					<button class="btn btn-default" type="button">Go!</button>
				</span>
			</div>

			<div id="page-submenu-trigger"><i class="icon-reorder"></i></div>

		</div>

	</div>

</div>

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

M
maccapperJan 12, 2017

While the page looks like expected, the form doesn't work. How do I get the <form> tags to function properly?

    <div id="page-menu">

        <div id="page-menu-wrap">

            <div class="container clearfix">

              <div class="menu-title"><span>Weather Conditions:</span> <?php echo $locData; ?> <!--<?php echo $locCity; ?>, <?php echo $locState; ?>--></div>

                <!-- input-group -->
                <form method="post" action="<?=$_SERVER['PHP_SELF'];?>">
                <div class="input-group fright" style="max-width: 400px;">
                    <input type="text" id="geocomplete" class="form-control" placeholder="Search by Address or Zip" style="margin-top: 5px;">
                    <span class="input-group-btn">
                        <button class="btn btn-default" type="button">Go!</button>
                    </span>
                  </div></form>
                  <!-- /input-group -->
                <div id="page-submenu-trigger"><i class="icon-reorder"></i></div>

            </div>

        </div>

      </div><!-- #page-menu end -->
M
maccapperJan 12, 2017

Got it - Submit button had a type of "button" instead of "submit"

Thanks.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard