Friday, May 27, 2016

#HTML day of month select

This took me about 10 minutes to type out, so maybe putting this here will save someone time.

<select id="day-of-month">
    <option value="1">1st</option>
    <option value="2">2nd</option>
    <option value="3">3rd</option>
    <option value="4">4th</option>
    <option value="5">5th</option>
    <option value="6">6th</option>
    <option value="7">7th</option>
    <option value="8">8th</option>
    <option value="9">9th</option>
    <option value="10">10th</option>
    <option value="11">11th</option>
    <option value="12">12th</option>
    <option value="13">13th</option>
    <option value="14">14th</option>
    <option value="15">15th</option>
    <option value="16">16th</option>
    <option value="17">17th</option>
    <option value="18">18th</option>
    <option value="19">19th</option>
    <option value="20">20th</option>
    <option value="21">21st</option>
    <option value="22">22nd</option>
    <option value="23">23rd</option>
    <option value="24">24th</option>
    <option value="25">25th</option>
    <option value="26">26th</option>
    <option value="27">27th</option>
    <option value="28">28th</option>
    <option value="29">29th</option>
    <option value="30">30th</option>
    <option value="31">31st</option>
</select>of the month

Friday, May 20, 2016

#Bootstrap form with horizontal labels

To get a form that has horizontal labels in Bootstrap like this:

Do this

<form class="form-horizontal" method="POST" action="">
<div class="form-group ">
    <label class="col-md-2 control-label" for="eventTitle">Event</label>
    <div class="col-md-10">
      <input class="form-control" id="eventTitle" type="text">


#Bootstrap form with side-by-side controls

I have a form that has some controls that need to be side-by-side. All you need to do is wrap the controls in a div with class form-inline. This needs to go after the div with the column width class. Example:
<div class="form-group">
    <label class="col-md-2 control-label" for="">Start</label>
    <div class="col-md-10">
        <div class="form-inline">
            <input class="form-control"  type="text" id="eventStartDate">  <input class="form-control" type="text" id="eventStartTime">

Note: I highlighted the gap between to the side-by-side controls. That's because that space is actually rendered. I put one or two spaces, and you can notice the small gap on the image between the two controls. So watch out for that, because obviously space is not normally rendered like that.