Custom CSS styles for purchasing stocks using percentages

Can someone assist me in fixing the CSS for this custom card within a modal box?

<!--Card-->
<div class="modal-dialog">
   <div class="modal-content">
      <div class="modal-header">
         <input type="text" id="market-search" onkeyup="marketSearch()" placeholder="Search for stock names..">
         <i class="fa fa-times" data-dismiss="modal"></i>
      </div>
      <div class="modal-body">
         <div class="container">
            <div class="card stock-card" data-name="{{ stock.name }}">
               <div class="card-body">
                  <h4 class="card-title">ABB India Ltd.</h4>
                  <div class="market-info">
                     <p class="card-text stock-info"><a target="_blank" href="https://www.google.com/finance?q=NSE:{{ stock.code }}">Details</a></p>
                     <p class="card-text stock-info up" id="diff"> 9.45
                        <i class="fa fa-arrow-up" aria-hidden="true"></i>
                     </p>
                     <p class="card-text stock-info"><strong>$</strong> <span id="price">1340</span></p>
                     <p class="card-text stock-info">ABB</p>
                     <input id="input_{{stock.code}}"/>
                     <a style="white-space:nowrap" href="#" class="btn btn-primary btn-success " onclick=insertRow("{{stock.code}}","{{stock.name|to_and}}","{{stock.price}}","{{stock.diff}}")>Buy</a>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>

After rendering, the card appears as shown in the image below:

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

Utilizing CSS from Bootstrap, I have overridden various CSS classes. Here are the customizations I have made:

.card {
    margin-top: 2rem;
}

.card .card-title {
    font-weight: 300;
}

.card .market-info .card-text {
    font-weight: 400;
}

.card .market-info .stock-info
{
    display: block;
    float: left;
    padding: 0 1em;
    text-align: right;
}

.card .market-info .up {
    color: green;
}

.card .market-info .down {
    color: red;
}

I aim to enhance the modal box and card design for a cleaner, more intuitive, and professional look.

  1. Initially, I want to align the input box (reducing size and adding a placeholder for percentage value) and the buy button on the same line within the card.

  2. The modal box should have a scrolling feature.

I am facing challenges in achieving this. Any assistance provided here would be greatly appreciated.

Access the codepen link here for reference: https://codepen.io/agrawalo/pen/NWKaWMm

htmlcssbootstrap-4

Answer №1

Apply this CSS

.card .market-info p{
  margin:0;
}
.card .market-info input{
  max-width:60px;
  margin-right:5px;
}
.card .market-info{
  display:flex;
  align-items: center;
}

OR

  .card .market-info input{
  max-width:60px;
  padding:6px;
  margin-right:5px;
}
.card .market-info .stock-info
{
    display: block;
    float: left;
    padding: 0 10px;/*Update HERE*/
    text-align: right;
}
.card .market-info{
  display:flex;
  align-items:center;
}
.card .market-info p{
  margin:0;
}

Answer №2

If you're looking to improve the layout of your elements, consider using flexbox and applying overflow: auto. Take a look at this code snippet for reference:

.card {
  margin-top: 2rem;
}

.card .card-title {
  font-weight: 300;
}

.card .market-info .card-text {
  font-weight: 400;
}

.card .market-info .stock-info {
  display: block;
  float: left;
  padding: 0 1em;
  text-align: right;
}

.card .market-info .up {
  color: green;
}

.card .market-info .down {
  color: red;
}

.market-info {
  display: flex;
  align-items: center;
  overflow: auto;
}

.card .market-info>p.stock-info {
  display: flex;
  align-items: center;
}
<!--Card-->
<div class="modal-dialog">
  <div class="modal-content">
    <div class="modal-header">
      <input type="text" id="market-search" onkeyup="marketSearch()" placeholder="Search for stock names.." onkeypress="this.style.width = ((this.value.length + 1) * 8) + 'px';">
      <i class="fa fa-times" data-dismiss="modal"></i>
    </div>
    <div class="modal-body">
      <div class="container">
        <div class="card stock-card" data-name="{{ stock.name }}">
          <div class="card-body">
            <h4 class="card-title">ABB India Ltd.</h4>
            <div class="market-info">
              <p class="card-text stock-info"><a target="_blank" href="https://www.google.com/finance?q=NSE:{{ stock.code }}">Details</a></p>
              <p class="card-text stock-info up" id="diff"> 9.45
                <i class="fa fa-arrow-up" aria-hidden="true"></i>
              </p>
              <p class="card-text stock-info"><strong>$</strong> <span id="price">1340</span></p>
              <p class="card-text stock-info">ABB</p>
              <input id="input_{{stock.code}}" />
              <a style="white-space:nowrap" href="#" class="btn btn-primary btn-success " onclick=insertRow( "{{stock.code}}", "{{stock.name|to_and}}", "{{stock.price}}", "{{stock.diff}}")>Buy</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Update: I have made changes to prevent the arrow and $ symbol from wrapping to a new line. To dynamically adjust the width of input box, you can use the following code:

onkeypress="this.style.width = ((this.value.length + 1) * 8) + 'px';"

For more information, check out: Adjust width of input field to its input

Hope this solution works for you!

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

Utilizing Angular Forms for dynamic string validation with the *ngIf directive

I have a challenge where I need to hide forms in a list if they are empty. These forms contain string values. I attempted to use *ngIf but unfortunately, it did not work as expected and empty fields are still visible in the list. How can I address this iss ...

javascripthtmlcssangulartypescript

Tips on finding the key associated with a specific value

