The Flask form within the Bootstrap input-group is breaking onto a new line when viewed on mobile devices

I want the 'Go' button to remain next to the search field. It displays correctly on Desktop view, but on mobile view, the submit button wraps (breaking up the input-group). How can I prevent this?

Additionally, Bootstrap is adding gray lines around the form on mobile devices. If anyone knows how to stop this from happening, please let me know.

I attempted to use 'flex-nowrap' from the documentation, but it seems to be for a different version of Bootstrap and didn't work. https://getbootstrap.com/docs/4.3/components/input-group/#wrapping

    <body>
    {% block navbar %} <!-- Nav Bar -->
    <nav class="navbar navbar-default">
      <div class="container">
        <div class="navbar-header">
          <a style="font-size: 20px; padding-top: 16px;" class="navbar-brand" href="{{ url_for('index') }}">My Website</a>
          
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-menu" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        </div>
        
        {% if base['search_bar'] %}
        <div class="navbar-form navbar-left col-lg-6">
          <div class="input-group">
            <form method="POST" action="{{ url_for('search') }}">
            {{ base['search_bar'].hidden_tag() }}
            {{ base['search_bar'].search_for(class="form-control", placeholder="Search with Barcode") }}
            <span class="input-group-btn">
            {{ base['search_bar'].start_search(class="btn btn-primary") }}
            </span>
          </form>
          </div><!-- /input-group -->
        </div><!-- /.col-lg-6 -->
        {% endif %}

        <div id="main-menu" class="collapse navbar-collapse">
          <ul class="nav navbar-nav navbar-right">
            {% if current_user.is_anonymous %}
            <li><a href="{{ url_for('login') }}"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
            <li><a href="{{ url_for('signup') }}">Register</a></li>
            {% else %}
            <li><a href="{{ url_for('index') }}"><span class="glyphicon glyphicon-user"></span> {{ current_user.username }}</a></li>
            <li><a href="{{ url_for('logout') }}"><span class="glyphicon glyphicon-log-in"></span> Logout</a></li>
            {% endif %}
          </ul>
        </div>
      </div>
    </nav>

    {% endblock %} <!-- Nav Bar -->
class SearchBar(FlaskForm):
    search_for = StringField('Search', validators=[DataRequired()])
    start_search = SubmitField('Go')

Here's how it appears for mobile users.

Answer №1

Simply place them within the same .input-group container using Bootstrap's 3 markup syntax.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bad8d5d5cec9cec8dbcafa89948e948b">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c7a5a8a8b3b4b3b5a6b787f4e9f3e9f6">[email protected]</a>/dist/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f3919c9c878087819283b3c0ddc7ddc2">[email protected]</a>/dist/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

<body>
  {% block navbar %}
  <!-- Nav Bar -->
  <nav class="navbar navbar-default">
    <div class="container">
      <div class="navbar-header">
        <a style="font-size: 20px; padding-top: 16px;" class="navbar-brand" href="{{ url_for('index') }}">My Website</a>

        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-menu" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
      </div>

      {% if base['search_bar'] %}
      <div class="navbar-form navbar-left col-lg-6">
        <div class="input-group">
          <form method="POST" action="{{ url_for('search') }}">
            <div class="input-group">

              <input type="search" class="form-control" placeholder="Search with Barcode">
              <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
            </div>
          </form>
        </div>
        <!-- /input-group -->
      </div>
      <!-- /.col-lg-6 -->
      {% endif %}

      <div id="main-menu" class="collapse navbar-collapse">
        <ul class="nav navbar-nav navbar-right">
          {% if current_user.is_anonymous %}
          <li><a href="{{ url_for('login') }}"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
          <li><a href="{{ url_for('signup') }}">Register</a></li>
          {% else %}
          <li><a href="{{ url_for('index') }}"><span class="glyphicon glyphicon-user"></span> {{ current_user.username }}</a></li>
          <li><a href="{{ url_for('logout') }}"><span class="glyphicon glyphicon-log-in"></span> Logout</a></li>
          {% endif %}
        </ul>
      </div>
    </div>
  </nav>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Error: Property 'html' is undefined - AJAX response must be displayed only in a specific div

I encountered an issue: Uncaught TypeError: Cannot read property 'html' of undefined I am working on implementing a voting system for each video on my webpage from a database. I have successfully integrated it using AJAX, but the problem is ...

Issue: The login.component.html file failed to load

