Hello Karl,
Thanks for your reply.
Yes, it did the same for me too, but now I get the notes (in the <p>) UNDER the <select>, not to
the right. And why does that make the <select> work?
I copied the <p> into a new <li> (as you suggested), and the <select> worked immediately, even
before I'd had a chance to delete the old <p>. Which seems odd. Maybe I should try an empty <li>
under the <select>.
Late here now, try again tomorrow.
Best Wishes,
Tim
On 15/09/2016 00:15, Karl DeSaulniers wrote:
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 <t...@ramasaig.com> 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 [css-d@lists.css-discuss.org]
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 [css-d@lists.css-discuss.org]
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/
--
Tim Dawson
Maolbhuidhe
Fionnphort
Isle of Mull PA66 6BP
01681 700718
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
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/
