"The CSS attributes for right and left alignment are malfunctioning when used in conjunction with the input-group component in

Recently, I encountered a dilemma with my search input using the input-group feature in Bootstrap 4. My intention was to position this element absolutely by utilizing the left and right attributes. However, I noticed that only one of these attributes would work at a time. Can anyone shed some light on why this is happening and offer potential solutions?

If you'd like to take a look, here is a link to the jsfiddle:

https://jsfiddle.net/Maged_Saeed/hse2kr4c/

Your insights are greatly appreciated.

htmlcsswebbootstrap-4css-position

Answer №1

CodePen

.search-box {
    position: fixed !important;
    left: 60px !important;
    bottom: 10px;
    width: calc(100% - 120px)
}

Include width: calc(100% - 120px) in your stylesheet. Alternatively, using right:60px also yields the desired effect. However, your .input-wrapper class specifies width:100%, which may interfere with the outcome.

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 method for ensuring that the delete functionality is displayed within the same row?

In my division, there are options for names and deletion. It is displayed on my website as: 1.jpg delete The HTML code for the division is: <div id="files1" class="files"> <b class='dataname' >1.jpg</b> <span cla ...

javascriptjqueryhtmlcss

Dompdf is outputting the HTML Bootstrap code as col-sm-x instead of col-lg-x

Currently, I am utilizing Dompdf in my PHP project to generate PDF reports. However, I have encountered an issue where the HTML bootstrap code does not render as expected on the PDF document. Specifically, when viewing the grid on a smaller device, it coll ...

htmltwitter-bootstrapdompdf

In both Chrome and Edge, the default value for the <select> tag is successfully set, however, this functionality is not working in

I have defined two values in the created method, 2018 and My Name, and assigned them to separate data properties. These data properties are then passed as v-bind to a component. The issue I am facing is that in Chrome and Edge, both values are set as defa ...

javascripthtmlvue.js

Is there a way to automatically transfer the ID from the first table to the id_position field in the second table upon clicking submit?

I'm dealing with two tables and I need to figure out how to add the id of the first table to the position_id field of the second table upon submitting. My request is done through ajax. The fields for the second table are dynamic, meaning you can keep ...

phphtmlajaxpdo

Learn how to easily toggle table column text visibility with a simple click

I have a working Angular 9 application where I've implemented a custom table to showcase the data. Upon clicking on a column, it triggers a custom modal dialog. The unique feature of my setup is that multiple dialog modals can be opened simultaneously ...

javascriptcssangulartypescript

I'm having trouble rendering the div using PHP code within an AJAX request in CodeIgniter

I am a beginner in AJAX and I'm attempting to display specific restaurant data based on the selected area from a dropdown using AJAX. However, I am facing issues with displaying the restaurant view correctly. Can someone please guide me on how to proc ...

phpjqueryhtmlajaxcodeigniter

What are the steps to restrict the scope of a <style> declaration in HTML?

Currently, I am in the process of creating a user interface for a webmail. Whenever I receive an email, I extract its content and place it within a <div> element for display purposes. However, one challenge that I am facing is that each email contain ...

javascripthtmlcssstylesheet

Guide on implementing ng-bootstrap in AngularJS 2 (utilizing angular-cli version 1b15)

I've been attempting to incorporate ng-bootstrap into my Angular 2 project by following the guidelines provided on the official ng-bootstrap website. Here's what I have done so far: npm install <a href="/cdn-cgi/l/email-protection" class="_ ...

angularbootstrap-4ng-bootstrap

The bootstrap table did not meet my expectations as I had hoped

I am currently using Bootstrap to create a basic two-column table similar to the one on the Bootstrap website here: http://getbootstrap.com/css/#tables. To achieve this, I have implemented a javascript function to display the table as shown below: $(&bso ...

javascripthtmlcsstwitter-bootstrap

CSS: Adding decorative trailing dots below the header when positioned over a background

I am seeking assistance with achieving a specific effect in CSS, as shown in the attached screenshot. The trailing dots should cover the entire width of the element (100%) and be responsive. However, I encountered an issue when placing the header on a bac ...

htmlcsspseudo-class

Incorporate a progress bar and delete functionality for uploading files in PHP

I am currently working on creating a file uploader that includes a progress bar and a close button. However, I have encountered some major issues with the code. The progress bar continues to show endlessly, and the main problem is that it deletes the file ...

phphtml

Switching Text Box Content When Hovering Over a Static Element: A Fail-proof Method

Even though I followed the solution from another source, the Description I set still refuses to show up in the text box. I have already attempted this: How To Change Text Box Content On Hover I meticulously checked every class name and every bracket in th ...

htmlcsshover

Unlocking the Power of Transition: Effortlessly Submitting a Form Post

After the modal finishes fading out, I want my form to be submitted and sent to the email file "refreshform.php". However, currently after the modal fades out, the form does not submit or post anything to the PHP file for sending the email. It simply fades ...

javascriptphpjqueryhtmlcss

Having trouble changing the chosen selection in the material UI dropdown menu

I've encountered an issue with my material ui code for a select dropdown. It seems that the selected option is not updating properly within the dropdown. <FormControl variant="outlined" className={classes.formControl}> <InputLabel ref={ ...

javascripthtmlreactjsdrop-down-menumaterial-ui

do not display entries with expired duration

update1: Unfortunately, even after testing in the sandbox, the result is still returning empty :( https://codesandbox.io/s/happy-https-u8lu2 After filtering my starsValues based on height and weight, I am able to get some results. However, I also n ...

javascripthtmlarraysreactjsredux

Processing PHP forms with dynamic form inputs

Have a form with the capability to add multiple input fields for ordering pictures by picture number. A customer could potentially order anywhere from 1 to 100 pictures. How should I handle this in PHP? Creating up to 100 $_POST[] variables for each poss ...

phphtmlformswebforms

Is there a glitch in my CSS code or am I simply misunderstanding how to center a div?

After doing some research, I noticed that all the tutorials I came across recommended following the same steps. However, when I implemented the code below: .center{ width: 50%; margin: 0px auto; } It centered all six items but didn't align them in 3 ...

htmlcsstwitter-bootstrap

Which JSF element is capable of displaying a <div> element?

For example, h:inputText will display an "input type='text'". Which JSF tag is used to render a "div" element? ...

jsfhtml

Utilizing React in conjunction with i18next and incorporating the HTML attribute lang

My website is built using React and i18next, with support for multiple languages. I am trying to change the 'lang' attribute in my HTML page. How can I achieve this? Even though I am using the i18next-browser-languagedetector, the lang attribut ...

htmlreactjsattributesi18nextlang

Adaptable background image - smoothly resize/reposition

Is there a way to smoothly resize my background image instead of it jumping abruptly? Currently, when using media queries, the background image goes from 900px to 300px in height instantly at a certain point. How can I make this transition more gradual? ...

htmlcss