Having trouble obtaining the complete width of an input field within Laravel?

I have been trying to integrate my bootstrap template into my Laravel project, but I am facing an issue with the input width. The input field in my column is not taking up the full width as intended. The only difference I can see is the form structure in my Laravel project. How can I resolve this problem?

https://i.sstatic.net/ZOFbx.png

Here is my working Bootstrap HTML:

<div class="row">
  <div class="col-lg-2"></div>
  <div class="col-lg-8">
    <div class="input-group">
      <input class="form-control" type="text" placeholder="Search for...">
      <span class="input-group-btn">
        <input class="btn btn-secondary" type="submit" value="Short Url">
      </span>
    </div>
  </div>
  <div class="col-lg-2"></div>
</div>

https://i.sstatic.net/2FhAr.png

And here is how my template looks in Laravel (where the input field doesn't have full width):

<div class="row">
  <div class="col-lg-2"></div>
  <div class="col-lg-8">
    <div class="input-group">
      <form class="navbar-form" accept-charset="UTF-8" action="http://localhost:8000" method="POST">
      <input type="hidden" value="C5RbH20lMX79fI8TuI4SkVKu6QPQEyw2QgSDGOQc" name="_token">
      <input class="form-control" type="text" value="Enter your address" name="url">
      <span class="input-group-btn">
      </form>
    </div>
  </div>
  <div class="col-lg-2"></div>
</div>

Answer №1

The <form> should be placed outside of the .input-group element.

HTML Code:

<div class="row">
    <div class="col-lg-2"></div>
    <div class="col-lg-8">
        <form class="navbar-form" accept-charset="UTF-8" action="http://example.com" method="POST">
            <div class="input-group">
                <input type="hidden" value="ABC123" name="_token">
                <input class="form-control" type="text" value="Enter your address" name="url"> <span class="input-group-btn">
                    <input class="btn btn-primary" type="submit" value="Submit">
                </span>
            </div>
        </form>
    </div>
    <div class="col-lg-2"></div>
</div>

Check out the demonstration here!

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

Looking for a Horizontal Layout?

@foreach (var item in APModel) { <div class="row row-cols-1 row-cols-md-2 g-4"> <div class="col"> <div class="card" style="width: 18rem;"> <img src="h ...

Creating a binary tree in vanilla JavaScript and styling it with HTML and CSS

I'm facing a challenge with my homework. I am required to convert my JavaScript binary tree into HTML and CSS, strictly using vanilla JavaScript without any HTML code. I have the tree structure and a recursive function that adds all the tree elements ...

How can I create a dynamic height for a scrollable div?

How can I build a section with a defined height that contains a sticky header (with a dynamic height) and a scrollable body? I want the body to be scrollable, but due to the header's changing height, I'm unable to set an exact height. What should ...

Press the button within the <span> element using Python Selenium

I am attempting to select the download button. Here is the HTML code for the button: <a class="x-btn toolbar-menu x-unselectable x-box-item x-toolbar-item x-btn-transparent-medium" style="padding: 0px 5px; right: auto; left: 1121px; margi ...

What is the process for eliminating the Gravatar link in Wordpress?

Is there a way to remove the gravatar link from WordPress admin while still keeping the profile picture intact? I'd like to know how to achieve this. ...

Guide on converting German to English with Laravel (Localization):

I have a website in German that I would like to translate into English using Laravel for localization. Each language will have its own specific links, so there is no need to determine the locale. Despite going through the documentation and numerous articl ...

flip it around - move up

Hey there, check out this snippet of HTML code I have: <style type="text/css"> .container{ width: 450; height: 400; border:1px solid; border-radius: 6px; background: #000; } .name{ border- ...

Remove the image by clicking on the "X" icon located on the top right corner of the image

One of my tasks involves deleting an image by clicking on the "X" mark located at the top right corner of the image. To achieve this, I referred to this CSS fiddle http://jsfiddle.net/yHNEv/. Sample HTML code: <div class="img-wrap"> <span ng-c ...

Achieving successful content loading through AJAX using the .load function

Our website features a layout where product listings are displayed on the left side, with the selected product appearing on the right side (all on the same page). Initially, when the page loads, the first product is shown on the right. Upon clicking a new ...

Having trouble rendering Next.JS dynamic pages using router.push()? Find out how to fix routing issues in your

The issue I am facing revolves around the visibility of the navbar component when using route.push(). It appears that the navbar is not showing up on the page, while the rest of the content including the footer is displayed. My goal is to navigate to a dy ...

How can I avoid selecting a sup tag in an xpath selector?

How can I successfully extract the text content from the following HTML tag, while bypassing the <sup> tag that is currently blocking my desired text retrieval? The specific text I need to extract is just (4:6, 6:7). Is there a method to retrieve th ...

Angular 5: Autosuggestion feature functions perfectly in Chrome, experiencing difficulties in Internet Explorer

I have integrated an autosuggestion feature using Angular 5, pulling suggestion values from an API. Here is the HTML Code : <div class="col col-lg-4"> <label for="insuranceCompanyName"> Insurance Company Name </label> ...

Is there a way to show the input value in a different form while still retaining the original value?

When receiving a pagination number from user input, I store it in a variable like so: $html .= "<input type='submit' name='next' value='$next_page_number' />"; Now, I'm looking to replace the displayed text for th ...

Upon clicking the initial radio button, the jQuery array contents are not immediately displayed

Here is the HTML code that I am working with: if(isset($_POST['itemid'])) { <table class="table table-striped table-condensed table-bordered table-rounded errorcattable"> <thead> <tr> <th colspan='4'> ...

Alter the color of the " / " breadcrumb bar

Is there a way to change the color of the slash " / " in breadcrumb trails? I have tried adding CSS styles, but it doesn't seem to work. <ol class="breadcrumb" style="font-size: 20px;"> <li class="breadcrumb-item&q ...

How can I address the issue of width:100% truncating the content and causing a horizontal scrollbar in HTML/CSS?

I've searched high and low for a solution to this issue but have come up empty-handed every time. It's possible I just didn't search hard enough, but everything I've attempted so far has failed to work. This problem has been plaguing me ...

Making a Django template recognize the load tag when inheriting from a base template involves ensuring proper syntax and file

My current setup involves a file called base.html. {% load static from staticfiles %} <html> <title>COOL| {% block title %} Sometitle {% endblock %}</title> <body> <!--- BEGIN INSERT CONTENT FOR OTHER PAGE HERE--> ...

PHP: Injecting CSS directly into the head tag instead of the body (Joomla plugin)

I've been using the AutsonSlideShow extension for Joomla 1.7 and it's been working well for me. However, one issue I have with the plugin is that it injects CSS directly into the body of the index.php file, which I would like to change for valida ...

A guide on retrieving <div> element in a WordPress function PHP file

How can I wrap a div around the output from this code snippet? add_filter( 'the_content', function( $content ) { if (is_singular('cda')) { return get_the_term_list( get_the_ID(), 'cda_cat', 'Product:' ).$con ...

What is the method for formatting within the <textarea> element?

While working on developing a comment system, I recently made the discovery that text areas cannot be formatted to retain paragraphs, line breaks, etc. This was particularly noticeable when comparing sites like StackOverflow, which uses a text editor inste ...