Challenges with borders within a modal box

I am trying to create some spacing above and below the 'offer' button within my modal. Initially, I attempted to add a 30-pixel border to the bottom of the button, but it doesn't seem to be appearing. The end of the modal aligns directly with the end of the button, resulting in no space between them.

CSS

.slidecontainer {
  width: 100%;
  padding-left: 20px;
  padding-right: 20px;
}

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 15px;
  border-radius: 5px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

h2 {
  padding-top: 10px;
  padding-bottom: 10px;
}

#offerButton {
  border-bottom: 30px;
}

#inline {
  display: flex;
  justify-content: space-between;
  padding-top: 10px;
  padding-bottom: 10px;
}

#text1 {
  display: flex;
  justify-content: space-between;
  padding: 10px;
}

HTML/ANGULAR

<body>
  <div id="text1">
    <h2 class="text-center" id="offer">Offer: <span>${{offerVal}}</span></h2>
    <h2 class="text-center" id="offer">Price: <span>${{price}}</span></h2>
  </div>

  <div class="slidecontainer text-center">
    <input type="range" min={{min}} max={{max}} class="slider" id="myRange" [(ngModel)]="offerVal" name="slider">
  </div>
  <div class="text-center">
    <button class="btn btn-success btn-sm" type="button" id="offerButton" (click)="offer()">  Offer  </button>
  </div>
</body>
htmlcss

Answer №1

To create space between the offer button and the end of the modal, follow these steps:

Add some padding-bottom to the slidecontainer class.

.slidecontainer {
    width: 100%;
    padding: 0 20px 30px 20px;
}

Insert the offer button inside a div where you have applied the slidecontainer class.

<div class="slidecontainer text-center">
    <input type="range" min={{min}} max={{max}} class="slider" id="myRange"
           [(ngModel)]="offerVal" name="slider">
    <div>
        <button class="btn btn-success btn-sm" type="button" id="offerButton"
            (click)="offer()">  Offer
        </button>
    </div>
</div>

Avoid adding border-bottom to the button as it will not fix the spacing issue.

Additionally, remember that each element must have a unique id, so ensure that the id for one of the h2 elements is different from the one with the id offer.

Answer №2

To create space around the offerButton, consider adding margin to its ID instead of using a border-bottom property.

#offerButton {
  margin: 30px;
}
<body>
  <div id="text1">
    <h2 class="text-center" id="offer">Offer: <span>${{offerVal}}</span></h2>
    <h2 class="text-center" id="offer">Price: <span>${{price}}</span></h2>
  </div>

  <div class="slidecontainer text-center">
    <input type="range" min={{min}} max={{max}} class="slider" id="myRange" [(ngModel)]="offerVal" name="slider">
  </div>
  <div class="text-center">
    <button class="btn btn-success btn-sm" type="button" id="offerButton" (click)="offer()">  Offer  </button>
  </div>
</body>

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

How can I include inline CSS directly within a string instead of using an object?

Is there a way to write inline CSS in a string format instead of an object format? I attempted the following, but it did not work as expected: <div style={"color:red;font-weight:bold"}> Hello there </div> What is my reason for want ...

javascriptcssnext.jssassnext.js13

Getting Started with CSS Alignment - A Novice's Guide

Recently, I embarked on my journey to learn HTML and CSS with the ambition of creating a login page. Although I've successfully crafted a basic version, I'm encountering an issue where the input boxes and labels are misaligned, giving off an unpr ...

htmlcss

Providing input through the URL bar in PHP and HTML

I have a simple form on my website's HTML page. <form action="post.php" method="post"> Message: <input type="text" name="message" /> &nbsp; <input type="submit" name="submit" value="send"> </form> After submitti ...

phphtml

What is the best way to apply CSS to a mat-row element only when it is being hovered over?

I have a table with rows where a specific condition triggers a light red background color for each row. On hover, the background changes to light gray for all rows. However, I need the special rows (already colored light red) to have a deeper shade of red ...

htmlcssangular

NodeJS instructs open(html) to execute first before any other code is executed

I am evaluating whether nodeJS is a suitable solution for a project I am working on during my internship. To summarize: I need the basicNode.js file to wait until the open('./basic.html') command has completely opened the browser and loaded its c ...

javascripthtmlnode.js

JavaScript's onclick function for clearing dropdown fields will only work once for each specific dropdown field

