Tips for placing a background color *behind* a bootstrap button

When a button is clicked, I want to display an input with a background surrounding both the button and the input. Currently, my markup renders like this:

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

So when the button is clicked, I need a yellow (alert-warning) background around both the Reason button and the input. My markup currently looks like this:

div.saveReason {
    display: inline;
    background-color: #fff3cd;
    border: solid 1px #ffeeba;
    border-bottom-width: 0;
    padding-bottom: 20px;
    z-index: 1;
}
div.saveReasonDetail {
    z-index: 0;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div>
    <a class="btn btn-primary mr-2 SaveEdits">Save</a>
    <div class="saveReason"><a href="#" class="btn btn-secondary mr-2 SaveReason">Reason</a></div>
    <a class="btn btn-link CancelEdits">Cancel</a>
    <div class="alert alert-warning mt-2 saveReasonDetail">
        <div class="form-group viReason">
            <div class="validator-container">
                <textarea name="iReason" rows="4" id="iReason" class="form-control iReason"></textarea>
            </div>
        </div>
    </div>
</div>

The issues I'm encountering are:

1) I don't want the border underneath the button; I want the border only on the outside of the yellow background.

2) I want the yellow background to extend slightly beyond the reason button without affecting margins between other buttons.

Is it possible to achieve this?

Update: Kareem Dabbeet and Chase Ingebritson provided answers. Initially marked Kareem's answer as correct, but considering I'm not an HTML expert, Chase's comment about using a 'same container' seems important too. Do review his response as well.

htmlcssbootstrap-4

Answer №1

To address the initial inquiry:

Simply adjust the position of div.saveReasonDetail to be inherit: 

div.saveReasonDetail {
    position: inherit;
}

Next, modify the border-bottom color for the saveReason element to match the 'saveReasonDetail' background color: 

border-bottom-color: #FFF3CD

Now, moving onto the second question regarding creating space between buttons, change the margin-right value on the save button to achieve a smaller gap and apply consistent padding left/right for the reason button as shown below: 

.SaveEdits { 
      margin-right: 0 !important;
}

div.saveReason { 
        padding-left: 0.25rem;
        padding-right: 0.25rem;
        padding-top: 10px;
}

I have highlighted the "cancel" link for accurate margin verification

The final styling outcome is outlined below:

div.main { 
    padding-top: 20px; 
}
div.saveReason {
    display: inline;
    background-color: #fff3cd;
    border: solid 1px #ffeeba;
    border-bottom-color: #fff3cd;
    padding-bottom: 20px;
    padding-top: 10px;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
    z-index: 1;
}
div.saveReasonDetail {
   position: inherit;
}

