Adjust the search box dimensions in the navbar back to its initial size

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

<form class="navbar-form navbar-left navbar-input-group" role="search" name="basicSearch" id="basicSearch">
  <div class="form-group">
    <div class="input-group" style="">
      <input type="text" id="users" class="form-control" placeholder="Search Customer ...">
      <span style="" class="input-group-btn">
     <button class="btn btn-default" type="button">Go!</button>
     </span>
    </div>
  </div>
</form>

However, the current size of the search box appears to be like this https://i.sstatic.net/3BBJJ.png

Is there a way to revert the navbox input size back to its original default?

htmlcsstwitter-bootstrap

Answer №1

insert the code snippet below into your website 

$width=document.getElementById("nav3").offsetWidth;

$("#navBarSearchForm input[type=text]").width($width/2);

this will adjust the size of your search field.

Answer №2

Adjust the width of your input box to be set as initial and position the button on the left side, allowing it to appear next to the input box.

#users{
  width:initial;  
}

span{
  float:left;  
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<form class="navbar-form navbar-left navbar-input-group" role="search" name="basicSearch" id="basicSearch">
 <div class="form-group">
 <div class="input-group" style="">
 <input type="text" id="users" class="form-control" placeholder="Search Customer ...">
 <span style=""class="input-group-btn">
 <button class="btn btn-default" type="button">Go!</button>
 </span>                            
  </div>
 </div> 
</form>

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

Make sure to enable contentEditable so that a <br> tag is inserted

When using a contentEditable, it automatically wraps words to create a new line once the width of the editable area is reached. While this feature is useful, I am facing an issue when parsing the content afterwards as I need it to insert a <br> tag ...

javascripthtmlcontenteditable

Retrieve and showcase data stored in a SQL Server database on a browser using ASP.NET

I have a challenge with displaying blog content stored in my database, which includes raw HTML tags and image tags. My approach of using HTML Encode before inserting data into the database and then Decode while retrieving it has not produced the desired ou ...

c#asp.netsql-serverhtml

The behavior of Datatables varies depending on the screen resolution

In my data table, there are numerous entries with child tables on each row of the main table. I am currently in the process of incorporating this type of functionality into my table, with a few modifications to create a table within the child row. You can ...

javascriptcssasp.net-mvcresponsive-designdatatables

Executing PHP function from another PHP file

Recently delving into functional programming in PHP, I'm scratching my head trying to figure out why this code isn't functioning properly. I have a separate file named 'functions.php' where I'm attempting to call a function from th ...

phphtmlmysqlfunction

Troubleshooting problem with displaying background images on iPad and iPhone devices

A recent project involved building a website for a new client, but there seems to be an issue with the background rendering on his iPad and iPhone. The image is displaying incorrectly, showing only a small portion from the top right corner rather than the ...

cssiphoneipadbackground-imagerender

Steps for installing two different versions of Bootstrap using npm are as follows:

In my project, I want to incorporate both Bootstrap 3.3.7 and Bootstrap 4.0.0. However, I have attempted to declare them in my package.json file as follows but it's unsuccessful: "dependencies": { "bootstrap": "^3.3.7, ^4.0.0" } I also tried the al ...

twitter-bootstrapnpmpackageinstallation

Instructions on utilizing *ngFor for every category I have

Seeking assistance with a specific issue. I currently have four labeled tabs, each containing projects. My goal is to ensure that when I save a project, it remains in the same tab where I initiated the save operation, rather than appearing across all tabs. ...

htmlcssangulartypescript

WP Highlighted Image

I'm facing a small issue where the featured image on my posts is not displaying in the desired size. I want the featured image to match the total width of the post, but it keeps showing up in its original size. I'm clueless about how to fix this ...

phphtmlcsswordpress

To set the left position of the div to 0px, click outside of

I recently used this code to have a div move from left to right on the screen. Now, my goal is to make the div snap to the leftmost position with a smooth animation whenever someone clicks outside of it. For a live demonstration, visit: $('.top-tit ...

jquerycss

Design a grid-like layout using flexbox styling

I am looking to design a form using a table-like structure similar to what we typically do with HTML. The image below shows the basic layout I am aiming for: https://i.sstatic.net/H6b3f.png. Can anyone provide guidance on how to code this type of structu ...

htmlapache-flex

Unable to access a PHP file within a JavaScript loop

In my HTML document, there is a button with an onclick method inside a JavaScript <script> tag. When this button is clicked, it triggers the deleteRow function, which is responsible for removing a row from a table on the page. Within the deleteRow f ...

javascriptphphtmlajax

Vue - Triggering @change event for file input element when files are set programmatically using ref instead of drag and drop upload

My setup includes a file input for drag and drop image uploads. <input type="file" ref="FileInput" style="display: none;" @change="onFileSelect" accept=". ...

javascripthtmlvue.jsfile-uploaddrag-and-drop

Is it possible to save the current state of an execution in JavaScript and pick up where you left off

Is there a way to accomplish this task? I am interested in developing a JavaScript application that has the ability to "pause" and then "resume" execution from a specific point, similar to a checkpoint system. For example: //code.js var abc = 13; checkpoi ...

javascripthtmlexecutioncheckpoint

Modify the Color of Chosen Anchors for Site Categories WITHOUT Using JavaScript

Is there a way to change the color of section anchors in a fixed header when selected without using JavaScript? I'm looking for a CSS-only solution that will change the color of the selected anchor and revert it back to normal when another anchor is c ...

htmlcssanchorsections

Positioning of Ajax modal popups on smaller screens

In my Asp.net/C# web application, I have a modal popup that contains multiple placeholders. However, I am facing an issue when trying to access the modal popup on smaller screens like iPads or iPhones. The page only displays half of the modal popup, maki ...

asp.netcssajax

Tips for concealing a button post-click

Just updated my code, please take a look! I have created a button using HTML, CSS, and JavaScript and I am trying to figure out how to hide it once it's clicked. Below is the HTML for the button that should play music when clicked: <audio id="my ...

javascripthtmlcss

Tips for adjusting the width of tab labels in Java while maintaining the "selection" choices

In my program, I have a JTabbedPane object where I customized the background colors of tabs when selected or not by overriding the getForegroundAt and getBackgroundAt methods. Now, I am trying to adjust the width and height of the tabs. Making use of cod ...

javahtmlswingjtabbedpane

Achieving Centered Items with CSS Flexbox and Positioning

Struggling to arrange 3 elements using flexbox while keeping them centered both horizontally and vertically. Here is the desired layout: https://i.sstatic.net/Uo6WS.png This is my current attempt, but it's not working as expected. Can anyone spot t ...

htmlcssflexboxflexboxgrid

Incorporating text into the border without increasing the spacing

I managed to create a unique CSS shape using clip paths as the border of a div. However, I am now facing an issue where I cannot add text to this border without it getting cut off due to the way the shape was created (possibly because of overflow: hidden). ...

htmlcss

Expanding Vue Tabs with Bootstrap: Manipulating tab-content to perfectly fill parent height

On my webpage, I have implemented a tabs component called b-tabs. This component is enclosed within a parent div with a specific height. I am trying to make the content of the tabs take up the full remaining height of the parent component. https://i.ssta ...

cssvue.jsbootstrap-4bootstrap-vue