Positioning elements Bootstrap 3

In the codepen below, I'm trying to make it look like the attached image at all sizes. Two things are not working correctly - in the first line with numbers, the green numbers are the day's price change and change percent (the only green text on the page). At the large browser size they are drifting apart too much. Is there a way to force them to stay next to each other in all sizes?

I'm also having difficulty figuring out how to make the inline-form text input field always take up 50% of that line, and make the 'Get new Quote' button always take up 50% at all sizes - like in the attached image.

Image of how it should look at all sizes CodePen Link

<head>
  <title>Stock Quotes</title>
  <meta charset='utf-8' />
  <meta name='viewport' content='"width=device-width, initial-scale=1'>
</head>

<body>
  <div class='container'>
    <div class='row'>
      <div id='quote-module' class='col-md-12'>
        <h1></h1>
      </div>
    </div>
    <div class='col-md-*'>
      <hr id='hruleFat' />
    </div>
    <div class='row'>
      <div class='col-md-12 pull-left' id='companyName'></div>
    </div>
    <div id='prices' class='row'>
      <div id='lastPrice' class='col-md-8 pull-left'></div>
      <div id='changes'>
        <div id='changePercent' class='col-md-2 pull-right'></div>
        <div id='change' class='col-md-2 pull-right'></div>
      </div>
    </div>
    <hr>
    <div id='range'>
      <p class='pull-right'></p>Range</div>
    <hr>
    <div id='open'>
      <p class='pull-right'></p>Open</div>
    <hr>
    <div id='volume'>
      <p class='pull-right'></p>Volume</div>
    <hr>
    <div id='marketCap'>
      <p class='pull-right'></p>Market Cap</div>
    <hr>
    <div class='row'>
      <div id='time' class='col-md-* pull-right'></div>
    </div>
    <hr>
    <div id='getQuoteForm'>
      <form class='form-inline col-md-*' id='getQuote'>
        <div class="form-group">
          <input type='text' class='form-control' id='symbolInput'>
        </div>
        <button type='submit' class='btn btn-default col-md-* '>Get New Quote</button>
    </div>
    </form>
  </div>
  <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
  <link rel='stylesheet' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css' />
  <script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js'></script>
  </div>
</body>

</html>

Upvotes: 0

Answers (2)

Sushil

Reputation: 2835

try removing the class col-md-2 from changePercent and change div's. here's the jsfiddle for this jsfiddle.net/8uwbwapp/1

Upvotes: 1

Ankur Ranpariya

Reputation: 41

I have fixed your both changes. Please see below changes I have made in codepen:

function fireAjax(url) {

  $.ajax({
    dataType: 'jsonp',
    url: url,
    success: function(data) {
      $('h1').html(data.Name);
      $('.container #companyName').html(data.Name);
      $('#lastPrice').html(data.LastPrice.toFixed(2));
      $('#change').html(data.Change.toFixed(2));
      $('#changePercent').html("(" + data.ChangePercent.toFixed(2) + "%)");
      $('#range p').html(data.Low + '-' + data.High);
      $('#open p').html(data.Open.toFixed(2));
      $('#volume p').html(Math.round(data.Volume / 100000));
      $('#marketCap p').html(Math.round(data.MarketCap / 1000000000));

      var vol = data.Volume.toString();
      if (vol > 6) {
        $('#volume p').append('M');
      }

      var cap = data.Volume.toString();
      if (cap > 7) {
        $('#marketCap p').append('B')
      }

      var date = new Date();
      var hours = date.getHours() > 12 ? date.getHours() - 12 : date.getHours();
      var am_pm = date.getHours() >= 12 ? "PM" : "AM";
      var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
      var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      time = hours + ":" + minutes + ":" + seconds + " " + am_pm;
      $('#time').html('As of ' + time);

    }
  })
}

fireAjax('http://dev.markitondemand.com/Api/v2/Quote/jsonp?symbol=AAPL')

$("#getQuote").submit(function(event) {
  var newURL = 'http://dev.markitondemand.com/Api/v2/Quote/jsonp?symbol=' + $('#symbolInput').val();
  console.log(newURL);
  fireAjax(newURL);
  event.preventDefault();
});

#quote-module {
  border:1px dotted #888;
  background:#EEE;
  min-height:200px;
}

#hruleFat {
  top:10px;
  background-color: grey;
  height: 5px;
}

#prices {
  padding-top:25px;
  font-family: "Times New Roman", Georgia, Serif;
  font-size:18px;
}

#change {
  color: green;
}
#changePercent{
  color: green;
}

#range {
  color: #999;
  font-weight: bold;
}
#open {
  color: #999;
  font-weight: bold;
}

#volume {
  color: #999;
  font-weight: bold;
}

#marketCap {
  color:#999;
  font-weight: bold;
}

#range p{
  color: black;
}
#open p {
  color: black;
}

#volume p {
  color: black;
}


#marketCap p{
  color: black;
}

#time {
  font-size: 12px;
  color:#999;
}


#companyName {
  max-width:20px;
  font-family: "Times New Roman", Georgia, Serif;
  text-transform: uppercase;
  color:#666;
}

<div class='container'>
    <div class='row'>
        <div id='quote-module' class='col-md-12'>
             <h1></h1>

        </div>
    </div>
    <div class='col-md-*'>
        <hr id='hruleFat' />
    </div>
    <div class='row'>
        <div class='col-md-12 pull-left' id='companyName'></div>
    </div>
    <div id='prices' class='row'>
        <div id='lastPrice' class='col-xs-8'></div>
        <div id='changes' class="col-xs-4">
            <div id='changePercent' class=' pull-right'></div>
            <div id='change' class='pull-right'></div>
        </div>
    </div>
    <hr>
    <div id='range'>
        <p class='pull-right'></p>Range</div>
    <hr>
    <div id='open'>
        <p class='pull-right'></p>Open</div>
    <hr>
    <div id='volume'>
        <p class='pull-right'></p>Volume</div>
    <hr>
    <div id='marketCap'>
        <p class='pull-right'></p>Market Cap</div>
    <hr>
    <div class='row'>
        <div id='time' class='col-md-* pull-right'></div>
    </div>
    <hr>
    <div id='getQuoteForm'>
        <form class='form-inline col-md-*' id='getQuote'>
            <div class="row">
                <div class="col-xs-6">
                    <input type='text' class='form-control' id='symbolInput' style="width:100%">
                </div>
                <div class="col-xs-6">
                    <button type='submit' class='btn btn-default col-xs-12'>Get New Quote</button>
                </div>
            </div>
        </form>
    </div>
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
    <link rel='stylesheet' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css' />
    <script src='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js'></script>
</div>

Upvotes: 0

Positioning elements Bootstrap 3

Answers (2)

Related Questions