Is there a way to position the button on the right side rather than the center using a negative right Y value?

I'm looking for something that:

Has a button on the right side, not just beside the input.

The current setup involves using an unattractive width: 138%, which doesn't consistently work across different browsers and devices. The button ends up at the bottom instead of in the desired location.

Directly placing the button on the right side box is problematic as it never aligns correctly vertically. Any alternative ways I've tried make the button non-functional.

I am utilizing bootstrap 5 and would prefer to avoid using JavaScript (as in this example, I haven't included any JS).

.full-width {
   width: 100%;
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2e4c41415a5d5a5c4f5e6e1b001d001e034f425e464f1c">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-aFq/bzH65dt+w6FI2ooMVUpc+21e0SRygnTpmBvdBgSdnuTN7QbdgL+OapgHtvPp" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4a2825253e393e382b3a0a7f6479647a672b263a222b78">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-qKXV1j0HvMUeCBQ+QVp7JcfGl760yU08IQ+GpUo5hlbpg51QRiuqHAJz8+BrxE/N" crossorigin="anonymous"></script>

<div class="row">
  <div class="col-3">
    Left part
  </div>
  <div class="col-6">
    <label>Input 1</label>
    <input type="text" class="form-control full-width">
    <label>Input 2</label>
    <input type="text" class="form-control full-width">
    <label>Input 3</label>
    <input type="text" class="form-control full-width">
    <div class="row" style="width: 138%;">
        <div class="col-9">
            <label for="sim">Special input</label>
            <input class="full-width form-control" type="text" name="sim">
        </div>
        <div class="col-3">
            <button type="button" class="btn btn-danger my-4">One button</button>
        </div>
    </div>
  </div>
  <div class="col-3">
    Right part
  </div>
</div>

Is there a way to resolve this issue?

htmlcssbootstrap-5

Answer №1

Important Note:

The solution provided here is not a one-size-fits-all approach and will vary depending on the specific requirements for your webpage. However, I will delve into why your initial solution may have failed and highlight key considerations to keep in mind.

If your intention is to position the button to the right of the entire form, it should be placed outside of the form structure within the 'Right part' div. By structuring it this way, you can avoid the need for manipulating widths such as using '106%' and eliminate the necessity for overflow adjustments.

Once you have relocated the button accordingly, the best approach may differ based on personal preference and the context of your design:

.full-width {
  width: 100%;
}

.right-part {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-aFq/bzH65dt+w6FI2ooMVUpc+21e0SRygnTpmBvdBgSdnuTN7QbdgL+OapgHtvPp" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-qKXV1j0HvMUeCBQ+QVp7JcfGl760yU08IQ+GpUo5hlbpg51QRiuqHAJz8+BrxE/N" crossorigin="anonymous"></script> <div class="row"> <div class="col-3"> Left part </div> <div class="col-6"> <label>Input 1</label> <input type="text" class="form-control full-width"> <label>Input 2</label> <input type="text" class="form-control full-width"> <label>Input 3</label> <input type="text" class="form-control full-width"> <label for="sim">Special input</label> <input class="full-width form-control" type="text" name="sim"> </div> <div class="col-3 right-part"> <span> Right part </span> <div> <button type="button" class="oneButton btn btn-danger">One button</button> </div> </div> </div>

In this example, 'justify-content: space-between;' was used as it offered a straightforward solution, but note that this method may not work if there are additional elements following the button within the same parent container.

This setup will function effectively if:

  1. Your parent container matches the height of neighboring columns.
  2. There are multiple elements within the parent container (otherwise consider 'justify-content: end;').
  3. The button resides as the final item within that particular section.

For scenarios where these conditions are not met, exploring alternative strategies is recommended. In general, aim to steer clear of specifying dimensions in percentages (%) or pixels (px) when leveraging Bootstrap's grid system alongside CSS flexbox capabilities whenever feasible.

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

CSS margin dispute

I'm facing an issue with two CSS classes - container and top_menu. The top_menu should not have a margin on top when used within the container class, but it somehow does. Removing the container div resolves this. How can I resolve this problem? Below ...

htmlcssmargin

Ways to adjust the size of the parent element based on the height of a specific element

I am faced with a situation where I need to identify all elements belonging to a specific class and adjust the padding-bottom of their parent div based on the height of the matched element. For example, consider the following structure: <div class=&ap ...

javascriptjquerycss

What is the best way to create a seamless change from a black to white invert filter?

I'm currently working on a project where I need to change my icons from black to white. After some research, I found that the best way to do this is by using filter: invert(100%). However, when I try to transition it, the change happens abruptly after ...

htmlcss

Guide on creating an autonomous select-all checkbox to show table columns

How can I create checkboxes with a "Select all" option and the following functionality: Check one or more checkboxes to show specific table columns. Uncheck them to hide the columns (toggle). Select the "Select all" checkbox to display all table columns. ...

javascriptjqueryhtmlcheckboxhtml-table

Failure to correctly apply CSS to Angular custom components causes styling issues

I have been working with a custom component and I have incorporated several instances of it within the parent markup. When I apply styles directly within the custom component, everything works as intended. However, when I try to set styles in the parent co ...

htmlcssangularasp.net-core-2.2

Warning from Cytoscape.js: "The use of `label` for setting the width of a node is no longer supported. Please update your style settings for the node width." This message appears when attempting to create

I'm currently utilizing Cytoscape.js for rendering a dagre layout graph. When it comes to styling the node, I am using the property width: label in the code snippet below: const cy = cytoscape({ container: document.getElementById('cyGraph&apo ...

javascriptcsstypescriptcytoscape.js

Error encountered in jQueryUI Autocomplete: the function 'this.source' is not defined

I have been working on incorporating a live search feature that scans through keys in a JSON obtained from a public API. To achieve this, I am utilizing Jquery UI. However, I encountered the following error and I am uncertain about how to resolve it. Un ...

javascriptjqueryhtml

Passing references using a personalized component

So, I've encountered this issue with my code: import MuiDialog from "@mui/material/Dialog"; import { styled } from "@mui/material/styles"; const TheDialog = styled((DialogProps) => ( <MuiDialog {...DialogProps} /> ))(( ...

javascripthtmlreactjsmaterial-ui

Static checks do not apply to CSS variables

Our webtech class assignment is to create a static webpage that meets the criteria of the jigsaw w3c css validator. We've encountered a roadblock while trying to resolve the final warning message: Due to their dynamic nature, CSS variables are curre ...

css

Angular causing alignment issues for items not centered

I'm having trouble centering the contents of a div with my code. The properties I am applying don't seem to work. Any idea why this is happening? <div class='center'> <form (ngSubmit)="loginUser()" style="background: steel ...

cssangular

Error in Express application due to uncaught SyntaxError

I am attempting to live stream data using websockets to Chartjs, however I keep encountering the following error. main.js:1 Uncaught SyntaxError: Unexpected token <https://i.sstatic.net/9OCI1.png https://i.sstatic.net/bmGeW.gif What could be causi ...

javascripthtmlnode.jsexpresschart.js

Ways to customize bullet points?

Is there a way to customize the bullet points in HTML? All my bullet points are displaying as stars instead of the standard black circle for the main bullets and a hollow circle for the sub-bullets. I attempted to set the style using list-style-type:disc ...

htmlvbaoutlook

Arrange two div elements side by side so they remain adjacent even when you adjust the browser size

After years of success with my floated left and right divs, I am now facing a challenge with responsive design. No longer able to rely on fixed widths, I find that when the screen size decreases, the right div moves below the left one. I know that using f ...

htmlcssresponsive-design

The issue of multiple useEffect renders is triggered by the draggable columns feature in a ReactJs Antd table

I have implemented a table in ReactJs using antd. In order to make the columns draggable, I added an eventListener to th tags. I used useRef to access all the th tags: const [cols, setCols] = useState(columns); // -> columns is a static array of objects ...

javascripthtmlreactjsdrag-and-dropantd

Having trouble pinpointing the issue with this particular if statement?

I am currently working on creating a form that compiles all entered data when the user fills out all fields. The form is connected to a PHP file and functions properly, but I encountered issues when implementing validation logic. The "Validation" section ...

javascriptphphtmlformsif-statement

alter the color of the accordion display

Good day everyone, I am seeking help with a Bootstrap query. Here is the HTML code I am working on <!DOCTYPE html> <html lang="nl-NL"> <body> <div class="container-md"> <br> <div c ...

htmlcssbootstrap-5

How can I move a child element off-center within a parent div in CSS without affecting the position of the other child

Below is an example of code that demonstrates what I'm trying to accomplish: <nav className="flex flex-row justify-between items-center w-full h-[100px]"> <div className="flex flex-row items-center sm:pl-0 ml-auto"> ...

htmlcssnext.jstailwind-css

No response observed upon clicking on the li element within the personalized context menu

I created a custom context menu that pops up when you click on an li element within an unordered list. I'm trying to trigger an alert when clicking on an li item inside the context menu, but it's not working as expected. To handle this dynamic c ...

javascriptjquerycsstampermonkey

Chrome causes Bootstrap to add an additional pixel

I am currently utilizing bootstrap to design a webpage. I have divided the body into two segments: content and header. Within the content block, there is a div with the class .container .sameTable, inside of which resides another div with the classes .row ...

htmlcsstwitter-bootstrap

Tips for assigning a class to a div based on the route in Angular

In my angular template, I have a basic ng-repeat with some div elements. Now, I am looking to add a class to a specific div if the $routeParams.userId matches the id of the object in the loop. You can refer to the second line of code below for clarificatio ...

javascripthtmlcssangularjstemplates