I have scoured all the related questions and answers on StackOverflow, but none seem to address my specific issue. Here is the HTML code I am using: <select name="search_month" onclick="javascript: $('#categories').val(null);" id="months"> ...

javascriptjqueryhtmldrop-down-menu

What is the best way to add multiple lines of text to a webpage using the span element?

Currently, I am developing a game that involves using a map, which consists of multiple lines. My question is whether it is possible to have the span tag cover multiple lines while ensuring that each line ends with a new line character. Below is an exampl ...

javascripthtml

JavaScript Slideshow Transition Techniques

I'm struggling to create a slideshow gallery using Javascript. However, I'm facing an issue where the code instantly jumps from ferrari.jpg to veyron.jpg, completely skipping over lamborghini.jpg. <!DOCTYPE html> <html> <head> ...

javascripthtmlslideshow

Problem with translating a variable into a selector in JQuery

When attempting to make my Jquery code more flexible, I decided to extract the selector and access it through a variable. However, despite creating variables for both selectors, neither of them seem to be functioning properly. I am confident that the issue ...

javascriptjqueryhtmlcss

Collapsible Rows in Material-UI Table seamlessly integrated with regular rows

While using material-ui v4, I encountered an issue where my collapsible row columns are not aligning properly with my regular columns. Below is a photo and the code snippet for reference. As you can see in the image, when I expand the Frozen Yogurt row, th ...

cssreactjsmaterial-ui

The issue of a centered image not displaying properly and the inability to adjust the font

I'm trying to get the image to display bigger and in the center, but no matter what I try it's not working. HTML: <div class="content-grid"> <img src="test.jpg" /> </div> CSS: .content-grid img{ display: block; margin: ...

htmlcss

Creating a table using Jade/Express.js that displays various elements in each row

Looking to create a dynamic table layout using Jade for an array of objects where three objects are displayed on each row. <table> <thead>...</thead> <tbody> <tr> <td>obj0</td> <td>obj1 ...

htmlnode.jsexpresshtml-tablepug

Embed the Facebook Share Button using iFrames

I currently have a website that showcases news articles in a list format using PHP and MySQL. You can check it out here: My goal is to incorporate a Facebook share button/link on each article so that users can easily share individual posts on their own Fa ...

htmlfacebook-sharer

The appearance of the page varies between Ubuntu and Windows 7 when viewed on Firefox 31

This situation is completely new to me: The page I designed appears differently on Firefox 31 in Ubuntu (correct): compared to Windows 7 (wrong): I was able to replicate this issue on another Windows 7 machine using FF 31. My HTML and CSS both validate w ...

htmlcss

Arranging based on attribute data

I'm currently working on organizing a collection of divs that have unique custom data attributes which I aim to sort based on user selection. For instance, if 'followers' is chosen, the .box elements will be arranged according to their data- ...

javascriptjqueryhtmlcustom-data-attribute

Closing the space between navigation bar choices

I'm currently working on my website's navbar menu and struggling to eliminate the gap between each of the navbar links. It seems that the li attributes with the class dropdown are slightly wider than the rest of the links, causing this issue. I&a ...

csshtmltwitter-bootstraptwitter-bootstrap-3

The input box refuses to accept any typed characters

I encountered a strange issue where the input box in the HTML was not allowing me to type anything. const para = document.createElement('p') const innerCard = document.getElementsByClassName('attach') for(let i = 0; i < innerCard.l ...

javascripthtmlcss

Having trouble integrating the css and js animation files into my Django project

settings.py import os BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__))) SECRET_KEY = '@6qt%i+0&_=z0#zl^+!u3bw6c7dmg4e3khboj%7s7439z9#ky(' DEBUG = True ALLOWED_HOSTS = [] INSTALLED_APPS = [ 'django.contrib.admin& ...

javascripthtmlcssdjangocodepen

Right-align each item when selecting none

Is there a way to change the style of just one of the elements select or option, without affecting the style of both? I attempted to align the select element to the right, while leaving the option elements aligned to the left. However, this did not work a ...

javascriptjqueryhtmlcss

Adjusting ToggleButton hues in react-bootstrap

I am working with a group of ToggleButtons in my app and I want to customize their background colors. Currently, all the buttons have a gradient defined by <.untoggled-button> class, with an added blue overlay for unselected buttons. However, I am fa ...

cssreactjsreact-bootstrap