Position two glyphicon icons alongside an input field using Bootstrap

In order to fulfill a specific requirement, I need to position two glyphicons directly next to an input field. This means that the width of the input field should be reduced to accommodate the two icons. Unfortunately, the code below causes the glyphicons to appear on a separate line.


    <div class="row">
        <label>Managed Segment GOC</label>
        <div style="width:inherit;">
            <p>
                <input type="text" class="form-control" ng-model="formData.goc" placeholder="Look Up for Managed Segment">
                <span class="glyphicon glyphicon-arrow-up"></span>
                <span class="glyphicon glyphicon-arrow-down"></span>
            </p>
            <div class="text-right" >Clear</div>
        </div>

        <label>Default RLOB</label>
        <input type="text" class="form-control" ng-model="formData.rlob" placeholder="">
    </div>
htmltwitter-bootstrapcsstwitter-bootstrap-3

Answer №1

To properly format your textbox, it is recommended to place it within a different class called "col-md-*". Here's an example:

                                        
<div>
    <p>
        <div class="col-md-11">
            <input type="text" class="form-control" placeholder="Look Up for Managed Segment" >
        </div>
        <div class="col-md-1">
            <span class="glyphicon glyphicon-arrow-up"></span>
            <span class="glyphicon glyphicon-arrow-down"></span>
        </div>
    </p>
<div class="text-right" >Clear</div>
</div>

Answer №2

Maybe this can be helpful.

<div class="row">
    <div class='col-xs-10'>
        <input type='text' class="form-control">
    </div>
    <div class='col-xs-1'>
       <span class="glyphicon glyphicon-arrow-up"></span>
   </div>
   <div class='col-xs-1'>
       <span class="glyphicon glyphicon-arrow-down"></span>
   </div>
</div>

Answer №3

To enhance the layout, I made a small adjustment to your code snippet. Instead of using form-control in the first input tag, I replaced it with col-md-11 (you can choose any number). This modification allows the glyphicons to be positioned next to the input box seamlessly.

Here is the updated code:

<input type="text" class="col-md-11" ng-model="formData.goc" placeholder="Look Up for Managed Segment">
<span class="glyphicon glyphicon-arrow-up"></span>
<span class="glyphicon glyphicon-arrow-down"></span>
</p>
<div class="text-right">Clear</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

What is the process for choosing an image from a different directory?

In the main folder, I have two subfolders named Admin and Users. Currently, I am working on a file in the Users folder and need to display user details when they log in. The images are stored in the Admin folder. How do I call an image from the Admin folde ...

phphtml

Element that appears to be hidden

Looking to add a unique touch with a "chat bubble" design on my webpage. Below is the code I have so far, but I seem to be facing issues with getting the triangle shape to display. Any suggestions on what might be causing this problem? .playernamechat ...

htmlcsspseudo-element

Utilize Python (specifically with the Pillow library) to remove transparent backgrounds

