views:

36

answers:

2

Does anyone have any experience positioning the jquery.datepicker found at http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/datePickerClickInput.html

Functionality-wise it works perfectly, doing exactly what I want it to. However, I'm using it for a search function, and need multiple fields in order to search for dates, and other things. My issue is that every input box set to the datepicker, the next element automatically gets put onto a new line. For my usage, I'd like to keep all input boxes on the same page. Any ideas why? I've looked through the CSS and can't figure it out. Any help would be much appreciated.

The CSS for the datePicker has been left unchanged, so what you are using (or see from the included link is what I am referencing). In terms of my code, I'm using a template called Simpla Admin, and while I've perused through it for a deeply nestled clear:both, it is entirely possible that I have missed it. I am indeed using Firebug to check the CSS settings, and nothing is standing out for me.

<div class="clear"></div>

        <?php
        } else {
            echo '<p><h3>No patients found.</h3></p>';
        }
        }
        ?>
        <br><br>
        <form name="searchForm" id="searchForm" action="#">
            First: <input name="firstName" id="firstName" style="width:80px" class="text-input" />
            Last: <input name="lastName" id="lastName" style="width:80px" class="text-input" />
            DOB: 
            <select name="dobMonth" style="width:70px" id="dobMonth">
              <option value ="">Month</option>
              <option value ="01">January</option>
              <option value ="02">February</option>
              <option value ="03">March</option>
              <option value ="04">April</option>
              <option value ="05">May</option>
              <option value ="06">June</option>
              <option value ="07">July</option>
              <option value ="08">August</option>
              <option value ="09">September</option>
              <option value ="10">October</option>
              <option value ="11">November</option>
              <option value ="12">December</option>
            </select>
            <select name="dobDay" style="width:60px" id="dobDay">
                <option value="">Day</option>
                <?php $days = GetDaysInMonth(); 
                $DaysInNumbers = array ('', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31');
                for ($i = 1; $i <= $days; $i++) : ?>
                <option value="<?php echo $DaysInNumbers[$i]; ?>"><?php echo $i; ?></option>
                <?php endfor; ?>
            </select>
            <select name="dobYear" style="width:60px" id="dobYear">
                <option value="">Year</option>
                <?php for ($i = 1920; $i < date('Y'); $i++) : ?>
                <option value="<?php echo $i; ?>"><?php echo $i; ?></option>
                <?php endfor; ?>
            </select>
            Date: <input name="bookingDate" id="bookingDate" style="width:80px" class="date-pick" />
            <input name="bookingDate2" id="bookingDate2" style="width:80px" class="date-pick" />
            <input class="button" name="user-search" type="submit" value="User Search" />
        </form>
        </div>

There are a few clear:both present, but nothing that I can see would be messing with the formatting. Can you spot my error?

+1  A: 

You need to get rid of clear:both from #chooseDateForm li {clear:both;} and just float it to the left.

dragosplesca
Already tried that to no avail, any other suggestions?
Brian Lang
that's what I figured it was going to be, clear:both ... any chance you can post your code or a smaller snippet thereof to show how it's not working? ~ Also, just because I can be curious, what browser are you testing this under? Any chance you are using Firebug to check the CSS settings, etc? ~ Lastly, consider child elements having CSS concerns as well. Sometimes a deeply nested clear:both can cause this issue.
drachenstern
Just made an edit to include the code, and give a bit more explanation.
Brian Lang
Do the inputs have `float:left` ?
dragosplesca
Some inputs in certain areas do, but in the case of this section, they should not. The CSS code for everything else can be found here: http://www.promptpass.com/admin/resources/css/style.cssBut I was unable to locate any issues. Anything stand out to you?
Brian Lang
Let me see if i get this right. You want the last two inputs with the date-pick class to be on the same "line" ? In that case try: `<label style="float:left">Date: </label><input name="bookingDate" id="bookingDate" style="width:80px;float:left;" class="date-pick" /><input name="bookingDate2" id="bookingDate2" style="width:80px;float:left;" class="date-pick" />` I'm kinda new at this so I'm sorry if the code looks like it's been formatted by an elephant's ass.
dragosplesca
So I'm not sure how I could even describe this, but here it goes. That puts everything on the same line, per say, however instead of being nicely next to each other, each element is about half the height of a line down. So instead of on two separate lines, it makes the elements in-line with each other, just half a row below one another. How is that even possible? CSS is so frustrating.
Brian Lang
A: 

Found the issue in display: block - thanks for all of the suggestions!

Brian Lang