When a form is submitted, one of the fields being sent is an ID number instead of the name for easier processing by the server. For example: HTML dropdown select <select ng-model="myColor" class="form-control" ng-options = "color.ID as color.color ...

javascripthtmlangularjsjsonangular-ngmodel

The full-width header is generating a horizontal scrollbar

Why am I seeing horizontal scroll bars on Safari and Chrome when the header width is set to 100%? Here is the code snippet: window.onscroll = function() { scrollFunction(); }; function scrollFunction() { if (document.body.scrollTop > 400 || doc ...

htmlcssbootstrap-4

Tips for saving and editing a file with JavaScript

I need a website visitor to input text into a text area on my site. When they submit the form, I want the entered text to be saved in a .txt file located in the same directory as the current web page. I am unsure of how this can be accomplished, and if i ...

javascripthtmlfile

Center sidenav material 2 in alignment

Using Angular Material 2 presents a challenge for me: While I can align the text in the sidenav to center, I am struggling to align the button correctly. https://i.sstatic.net/vjHw4.png <md-sidenav-layout fullscreen> <md-sidenav #start mode=" ...

htmlcssangularangular-materialangular-material2

Ways to effectively pair a radio button with a dropdown menu

function radioCheck() { document.getElementById("last").checked = "checked"; } <label> <input type="radio" name="Ppub" value="" checked="checked">All Dates </label> <br> <label> <input type="radio" id="last" name="Ppu ...

javascripthtml

Issue with sliding panel not working smoothly in Internet Explorer

Is there a way to remove the added margin when opening the info slide panel? The issue seems to only occur in IE (using the IE tab plugin for Firefox) and in IE7 and IE8, the tooltip does not display. Thank you for any assistance. Site Link ...

jquerycssinternet-explorer

Trouble with achieving equal height columns in nested flexbox layout on Google Chrome

I am looking to evenly space several sidebar blocks throughout a lengthy post. To achieve this, I have utilized Flexbox within the sidebar for handling the even distribution of the blocks and it has been working flawlessly. Check out Code Pen: http://cod ...

htmlcsssassflexbox

Adjust grid column sizes automatically when a smaller number is declared - tailwind

I am working with the tailwind grid system and have specified 6 columns for each row. However, if the number of elements is less than 6, I would like it to resize them to 3. <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 grid-flow-r ...

cssgridtailwind-css

Struggling with converting my menu design into a dropdown menu

Recently completed creating my initial menu with a left navigation bar design. Wondering if it is achievable to implement a dropdown effect on hover without the use of javascript? I have come across several solutions but they do not seem to work for me, po ...

htmlcssmenu

Change wiki text into HTML using Python for showcasing on a webpage

Despite trying various tools for 6 hours, I have been unable to find one that can properly interpret wikitext like the example below: '<center>Welcome to the world's foremost open content<br><big><big><big>'&ap ...

pythonhtmlmarkupwikipediawikitext

The Owl-Carousel's MouseWheel functionality elegantly navigates in a singular, seamless direction

Issue at Hand: Greetings, I am facing a challenge in constructing a carousel using Owl-Carousel 2.3.4. My goal is to enable the ability to scroll through my images using the mousewheel option. Code Implementation: Incorporating HTML code : <div style ...

javascripthtmlcssowl-carousel

Implementing jQuery during the navigation between Node routes

Below is a snippet of my jQuery code: $(function () { $('.mnav a').click(function () { el = $('.border'); el.addClass('blink'); el.one('webkitAnimationEnd oanimationend msAnimationEnd animatio ...

javascriptjquerycssanimation

Load image in browser for future display in case of server disconnection

Incorporating AngularJS with HTML5 Server-Side Events (SSE) has allowed me to continuously update the data displayed on a webpage. One challenge I've encountered is managing the icon that represents the connection state to the server. My approach inv ...

javascripthtmlangularjs

Concealing spinner controls on HTML Ionic number input

Seeking a foolproof method to conceal spinner buttons on an HTML template for Ionic's number input field. Showcased below is the HTML code that exhibits an input with spinner buttons: <ion-input type='number'></ion-input> The ...

htmlcssionic-frameworkmobileionic3

Creating a dynamic table accordion with PHP and MySQL

I am currently working on creating an accordion table to display data retrieved from a database. I want the description data to be shown in a row below when clicking on the respective row. Despite my efforts in modifying various code snippets that I have c ...

javascriptphpjquerymysqlhtml

Adding dynamic text to a <span> tag within a <p> element is causing a disruption in my layout

I'm encountering an issue with a Dialog box that displays a message to the user regarding file deletion. Here's how it looks: +-----------------------------------------------------------------------+ | Delete File? ...

javascripthtmlcss

Tips for sending data through AJAX before the browser is about to close

My issue is with a javascript function that I've called on the html unload event. It seems to be working fine in Google Chrome, but for some reason it's not functioning properly in Firefox and IE. <script> function fun() { ...

javascriptjqueryajaxhtml

Using a jQuery event to apply styles with CSS

Hello, I am using jQuery Easy UI on my webpage but feeling a bit confused. I want to create an input field that looks like a tagging field - meaning when the user types a separator character (let's say a comma), the word being typed will have its CSS ...

jquerycsstagging

The inputs are not responding to the margin-left: auto and margin-right: auto properties as expected

I'm having trouble aligning an input in a form to the center. Even though I have included display: block in the CSS, using margin-left:auto and margin-right: auto is not yielding the desired result. To illustrate the issue more clearly, I've cre ...

csshtml