Styling Django's buttons and search bars to appear inline using CSS

In my Django template, I have the following HTML code:

<div id = "search_form">
        <form action="" method="get" id = "search-form">
            {% csrf_token %}
            {{ form.as_p }}
            {{ form.media }}
        </form>
        <button class="btn btn-primary" id="search_submit" name = "search_submit" type="submit" value = "submit" ><span class="glyphicon glyphicon-search"></span></button>
</div>

How can I align the search bar and button horizontally? The current CSS adjustment is not working as expected:

#search_submit {
    display: inline;
}

Answer №1

If you're implementing bootstrap, here's a suggestion (remember, the button must be enclosed within the form tags):

<div id = "search_form">
  <form action="" method="get" id = "search-form">
   {% csrf_token %}

    <div class="col-xs-6">
     {{ form.as_p }}
     {{ form.media }}
   </div>
   <div class="col-xs-6">
      <button class="btn btn-primary" id="search_submit" name = "search_submit" type="submit" value = "submit" ><span class="glyphicon glyphicon-search"></span></button>
    </div>
  </form>
</div>

Answer №2

Here is the successful solution:

<div id = "search_form">
    <div class="input-group">
        <form action="" method="get" id = "search-form">
            {% csrf_token %}

            <div class="col-xs-6">
                {{ form.as_p }}
                {{ form.media }}
            </div>
            <div class="col-xs-6">
                <span class="input-group-btn">
                    <button class="btn btn-primary" id="search_submit" name = "search_submit" type="submit" value = "submit" ><span class="glyphicon glyphicon-search"></span></button>
                </span>
            </div>
        </form>
    </div>
</div>

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

Combining Django, Graphene, Apollo, django-webpack-loader, and Vue: Struggling with CORS and CSRF compatibility issues?

Currently, I am immersed in a project that involves Django as the backend, Vue as the frontend, and Apollo/Graphene/GraphQL as the data transfer layer. While most of it is functioning smoothly, I am encountering difficulties with the CORS/CSRF settings. I ...

Guide to displaying a pop-up window message once the crossword puzzle is successfully solved using JavaScript

I have made some changes to this puzzle according to my preference, but I would like to display a message upon completing the crossword. Is there a way to accomplish this? Any helpful suggestions are greatly appreciated. Here is the GitHub link for refere ...

Is it possible to send multiple HTML input values to a Google Spreadsheet using only JavaScript?

Seeking a faster and more efficient way to send the values of multiple HTML Inputs to a specific location in a Google Spreadsheet? The existing script takes too long to complete, often skips inputs, and relies heavily on "google.script.run". Due to softwar ...

Fixing an image using parallax effect in jQuery

I have encountered a parallax effect issue while working on this site with pictures. The problem is that the pictures are getting clipped, and I need to figure out how to fix this issue. When I scroll down to a certain length, it cuts off the pictures and ...

Create a PDF document with a custom header and footer by converting an HTML template using itext7

I attempted to utilize the following HTML template in an effort to convert it to a PDF using iText7, however, I am facing an issue where both the header and footer are not aligning to their designated positions. You can view the example I used here. I am s ...

Minimizing the gap between icon and label text

I have a React form that I need help with. The issue is that I want to reduce the space between the list icon and the label. Here is the CSS I am using: .form__container { display: flex; flex-wrap: wrap; } .form__container input { color: rgb(115, 0, ...

Issue with PHP page not properly connecting to the recently updated CSS file

Yesterday, I successfully linked my CSS in the head tag right below the title tag using this code: <link href="css/main.css" rel="stylesheet"> Yesterday, everything was working fine with the styles. However, today when I try to add new styles, the ...

Adaptive video player for complete YouTube experience

Is there a way to incorporate a YouTube video as the background of a div, similar to how it is done on this site, using a <video> tag and ensuring that the video "covers" the entire div without any empty spaces while maintaining its original ratio? ...

Step-by-step guide to accessing a PDF file stored locally using Angular2 and HTML5

I am attempting to access a .pdf file in local storage using an iFrame. Here is the code I have tried: In HTML file <object [data]="sanitizer.bypassSecurityTrustResourceUrl(selectedItem.FilePath)" type="application/pdf"> <iframe [src]="sanitizer ...

"Exploring the features of HTML5: Adjusting audio playback speed and tracking

With an HTML 5 audio tag, I have calculated the start and end times of each word. As the audio plays, I track the current time and compare it to the start and end times of each word to highlight any matching words. Everything is working well so far. Now, ...

Extract data from the HTML element on an iPhone device

Currently, I am loading HTML contents into a list in the UILabel. I have successfully managed to remove the tags and append the contents together. However, there are specific instances where the content includes Is it y=2 or x>2,y<1 Hello x = 2,Wor ...

How to update an array in Angular using ngModel and ngFor

I am attempting to display an array's values on a form and then allow for updating those same values in the array (using name="todos{{i}}" within the <input> tag does not work as it turns it into a string instead of an array). The curr ...

Leveraging Global SCSS Variables in Next.JS with SASS

In my Next.js Application, I have a global CSS file named main.scss imported in the pages/_app.js file. _app.js import '../global-styles/main.scss' export default function MyApp({ Component, pageProps }) { return <Component {...pageProps} ...

Positioning a div on the right side of its parent div

Hi there! I'm currently working on a small navbar that has two sections: the left section with an arrow icon and the right section with two icons - an envelope and an exclamation triangle. I've been trying to position the right section in the top ...

Encountering an undefined error while attempting to retrieve an object from an array by index in Angular

Once the page is loaded, it retrieves data on countries from my rest api. When a user selects a country, it then loads the corresponding cities for that country. Everything is functioning properly up to this point, however, upon opening the page, the city ...

What is causing the npm element to malfunction?

I'm having trouble with the vertical timeline component from an npm package. It seems to be breaking, as you can see in the picture. Additionally, I haven't been able to figure out how to change the color of the vertical line despite reading thro ...

Is it suitable to utilize the django admin panel for everyday users?

In the process of developing a learning application, I am considering incorporating three main user roles: Admin, Teacher, and Student. Would it be advisable to utilize the django admin panel specifically for teachers? The panel offers a plethora of feat ...

Retrieve all div elements by their data attribute until reaching a certain condition

I am working on an innovative jquery accordion menu using divs instead of the typical li tags. Each div contains a unique data attribute (data-level) with values ranging from 1 to 4, and so on... To achieve the desired functionality, my "toggle" function ...

What steps are needed to enable the keyboard on a Otree application for mobile devices?

I previously utilized an Implicit Association Task (IAT) in an experiment conducted on computers. However, I now need to adapt this IAT for use on tablets or mobile devices. Here is how the IAT appears on a cellular device: https://i.stack.imgur.com/kNwo ...

What is the best way to stack two pull-right elements on top of each other within the Bootstrap grid system?

I have set up a bootstrap grid system on my webpage and I am trying to align two elements to the right, one below the other. Currently, this is how it appears: https://i.sstatic.net/UcpAJ.png When I try to align the "Active" and "Primary" buttons undernea ...