CODEWITHSUNDEEP
javascripthtmlcss
Amiga500
Amiga500

Reputation: 6141

CSS - Align label on the left side of the input field

I am working on a complex form, that is a part of big project and I need to apply at least basic styling. This is where I am having problems with. I am not that good with CSS, I am just developer that does not have designer :( I have looked at the SO, and tried several approaches, and none of them gives me what I need.

I have main div container. In it I have three types of elements:

HTML:

<div class="main-container">
  //Case 1
  <div>
  <label for="typeAttributes">Type: </label>
  <select id="typeAttributes" class="field"><option  
  value="2">Company</option>
  <option value="4">Site</option>
  </select>
</div>
<div>
 //Case 2
  <label for="centralOrganization">Central Organization: </label>
  <input id="centralOrganization" class="field ui-autocomplete-input" 
  autocomplete="off" role="textbox" aria-autocomplete="list" >
</div>
//Case 3
<div class="input-wrapper">
 <label for="AttributeIndexFrom"> FROM </label>
 <input type="text" class="field inc-dec-input" name="index-from" 
 id="AttributeIndexFrom" value="0">
 <div class="inc button">+</div>
 <div class="dec button">-</div>
</div>
<div class="input-wrapper">
 <label for="AttributeIndexTo"> TO</label>
 <input type="text" class="field inc-dec-input" name="index-from" 
 id="AttributeIndexTo" value="0">
 <div class="inc button">+</div>
 <div class="dec button">-</div>
</div>

And CSS:

.input-wrapper {
 display: inline-block;
 text-align: left;
 }

I can introduce my own classes for the css. I just need the simple, but in my case very complex for me. I need labels to be on the left side of the input and select boxes. And in the last case, I need those input boxes in the same line with the label in front, and minus/plus signs at the back.

I have tried many ways that I found on SO, people with same issues. But none of the solutions gave me any result.

Upvotes: 1

Views: 2094

Answers (1)

Alteyss
Alteyss

Reputation: 513

If you don't have a designer, I adice you to adopt a framework, like Bootstrap for example. Check this : http://getbootstrap.com/components/#input-groups-basic

It is easy to use and returns good results...

For your input, you will be able to write just this : 

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<br />
<pre> Case 1:</pre>

<div class="input-group">
  <span class="input-group-addon" id="basic-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>

<br />
<pre> Case 2:</pre>

<div class="input-group">
  <span class="input-group-addon" id="basic-addon1">Select</span>
  <select class="form-control" id="sel1">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
  </select>
</div>

For the Case 3, use jQuery :

$(function() {
    var spinner1 = $( "#spinner1" ).spinner();
    var spinner2 = $( "#spinner2" ).spinner();
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<p>
  <label for="spinner1">From:</label>
  <input id="spinner1" name="value">
</p>
<p>
  <label for="spinner2">To:</label>
  <input id="spinner2" name="value">
</p>

Upvotes: 1

Related Questions