.SaveEdits { 
margin-right: 0 !important
}
.CancelEdits { 
background-color: purple !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="main">
    <a class="btn btn-primary mr-1 SaveEdits">Save</a>
    <div class="saveReason"><a href="#" class="btn btn-secondary SaveReason"">Reason</a></div>
    <a class="btn btn-link ml-1 CancelEdits">Cancel</a>
    <div class="alert alert-warning mt-2 saveReasonDetail">
        <div class="form-group viReason">
            <div class="validator-container">
                <textarea name="iReason" rows="4" id="iReason" class="form-control iReason"></textarea>
            </div>
        </div>
    </div>
</div>

Answer №2

To ensure proper alignment, it is advisable to place both the button element and the textfield element within the same container. By doing so, you can designate the textfield's position as absolute without impacting the position of other buttons.

div.main { padding-top: 20px; }
div.saveReason {
  background-color: #fff3cd;
  border: solid 1px #ffeeba;
  border-bottom-width: 0;
  z-index: 1;
  
  display: inline-block;
  padding: 10px;
}

.saveReason > .btn {
  margin-right: 0 !important;
}

div.saveReasonDetail {
  z-index: -1;
  
  position: absolute;
  width: 100%;
  left: 0;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="main">
  <a class="btn btn-primary mr-2 SaveEdits">Save</a>
  <div class="saveReason">
    <a href="#" class="btn btn-secondary mr-2 SaveReason">Reason</a>
    <div class="alert alert-warning mt-2 saveReasonDetail">
      <div class="form-group viReason">
        <div class="validator-container">
          <textarea name="iReason " rows="4 " id="iReason" class="form-control iReason"></textarea>
        </div>
      </div>
    </div>
    
  </div>
  <a class="btn btn-link CancelEdits">Cancel</a>
</div>

Answer №3

Your answer is right here

div.main { 
    padding-top: 20px; 
}
div.saveReason {
    display: inline;
    background-color: #fff3cd;
    border: solid 1px #ffeeba;
    border-bottom-color: #fff3cd;
    padding-bottom: 20px;
    padding-top: 6px;
    z-index: 1;
}
div.saveReasonDetail {
   position: inherit;
}

.SaveEdits { 
margin-right: 0 !important
}
.CancelEdits { 
background-color: purple !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="main">
    <a class="btn btn-primary mr-1 SaveEdits">Save</a>
    <div class="saveReason"><a href="#" class="btn btn-secondary SaveReason"">Reason</a></div>
    <a class="btn btn-link ml-1 CancelEdits">Cancel</a>
    <div class="alert alert-warning mt-2 saveReasonDetail">
        <div class="form-group viReason">
            <div class="validator-container">
                <textarea name="iReason" rows="4" id="iReason" class="form-control iReason"></textarea>
            </div>
        </div>
    </div>
</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

Issue with ThreeJs: Difficulty loading separate images on top and bottom surfaces

I've been trying to place different textures on the top and bottom sides using Threejs to display unique images on each side. However, I'm encountering an issue where the same image is being displayed on both the top and bottom sides. Below is th ...

javascripthtmlthree.jsimage-rendering

Unable to insert HTML code into a div upon clicking an image button

I am in the process of developing a website dedicated to radio streams, and I was advised to utilize Jquery and AJAX for loading HTML files into a div upon button click. This way, users wouldn't have to load an entirely new page for each radio stream. ...

javascriptjqueryhtmlcssajax

Unexpected results from the match() function

Attempting to utilize the RegExp feature in Javascript (specifically with the match function) to locate instances of a sentence and a specific word within that sentence embedded in the HTML body. Provided is some pseudo-code for reference: <!DOCTYPE ...

javascripthtmlregexmatch

Determining the Location of a Drag and Drop Item

I have been utilizing the code found at for implementing Drag & Drop functionality. My inquiry is: How can I retrieve the exact position (x,y) of a group once it has been dragged and dropped? ...

javascripthtmlcanvasdrag-and-dropkineticjs

"Looking to swap out the Angular theme's CSS stylesheet for your entire application? Here's

I was initially facing an issue while trying to import CSS through index.html as I kept getting a MIME type error: enter image description here The browser refused to apply the stylesheet from 'http://localhost:4200/css/pink-bluegrey.css' because ...

cssangulartheming

Revealing non-div elements with the CSS hover attribute

I'm looking for a way to utilize the CSS hover property on individual elements within a div in order to affect specific span elements. For example, hovering over "something1" should reveal "text1" and so forth. Is there a way to achieve this without ...

htmlcsshovercss-selectors

Creating expandable card components with React and CSS using accordion functionality

I am currently working on creating a card that will expand its blue footer when the "view details" link is clicked to show lorem text. However, I am encountering an issue where the blue bottom of the card does not expand along with the lorem text. You can ...

javascriptcssreactjsstyled-components

Select the fourth element in a list using CSS

Is it possible to style the fourth child differently using the ">" selector like so: .thisclass > ul > li > ul > li { color: blue; } I am working with WordPress and trying to avoid creating additional CSS classes. Is there a way to apply s ...

htmlwordpresscss

Learn how to assign an image to a div element when it is collapsed, and then reveal the content when clicked on to expand

I am working on a three div with expand collapse functionality. When I expand one div, I want to set some image to the other divs. And when I go back to normal mode, I need the original content that was inside each div. $("a.expansion-btn").click(functi ...

javascriptjqueryhtmlcssangularjs

What is the best way to make my background image adapt to different screen sizes

I am currently working on updating my webpage and facing a few challenges that I would appreciate some assistance with: One issue is that the images on my page do not adjust to the size of the browser window. As a result, when I resize the window, the i ...

csshtmlresponsive

How to truncate text in a cell of a Vuetify data table using CSS styling

Is there a way to truncate text in a cell using CSS without it wrapping around or overflowing? The ideal CSS code should include: .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } However, the current implementation caus ...

cssvue.jsvuetify.js

Is it possible to keep content visible in Bootstrap tab by adding CSS?

Having an issue with the "formbox" class that is causing unexpected behavior when applied to a form. When removed, everything works as expected. I've tried narrowing down the issue by removing each CSS rule individually and testing it out but haven&ap ...

htmlcsstwitter-bootstrap

Create a spectrum of vibrant colors depending on the numerical value

I'm attempting to create a function that generates rainbow colors based on a numerical value. var max = 10000; var min = 0; var val = 8890; function getColor(min, max, val) { // code to return color between red and black } Possible Colors: Re ...

javascripthtmlcsscolors

Safari is truncating the box-shadow of an element enclosed within a button

I'm struggling with a button that has an element inside receiving a box-shadow: button { padding: 0; border: 0; margin: 0; overflow: visible; -webkit-appearance: none; background: white; } .shadow { display: inline-block; vertical- ...

csssafaribox-shadow

Add HTML content dynamically to a layout that is connected to a controller

While I may not have the proper heading for this question, I need to add this piece of HTML dynamically to my layout and attach its click events with a controller. <div id="subscriber1" class="participant-video-list"> <div class="participant- ...

htmlangularjscontrollerbind

What is the best way to reset the selected option in Vue.js when clicking on a (x) button?

Is there a way to create a function or button specifically for clearing select option fields? I attempted using <input type="reset" value="x" /> However, when I clear one field, all fields end up getting cleared. Should I provide my code that incl ...

javascripthtmlvue.js

Transfer the contents from the text box field into the <p> tag

I know how to transfer text from one textbox to another in JS, but I'm interested in moving the text from a textbox to a paragraph. Can anyone explain how to achieve this? Thank you Update: Apologies for not being more specific earlier. I'm att ...

javascripthtml

Instantly see changes without having to manually refresh the screen

I need help figuring out how to update my PHP webpage or table automatically in real-time without requiring a manual refresh. The current functionality of the page is working perfectly fine. Specifically, I want the page to instantly display any new user ...

javascriptphphtmlajax

CSS: Hover below the designated target to reveal an expanding dropdown menu

My initial solution involved toggling the visibility on and off when hovering. However, this approach is not optimal as the menu should smoothly transition into view. When the visibility is toggled, the user does not experience the intended transition effe ...

javascripthtmlcss

Using MySQL data in an EJS file to create a personalized Profile Page

In the midst of a personal project aimed at honing my web development skills and gaining a deeper understanding of the intricacies of the field, I have hit a roadblock. The focus of this project is to create a profile page, and while I have successfully co ...

javascripthtmlmysqlnode.jsexpress