B. Clay Shannon B. Clay Shannon - 4 months ago 19
HTML Question

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"

Answer

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

Comments