CODEWITHSUNDEEP
javascripthtmllabel
Mike
Mike

Reputation: 13

Multiple labels in html alignment

I have the following code to define four separate labels in html:

<label for="months" id="months" >Months</label>
<label for="weeks" id="weeks">Weeks</label>
<label for="fortnights" id="fortnights">Fortnights</label>
<label for="quarters" id="quarters">Quarters</label>

I have defined a java script function to hide these labels when the page loads. I have a separate java script function to only show one label at a time depending on what has been selected in a different drop down. This works as it should.

My issue in this scenario is that the labels do not display in the desired location on the page. They display in different places, is there a way to get these labels to display in the same place on the page and not in different places?

Cheers, Mike

Hi Matt, Here is my JavaScript function to hide the labels on page load:

<script type="text/javascript">
            function hideLabels()
            {
                //alert("Entered hideLabels function");
                document.getElementById("months").style.visibility = "hidden";
                document.getElementById("weeks").style.visibility = "hidden";
                document.getElementById("fortnights").style.visibility = "hidden";
                document.getElementById("quarters").style.visibility = "hidden";
            }
        </script>

Here is my Javascript function to only display one label at a time depending on the value of another drop down field on the page:

 <script type="text/javascript">
            function FrequencyChange(value)
            {
                if (value == 1)
                {
                    document.getElementById("months").style.visibility = "visible";
                    document.getElementById("weeks").style.visibility = "hidden";
                    document.getElementById("quarters").style.visibility = "hidden";
                    document.getElementById("fortnights").style.visibility = "hidden";
                }
                if (value == 2)
                {
                    document.getElementById("weeks").style.visibility = "visible";
                    document.getElementById("months").style.visibility = "hidden";
                    document.getElementById("quarters").style.visibility = "hidden";
                    document.getElementById("fortnights").style.visibility = "hidden";
                }
                if (value == 3)
                {
                    document.getElementById("quarters").style.visibility = "visible";
                    document.getElementById("months").style.visibility = "hidden";
                    document.getElementById("weeks").style.visibility = "hidden";
                    document.getElementById("fortnights").style.visibility = "hidden";
                }
                if (value == 4)
                {
                    document.getElementById("fortnights").style.visibility = "visible";
                    document.getElementById("months").style.visibility = "hidden";
                    document.getElementById("weeks").style.visibility = "hidden";
                    document.getElementById("quarters").style.visibility = "hidden";
                }
            }

Thanks, Mike

Upvotes: 0

Views: 132

Answers (3)

Raaghu
Raaghu

Reputation: 2014

Instead of visibility property , you need to use display property for this purpose

visibility : when hidden , element is hidden from users but the element display area is still left as is

display : when none , element is removed from the DOM , thus the element display area is recovered

@Mike check my plunker for your usecase using display property

https://plnkr.co/edit/h0dDyZZbmZBbbqfg50Rm

function hideLabels() {
  //alert("Entered hideLabels function");
  document.getElementById("months").style.display = "none";
  document.getElementById("weeks").style.display = "none";
  document.getElementById("fortnights").style.display = "none";
  document.getElementById("quarters").style.display = "none";
}

Upvotes: 0

WilsonWilson
WilsonWilson

Reputation: 166

You can include it on the html too.

<label for="months" id="months" style="position:absolute;top:0;left:0;">Months</label>
<label for="weeks" id="weeks"style="position:absolute;top:0;left:0;">Weeks</label>
<label for="fortnights" id="fortnights"style="position:absolute;top:0;left:0;">Fortnights</label>
<label for="quarters" id="quarters" style="position:absolute;top:0;left:0;">Quarters</label>

Upvotes: 0

WilsonWilson
WilsonWilson

Reputation: 166

You can use css:

    label{position:absolute;top:0;left:0;}

Upvotes: 1

Related Questions