• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 454
  • Last Modified:

Need help formating a page in HTML, using <label> against <select>

So I have a page with multiple Select boxes.   An most of it works great, my problem is the <label> for the Select Box wants to be adjusted against the left margin instead of at the top of the box on the Left side of it,  and the select drop down always is properly centered on the page.  No matter how I change the align on the <label>

<div id="divGroups" style="display: inline">
<p class="c1">
<label for="Pin" style="float:left; margin-right:3px;">Select from Group List - &nbsp&nbsp</label> 
<select id="targetGroups" class="targetSubselect" size="5" multiple name="Pin" width="40" style="width: 400px">

Open in new window


HTML-label-Capture.JPG
0
Phonebuff
Asked:
Phonebuff
  • 6
  • 4
  • 2
2 Solutions
 
GaryCommented:
What's the full HTML including CSS - what you have posted is no help
0
 
PhonebuffAuthor Commented:
Gary,

     The page is a kludge --

              A Wordpress page --- With a PHP script with the Insert PHP Plugin that spits out the HTML  with a series of Echo statements, and PostgreSQL select statements that build the Select option statements.    
 
             The whole things works well, excepted that when trying to float the label against the upper left hand corner of the select box with the statements above the label is adjusted against the left margin while the box is centered correctly.  

             The select above groups which is not a multiple does not use the label as the text appears where it should to the left of the box which is only a single select not a multiple.

The C1 class for the paragraph is noting more than ..

 p.c1 {text-align: center} 

Open in new window

     
I know that it has to do with the way I have the combination of the paragraph, label and select statements coded, I am just not able to identify the issue I have and hope to find some direction here..

TIA --
0
 
GaryCommented:
If you want it above the select box then you shouldn't be floating it and I don't know why you are using a label e.g.

<div style="width:400px;margin:0 auto">
<div>Select from Group List</div>
<select>
...
</select>
</div>

Open in new window

If you want it to the left of the select box then
<div style="width:500px;margin:0 auto">
<div style="display: inline-block;">Select from Group List</div>
<select>
...
</select>
</div>

Open in new window

0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
rgranlundCommented:
<div id="divGroups" style="display: inline">
<p class="c1">
<label for="Pin" style="float:left; margin-right:3px;">Select from Group List - &nbsp&nbsp</label>
<br />
<select id="targetGroups" class="targetSubselect" size="5" multiple name="Pin" width="40" style="width: 400px">
0
 
PhonebuffAuthor Commented:
I definitely want it to the left an at the top of the select with a size=5.  

An my <div> is hidden until the selection is made in the first box.  

But, your <div> inside the the <div>  looks like an interesting solution, let me try that.   Oh an I used <label> because I was attempting to "label" the select box field name "pin" an in looking at HTML manuals and sites that seems to be the recommended solution.

Will get back in a few minutes.
0
 
GaryCommented:
So something like this
http://jsfiddle.net/U8R32/1/
0
 
PhonebuffAuthor Commented:
@rgranlund

   Looks like mine with the exception of the "<br />" line.  How does adding a break with an undefined close help ?

   ====
0
 
PhonebuffAuthor Commented:
@gary, yes and that works..   So my understanding of the label is wrong --  

THANK YOU !
0
 
rgranlundCommented:
The best solution is to give each element it's own CSS class  and define them thoroughly in your style sheet.  However, using the "KISS approach" (Keep It Simple Stupid) works also.  So, I suggest try placing a <br />.  Float l
left on each element should work also.
0
 
PhonebuffAuthor Commented:
Not so fast,  

    When I changed the code my Label was on top on the select box not on the left side aligned top.

     Pasted it into jsfiddle abnd it does the same thing --

<div id="divGroups" style="width:300px;margin:0 auto">
<div style="display: inline-block;vertical-align:left">Select from Group List -- </div>
<select id="targetGroups" class="targetSubselect" size="5" multiple name="Pin" width="40" style="width: 400px">
<optgroup label="Select a Recipient(s) Group from the List">
</optgroup> 
</select> 
<br><br>
</div>

Open in new window

0
 
GaryCommented:
The container div has to be big enough to fit everything in
http://jsfiddle.net/F2ADX/
0
 
PhonebuffAuthor Commented:
:-)   Nice catch, I tried 500 but not 600..

Than you very much --  Only to psql functions ..  

=================
0

Featured Post

The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

  • 6
  • 4
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now