Hey Tim,
Doing this in your code pen worked for me.
I moved the paragraph into a li inside the ul for that same select dropdown.
You had the paragraph inside a separate ul.
...
<ul>
<li class="w50">
<label for="sel_ix">Year<span
class="rubric1"> *</span></label>
<select name="sel_ix"
id="sel_ix">
<option
value="0">2016</option>
<option value="1"
selected="">2017</option>
<option
value="2">2018</option>
</select>
</li>
<li><p>
The year for which settings are
to be made<br>
Defaults to 'next year'.
</p></li>
</ul>
...
Best,
Karl DeSaulniers
Design Drumm
http://designdrumm.com
> On Sep 14, 2016, at 5:57 PM, Tim Dawson <[email protected]> wrote:
>
> I've come across something I do not yet understand in a form I'm designing.
>
> I have a <select> box inside a <ul> and I want to float the <ul> left and
> reduce the column width to < 50% so I can include some notes alongside. BUT
> when I apply the float to the <ul> the <select> box will no longer expand
> when its down-arrow is clicked (nor when I click in the <select> box itself).
>
> See this Codepen: https://codepen.io/ramasaig/pen/YGqNxq/
>
> I added the 'position: static' to the <ul class='w50'> styling in the hope
> of undoing the 'position: relative' on all <ul> , but it didn't have any
> effect. Removing the 'position: relative' solves the problem, and hasn't so
> far had any unintended consequences.
>
> Here's the HTML:
> <fieldset>
> <legend><span>Select Year</span></legend>
> <ul class='w60'>
> <li>
> <label for="sel_ix">Year<span class="rubric1"> *</span></label>
> <select name='sel_ix' id='sel_ix'>
> <option value='0'>2016</option>
> <option value='1' selected >2017</option>
> <option value='2'>2018</option>
> </select>
> </li>
> </ul>
> <ul class='w40'>
> <p>
> The year for which settings are to be made<br />
> Defaults to 'next year'.
> </p>
> </ul>
> <ul>
> <li>
> <input class="submit" name="select" type="submit" value="Confirm
> Year" />
> </li>
> </ul>
> </fieldset>
>
> and the (partial) CSS (as used in Codepen):
>
> fieldset ul {position: relative;}
>
> .w50 { // applied to the <ul> containing the <select>
> position: static; // added in hope of cancelling the 'position:
> relative'
> float: left;
> width: 50%;
> }
>
> I've tried in both Firefox and Chrome, with the same result. I've also tried
> making the CSS both more and less specific, also without success.
>
> I do have a work-around if necessary (remove 'position: relative'). But why
> do I a problem in the first place? Any help would be much appreciated.
>
> Regards,
>
> Tim Dawson
>
> --
> Tim Dawson
> Maolbhuidhe
> Fionnphort
> Isle of Mull PA66 6BP
>
> 01681 700718
> ______________________________________________________________________
> css-discuss [[email protected]]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
______________________________________________________________________
css-discuss [[email protected]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