When using the python module html2image to convert html to an image, I encountered an issue with fixed image size causing the html to break or get cut off, leaving a blank space. Is there a Python-based solution to fix this problem? (I am using chat export ...

pythonhtmlimagediscordpython-imaging-library

How come the array's length is not appearing on the browser screen?

Code: initialize: function() { this.todos = [ {id: 100, text: 'Rich'}, {id: 200, text: 'Dave'} ]; }, activeTodos: function() { this.todos = this.todos.length(function() { return this.todos; }); ...

javascripthtmlreactjsreturn

When submitting a blank form, radio buttons and check boxes are not included in the query string or post body

Here is the form that I am working with: <form method="post" action="getParameterValuesServlet"> <table border="1"> <tr> <td>User Name</td> <td><input type="text" name="userName"&g ...

htmlformsservletsform-submitfiddler

Blockage preventing text entry in a textarea

To enhance the basic formatting capabilities of a textarea, I implemented a solution where a div overlay with the same monospace font and position is used. This approach allows for displaying the text in the div with different colors and boldness. However ...

javascripthtmlcsstextarearichtextbox

External CSS styling does not appear to be affecting the Shadow DOM in Google Chrome

I am currently utilizing polymer's paper-action-dialog and paper-button components on my webpage. Within the paper-action-dialog element, there are two paper-buttons. I am looking to style these paper-buttons externally (in the main HTML file). I have ...

htmlcssgoogle-chromepolymershadow-dom

Trouble arises with CSS flexbox functionality when connecting to Bootstrap 4 CDN

I'm currently utilizing CSS flexbox to design the header of my webpage by using display:flex; However, I've noticed that when I include the Bootstrap 4 CDN link in my HTML, the flexbox no longer functions as intended and the different divs within ...

htmlcssbootstrap-4flexbox

Discover the position of a div relative to another div using ng-drag-drop

I'm currently working on a web application that allows users to create their own identity cards. For this project, I am incorporating the ng-drag-drop library from https://www.npmjs.com/package/ng-drag-drop. The main goal is to obtain the coordinate ...

javascripthtmlcssangulartypescript

Displaying dynamic text in Angular Material's spinner component

In addition to having a spinner component, I would like the ability to display customized text within the spinner based on different actions. For example, when performing a save action, the spinner should show: ...saving. Whereas for a search action, it sh ...

javascripthtmlangularangular-materialspinner

Vue.js: The v-for directive demonstrates distinct behavior with the utilization of template literals

What is the difference in behavior of v-for when using numbers versus template literals? Consider the following scenario: new Vue({ el: "#app", }) <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div i ...

javascripthtmlvue.jstemplate-literals

Insert additional div specifically after the fifth post using PHP within a Wordpress website

I've spent countless hours scouring the internet in search of a solution. The results are filled with people facing similar issues - they want a (div) to appear after a certain number of posts and repeat continually. My specific problem lies in needi ...

phphtmlwordpress

Tips for resizing an element's width without affecting its contents

Greetings (Baguette English speaker), I'm facing an issue where a certain element appears too large without any valid reason, and I'm seeking guidance on how to rectify it. Despite my attempts to adjust the width and padding, the problem persists ...

htmlcsswidth

Caution: Additional server attributes detected: style

Alert in my Next.js project, I encountered the following message: Notice: Server is sending additional attributes: style I am uncertain about the source of this warning and therefore unable to provide any code snippet. ...

javascripthtmlnext.jsjsx

Link not being properly contained within div element

Is there a way to ensure that the link stays contained within the div element and does not extend beyond it? It seems like the padding is causing an issue where the div considers the link to be as tall as the text. Any solutions or workarounds? Check out ...

htmlcss

Spin the div towards the location of the mouse

Is it possible to create a rotating effect on a div element based on the position of the mouse pointer? I envision the div displaying <- when the mouse is on the left side, and -> when the mouse moves to the right, regardless of direction. If anyon ...

jqueryhtmlcss

Attempting to showcase two lines within a single row on an html page

Currently, I am working on a project involving ASP MVC and Bootstrap where I need to display the regulation of a transformer in a specific format. This representation can be seen in the image below: https://i.sstatic.net/VzVcA.png My attempt to achieve t ...

htmlcsshtml-table

css background-size and image position not working

On my website, users/members can upload or link a custom image for the start page. This feature works well with modern browsers that support background-size in CSS. However, if the browser does not support css3 background-size, the image may not fill the e ...

htmlcss

Utilizing Jquery tabs for consistent height display

Currently, I am utilizing jquery tabs for showcasing various content. This is what my functions look like: $(function() { $( "#tabs" ).tabs(); }); I attempted to ensure all tabs have the same height by using this approach: var heightStyle = ...

javascriptjqueryhtmlcss

Inconsistent behavior with CSS Grid column widths in Firefox versus Chrome

As a beginner in CSS Grid, I recently encountered an issue where the layout differed between Firefox and Chrome. It seems like Firefox is adhering strictly to the grid width specifications set with "grid-template-columns", whereas Chrome is adjusting based ...

csscss-grid