Text will not align left of datefield box

Question

This should not be difficult at all... All I want is for the datefield box to align on the right side of my text (Date of Purchase). For some reason it will only align underneath the text or I can get the text to align on the right of the datefield box. If I use the cfform format="flash" and align in a cfformgroup type="horizontal" it will work. Does anyone have any clue why it will not work in a regular form.. or know how to make it work. Any help is greatly appreciated.

Date of Purchase:
<cfinput
 type="datefield"
 name="from_date"
 width="130"
 value="#dateformat(now(),"mm/dd/yyyy")#" 
>

The problem is right there for all to see....you are using `cfinput`. Use something else, the ColdFusion UI elements are a mess. — Scott Stroz, Sep 12 '14 at 21:10
To answer the question, there is a silly [datefield hack involving `div` and `br`](http://stackoverflow.com/questions/19982661/label-in-cfinput-is-displaying-to-the-right-of-the-text-box/19983983#19983983) that may work. However, the UI stuff is klunky, so this almost certainly won't be the last problem you encounter. In the long run you would better off using a different, and newer, library. — Leigh, Sep 12 '14 at 22:07

score 1 · Accepted Answer · edited May 23 '17 at 10:33

Generated Code

When ColdFusion runs, it generates

<form name="CFForm_1" id="CFForm_1" action="?" method="post" onsubmit="return _CF_checkCFForm_1(this)">
Date of Purchase: <div  style="position:relative;float:left;">
<div  style="float:left;">
    <input name="from_date" id="from_date"  type="datefield" value="09/12/2014" class="datefieldinput"  width="130"  />
 </div><div  id="from_dateCFForm_1_cf_buttondiv" style="float:left;padding:3px;">

    <img id="from_dateCFForm_1_cf_button" src="/CFIDE/scripts/ajax/resources/cf/images/DateChooser.png" alt='Date Picker' />

 </div><div  id="from_dateCFForm_1_cf_container" style="display:none; position:absolute; font-size:12px;overflow:visible;float:left;z-index:9050;top:1.5em;">

 </div>

Alternative 1

Use tables

<cfform action="?">
<table>
<tr>
   <td>
    Date of Purchase:
   </td>

   <td>
     <cfinput
       type="datefield"
       name="from_date"
       width="130"
       value="#dateformat(now(),"mm/dd/yyyy")#" 
       >
   </td>
 </tr>
 <table>
 </cfform>

Alternative 2

Use jQuery UI

https://stackoverflow.com/questions/tagged/jquery-ui-datepicker

Alternative 3

Use Bootstrap. There are many date pickers for it

Text will not align left of datefield box

1 Answers1