CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
B. Clay Shannon-B. Crow Raven
B. Clay Shannon-B. Crow Raven

Reputation: 10297

How can I get my input text to move to the left up against the preceding label?

I'm using bootstrap classes to arrange my page, and it was going fine until my latest row:

@* row 7: Copy, Excel, CSV, and PDF buttons  *@
<div class="row">
    <div class="col-md-1">
    </div>
    <div class="col-md-8">
        <button type="button" class="squishedbutton">Copy</button>
        <button type="button" class="squishedbutton">Excel</button>
        <button type="button" class="squishedbutton">CSV</button>
        <button type="button" class="squishedbutton">PDF</button>
    </div>
    <div class="col-md-1">
        <label style="text-align: right;">Search:</label>
    </div>
    <div class="col-md-1">
        <input type="text" style="margin-right: 2cm;" name="searchinput">
    </div>
    <div class="col-md-1">
    </div>
</div>

That row is preceded and followed by rows like this:

<div class="row">
    <div class="col-md-12">
        <hr />
    </div>
</div>

I need the input text to shift to the left, away from the right border, and closer to the "Search" label.

How can I accomplish this?

I also don't know why the row is so tall, making the buttons overly tall - or why the buttons are so tall, making the row tall...

The css used is:

.squishedbutton {
  border: none;
  margin-left: 0cm;
  padding: 15px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
}

UPDATE

This is how it looks now:

enter image description here

...with this html:

<div class="row">
    <div class="col-md-1">
    </div>
    <div class="col-md-7">
        <button type="button" class="squishedbutton">Copy</button>
        <button type="button" class="squishedbutton">Excel</button>
        <button type="button" class="squishedbutton">CSV</button>
        <button type="button" class="squishedbutton">PDF</button>
    </div>
    <div class="col-md-1">
        <label style="text-align: right; display: inline-block;">Search:</label>
    </div>
    <div class="col-md-1">
        <input type="text" style="margin-right: 2cm;" name="searchinput">
    </div>
</div>

...and this css:

.squishedbutton {
  margin-left: 0cm;
  margin-right: -0.1cm;
  padding: 4px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
}

IOW, it looks more-or-less "okay" but I would like the input text shifted to the left and/or the label shifted to the right so that they appear a little more "cozy"

Upvotes: 0

Views: 80

Answers (2)

Gleb Kemarsky
Gleb Kemarsky

Reputation: 10418

UPD. There are three rows in the code below:

  1. Original CSS from the answer.
  2. Shift <label> to right.
  3. Place <label> and <input> in the same column.

Does something look as you need?

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

@media (min-width: 992px) {
  h2 {
    margin: 0;
    padding: 10px 0 0 0;
  }

  /* 1. */
  .shift-to-right {
    padding-right: 0;
    text-align: right;
  }

  /* 2. */
  .make-them-closer {
    padding-top: 13px;
  }
  .make-them-closer label {
    float: left;
    padding-right: 4px;
    padding-top: 3px;
  }
  .make-them-closer div {
    overflow: hidden;
  }
  .make-them-closer input {
    width: 100%;
  }
}

.squishedbutton {
  border: none;
  margin-left: 0cm;
  padding: 15px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
}
<div class="container-fluid">
  <div class="row">
    <div class="col-md-12"><hr /></div>

    <div class="col-md-1">
      <h2>0.</h2>
    </div>
    <div class="col-md-7">
      <button type="button" class="squishedbutton">Copy</button>
      <button type="button" class="squishedbutton">Excel</button>
      <button type="button" class="squishedbutton">CSV</button>
      <button type="button" class="squishedbutton">PDF</button>
    </div>
    <div class="col-md-1">
        <label style="text-align: right; display: inline-block;">Search:</label>
    </div>
    <div class="col-md-1">
        <input type="text" style="margin-right: 2cm;" name="searchinput">
    </div>

    <div class="col-md-12"><hr /></div>

    <div class="col-md-1">
      <h2>1.</h2>
    </div>
    <div class="col-md-7">
      <button type="button" class="squishedbutton">Copy</button>
      <button type="button" class="squishedbutton">Excel</button>
      <button type="button" class="squishedbutton">CSV</button>
      <button type="button" class="squishedbutton">PDF</button>
    </div>
    <div class="col-md-1 shift-to-right">
      <label>Search:</label>
    </div>
    <div class="col-md-1">
      <input type="text" name="searchinput">
    </div>

    <div class="col-md-12"><hr /></div>

    <div class="col-md-1">
      <h2>2.</h2>
    </div>
    <div class="col-md-7">
      <button type="button" class="squishedbutton">Copy</button>
      <button type="button" class="squishedbutton">Excel</button>
      <button type="button" class="squishedbutton">CSV</button>
      <button type="button" class="squishedbutton">PDF</button>
    </div>
    <div class="col-md-2 make-them-closer">
      <label>Search:</label>
      <div><input type="text" name="searchinput"></div>
    </div>
    
    <div class="col-md-12"><hr /></div>
  </div>
</div>

Upvotes: 1

Praveen
Praveen

Reputation: 847

.squishedbutton {
  border: none;
  margin-left: 0cm;
  padding:0 15px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 14px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<style>
  hr{ margin:0;}
 </style>

<div class="container">
		<div class="row">
			<div class="col-md-12">
				<hr />
			</div>
		</div>
		<div class="row">
			<div class="col-md-12">
				<hr />
			</div>
		</div>
		<div class="row">
			<div class="col-md-1">
			</div>
			<div class="col-md-7">
				<button type="button" class="squishedbutton">Copy</button>
				<button type="button" class="squishedbutton">Excel</button>
				<button type="button" class="squishedbutton">CSV</button>
				<button type="button" class="squishedbutton">PDF</button>
			</div>
			<div class="col-md-3 ">
				<form class="form-inline">
					<div class="form-group">
						<label for="exampleInputName2">Search</label>
						<input type="text" class="" id="exampleInputName2" placeholder="">
					</div>
					
				</form>
			</div>
			<div class="col-md-1">
			</div>
		</div>
		<div class="row">
			<div class="col-md-12">
				<hr />
			</div>
		</div>
		<div class="row">
			<div class="col-md-12">
				<hr />
			</div>
		</div>
	</div>

and if you want label and text to come next to buttons then place them just after buttons.

Upvotes: 1

Related Questions