Solved

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

Posted on 2014-07-20
12
434 Views
Last Modified: 2014-07-20
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
Comment
Question by:Phonebuff
  • 6
  • 4
  • 2
12 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 40207615
What's the full HTML including CSS - what you have posted is no help
0
 
LVL 15

Author Comment

by:Phonebuff
ID: 40207629
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
 
LVL 58

Expert Comment

by:Gary
ID: 40207637
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
Efficient way to get backups off site to Azure

This user guide provides instructions on how to deploy and configure both a StoneFly Scale Out NAS Enterprise Cloud Drive virtual machine and Veeam Cloud Connect in the Microsoft Azure Cloud.

 
LVL 7

Expert Comment

by:rgranlund
ID: 40207649
<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
 
LVL 15

Author Comment

by:Phonebuff
ID: 40207652
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
 
LVL 58

Assisted Solution

by:Gary
Gary earned 500 total points
ID: 40207663
So something like this
http://jsfiddle.net/U8R32/1/
0
 
LVL 15

Author Comment

by:Phonebuff
ID: 40207665
@rgranlund

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

   ====
0
 
LVL 15

Author Comment

by:Phonebuff
ID: 40207671
@gary, yes and that works..   So my understanding of the label is wrong --  

THANK YOU !
0
 
LVL 7

Expert Comment

by:rgranlund
ID: 40207676
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
 
LVL 15

Author Comment

by:Phonebuff
ID: 40207687
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
 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 40207689
The container div has to be big enough to fit everything in
http://jsfiddle.net/F2ADX/
0
 
LVL 15

Author Comment

by:Phonebuff
ID: 40207692
:-)   Nice catch, I tried 500 but not 600..

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

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

Featured Post

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Although it can be difficult to imagine, someday your child will have a career of his or her own. He or she will likely start a family, buy a home and start having their own children. So, while being a kid is still extremely important, it’s also …
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…

786 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question