0

Please help me fix CSS of the following custom card inside 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>

My card looks like below after getting rendered.

enter image description here

I am using CSS from the bootstrap. Here are different CSS classes that I am overriding. 

.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 want to make this modal box and the card clean, intuitive and professional.

  1. As a first step, I would like to keep everything in the card on a single line. i.e. I want to shift the input box (reduce its size, put a placeholder that the value that can be entered in input box has to be in percentage) and the buy button (make it short and intuitive) in the first line itself.

  2. The modal box should have a scroller.

I am not able to do it. Any help here is highly appreciated?

Link to codepen https://codepen.io/agrawalo/pen/NWKaWMm

ThinkGeek
  • 4,749
  • 13
  • 44
  • 91

2 Answers2

1

You can try flexbox and set overflow to auto. Checkout this:

.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;
}


/*added code*/

.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>

Edit: I have edited my post. Now all the arrow and $ symbol will not go on the other line. If you also want to make input box of dynamic width, add this code:

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

Refer: Adjust width of input field to its input

Hope it helps!!

AdityaSrivast
  • 1,028
  • 1
  • 10
  • 16
1

Add 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;/*Change HERE*/
    text-align: right;
}
.card .market-info{
  display:flex;
  align-items:center;
}
.card .market-info p{
  margin:0;
}
Lalji Tadhani
  • 14,041
  • 3
  • 23
  • 40