CODEWITHSUNDEEP
jquerycss
user4122820
user4122820

Reputation:

CSS for DIV's jQuery-UI

How can I adjust jQuery-ui.css for the spacing in between DIV's? I am using jQuery 2.1.0 along with there "smoothness" ui. But for some reason I can not get a good grasp of changing there CSS. As you see in the example below I have provided my text boxes are right on top of each other pretty much I just want a little more spacing or padding in between them.. I tried using a <br> and that just ends up to be way too much spacing. Any help would be greatly appreciated.

http://jsfiddle.net/acw7z1ob/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="clearfix">
  <label for="vin">&nbsp;&nbsp;&nbsp;Vehicle Identification Number:</label>
  <input type="text" name="vin" id="vin" validateat="onSubmit" validate="noblanks" size="30" maxlength="30" required="yes" message="Please enter vehicle identification number.">&nbsp;&nbsp;<span id="result"></span>
</div>
<div class="clearfix">
  <select name="month1" id="month1" size="1">
    <option value="">Choose a Month</option>
    <option value="0">January</option>
    <option value="1">February</option>
    <option value="2">March</option>
    <option value="3">April</option>
    <option value="4">May</option>
    <option value="5">June</option>
    <option value="6">July</option>
    <option value="7">August</option>
    <option value="8">September</option>
    <option value="9">October</option>
    <option value="10">November</option>
    <option value="11">December</option>
  </select>
  &nbsp;&nbsp;&nbsp;
  <select name="month2" id="month2" size="1">
    <option value="">Choose an Option</option>
    <option value="2">2</option>
    <option value="14">14</option>
  </select>
  &nbsp;&nbsp;&nbsp;
  <select name="month3" id="month3" size="1">
    <option value="">Choose an Option</option>
    <option value="3">3</option>
    <option value="15">15</option>
  </select>
</div>
<div class="clearfix">

  <label for="ew">Empty Weight:</label>
  <input type="text" name="ew" id="ew" validateat="onSubmit" validate="noblanks" required="yes" message="Please enter empty weight.">

  <label id="gvwLabel">&nbsp;&nbsp;&nbsp;Gross Vehicle Weight:*</label>
  <input type="text" name="gvw" id="gvw" onfocus="this.select()">

Upvotes: 3

Views: 79

Answers (1)

Alex Char
Alex Char

Reputation: 33218

You can use margin for your text inputs like:

input[type='text'] {
  margin: 10px;
}
<div class="clearfix">
  <label for="vin">&nbsp;&nbsp;&nbsp;Vehicle Identification Number:</label>
  <input type="text" name="vin" id="vin" validateat="onSubmit" validate="noblanks" size="30" maxlength="30" required="yes" message="Please enter vehicle identification number.">&nbsp;&nbsp;<span id="result"></span>
</div>
<div class="clearfix">
  <select name="month1" id="month1" size="1">
    <option value="">Choose a Month</option>
    <option value="0">January</option>
    <option value="1">February</option>
    <option value="2">March</option>
    <option value="3">April</option>
    <option value="4">May</option>
    <option value="5">June</option>
    <option value="6">July</option>
    <option value="7">August</option>
    <option value="8">September</option>
    <option value="9">October</option>
    <option value="10">November</option>
    <option value="11">December</option>
  </select>
  &nbsp;&nbsp;&nbsp;
  <select name="month2" id="month2" size="1">
    <option value="">Choose an Option</option>
    <option value="2">2</option>
    <option value="14">14</option>
  </select>
  &nbsp;&nbsp;&nbsp;
  <select name="month3" id="month3" size="1">
    <option value="">Choose an Option</option>
    <option value="3">3</option>
    <option value="15">15</option>
  </select>
</div>
<div class="clearfix">

  <label for="ew">Empty Weight:</label>
  <input type="text" name="ew" id="ew" validateat="onSubmit" validate="noblanks" required="yes" message="Please enter empty weight.">

  <label id="gvwLabel">&nbsp;&nbsp;&nbsp;Gross Vehicle Weight:*</label>
  <input type="text" name="gvw" id="gvw" onfocus="this.select()">

Or you can add margin in class container clearfix:

.clearfix {
  margin: 10px;
}
<div class="clearfix">
  <label for="vin">&nbsp;&nbsp;&nbsp;Vehicle Identification Number:</label>
  <input type="text" name="vin" id="vin" validateat="onSubmit" validate="noblanks" size="30" maxlength="30" required="yes" message="Please enter vehicle identification number.">&nbsp;&nbsp;<span id="result"></span>
</div>
<div class="clearfix">
  <select name="month1" id="month1" size="1">
    <option value="">Choose a Month</option>
    <option value="0">January</option>
    <option value="1">February</option>
    <option value="2">March</option>
    <option value="3">April</option>
    <option value="4">May</option>
    <option value="5">June</option>
    <option value="6">July</option>
    <option value="7">August</option>
    <option value="8">September</option>
    <option value="9">October</option>
    <option value="10">November</option>
    <option value="11">December</option>
  </select>
  &nbsp;&nbsp;&nbsp;
  <select name="month2" id="month2" size="1">
    <option value="">Choose an Option</option>
    <option value="2">2</option>
    <option value="14">14</option>
  </select>
  &nbsp;&nbsp;&nbsp;
  <select name="month3" id="month3" size="1">
    <option value="">Choose an Option</option>
    <option value="3">3</option>
    <option value="15">15</option>
  </select>
</div>
<div class="clearfix">

  <label for="ew">Empty Weight:</label>
  <input type="text" name="ew" id="ew" validateat="onSubmit" validate="noblanks" required="yes" message="Please enter empty weight.">

  <label id="gvwLabel">&nbsp;&nbsp;&nbsp;Gross Vehicle Weight:*</label>
  <input type="text" name="gvw" id="gvw" onfocus="this.select()">

Upvotes: 4

Related Questions