I attempted to utilize a custom-made HTML file with the templateUrl attribute in Angular2. Below is the content of my login.component.ts file: import {Component} from '@angular/core'; @Component({ selector: 'login' , template ...

Adding material-ui library to a stylesheet

Can I include @material-ui/core/colors/deepOrange in my CSS file? I want to import this library and use it as shown below: import deepOrange from '@material-ui/core/colors/deepOrange'; import deepPurple from '@material-ui/core/colors/deepPu ...

How can I apply both Css and Bootstrap styles to an element in Next.js?

I'm having trouble incorporating the Bootstrap class sticky-top into another CSS style element. I attempted to achieve the same effect without Bootstrap by adding position: sticky, top: 0 in the CSS, but it didn't work as expected. The issue aris ...

What is the best way to extract plain text with JQuery?

I found this Html code snippet: <div class="form-group row"> <label id="lb_size" class="col-lg-3 col-form-label"> <span class="must-have">****</span> Size </label> </div> My goal is to ext ...

As you scroll, a box blocks off half of the screen

Hey everyone, I could really use your assistance! I'm working on developing a javascript code and here is the idea - if anyone can contribute to it. It's like a social media platform where users enter the site and the is_user_logged_in parameter ...

Tips for modifying hover effects using jQuerystylesheet changes

I attempted running the following code snippet var buttonElement = $('<button>Button</button>'); $('body').append(buttonElement); buttonElement.hover().css('background-color', 'red'); Unfortunately, the ...

Child element casting shadow over parent element

I am currently using box shadow for both the parent (.map) and child (.toggle-button): .map { position: fixed; top: 20px; right: 0; width: 280px; height: 280px; z-index: 9999; box-shadow: 0px 1px 6px 0px rgba(0,0,0,0.3); } .map ...

The fixed navigation bar shows a flickering effect while scrolling at a slow pace

Currently facing a challenge with our sticky navigation. Noticing a flickering issue on the second navigation (sticky nav) when users scroll down slowly. The problem seems to be specific to Chrome and Edge, as it doesn't occur on Firefox, IE11, and S ...

Ensuring the same height for the navigation bar and logo with aligned vertical text

I'm in the process of recreating a simple navigation menu and I've reached the section where I am encountering an issue with the list items. The orange li element is not filling up 100% of the width, and I also need the links to align in the midd ...

Unable to utilize external JavaScript files in Angular 8

I've been working on integrating an HTML template into my Angular project and for the most part, everything is going smoothly. However, I've encountered an issue where my JS plugins are not loading properly. I have double-checked the file paths i ...

Dynamic content displayed within adjacent div elements

I am currently working on a project where I am dynamically generating an outline by creating panels and labels in ASP.NET. Each node in the outline is defined by an outline number and outline text, which are obtained from a database that defines the relati ...

The Limits of JavaScript Tables

Currently facing an issue with a webpage under development. To provide some context, here is the basic layout of the problematic section: The page features a form where users can select from four checkboxes and a dropdown menu. Once at least one checkbox ...

What causes the source code of a website to change when accessed from various browsers?

When analyzing the source code of bartzmall.pk using various browsers, it reveals different classes being added to the html tag for each browser. For Firefox: <html class="firefox firefox53 otherClasses"> For Chrome: <html class="webkit chrome ...

Show and hide HTML div elements dynamically using jQuery based on the selection from a dropdown

I am attempting to display or hide various divs based on user input from a select drop-down box. In fact, I initially tried to directly use the code from jQuery dropdown hide show div based on value, but I seem to be missing something simple that is preven ...

Instructions on how to redirect to an external website once the ajax request data has been successfully retrieved

Currently working on the following code snippet... <script> $("#ajaxform").submit(function(e) { $("#simple-msg").html("<img src='images/ajax-loader.gif'/>"); var postData = $(this).serializeArray(); var formURL = $(this). ...

Creating a form within a PHP script

After creating a form within a PHP file and using the post method to send a value to the next page, I encountered an issue where the variable was not being successfully passed on. What could be causing this problem? When looking at the code snippet provid ...

AngularJS causing issues with Materializecss dropdown menu operation

I'm currently working on a web application using Materializecss and AngularJS for the front-end. However, I've encountered an issue with the dropdown menu component of Materialize not functioning as expected. Here's an example of the dropdo ...

The Laravel status check button consistently displays a value of 0 and does not update in the database

Hello, I have encountered an issue with my adminController. Despite checking the status box, it is being saved as zero in the database. I am unable to understand why the if/else block is not functioning properly. Even when I use debug, I can see that the c ...

Elements styled as inline blocks with static dimensions, irregular in size

Is there a way to ensure that all three boxes are displayed at the same level? Currently, box 2 appears below box 1 and 3 due to having less content. I believe there must be some styling element missing to make each div display at an equal level regardless ...