CSS Display Not Working

CSS - display: none; not working

Remove display: block; in the div #tfl style property

<div id="tfl" style="display: block; width: 187px; height: 260px;

Inline styles take priority over an external CSS file.

display:none; not working but visibility:hidden; does

The only reason for display: none; not to be working is, if it's overwritten by other CSS with higher precedence.

Check if you are using a CSS library like Bootstrap or TailwindCSS that could be overwriting your display: none; rule.

If you need to retain using those libraries, you can try using the !important property like this: display: none !important;

Edit:

After looking at your HTML my initial presumption proved to be true.
The Font Awesome class fa has an inline property display: inline-block; that overwrites your display property.

CSS style=display:block not working

The problem with your style is the float: left, you have to clear the "floatness".
At the p tag, include the clear:both, it tells the browser that nothing can float at its left or right.

<div class="abcd"  style="margin-left:10px;">
    <form id='some'>
        <fieldset style="display:block;float:left;">
            <input class="yy" id="sss" type="radio" name="group0" value="aaa"/> ABC

            <input class="yy" id="sss" type="radio" name="group0" value="aaa"/> ABC

            <input class="yy" id="sss" type="radio" name="group0" value="aaa"/> ABC

        </fieldset>
        <p style="clear:both">
            <input placeholder="Enter Name/Value" name="xxx" id="xxx" size="40" style="display:block;float:left;">
            <button type="button" id="xxx" style="width:100;">Process</button>
        </p>
    </form>
</div>

CSS trouble with display:none not being recognized

The problem is that you are initially getting the display property value via the style property of the object. But, that property only returns "inline" styles applied to an element, like this:

<div style="display:none;">something</div>

Since you are setting display:none via a separate "internal style" and not an inline style, the initial value returned from x.style.display is an empty string, so then your code execution falls into the else branch of your if statement and a new inline style is then set for the element. This is why it works on the second click - - the first click actually creates an inline style where none existed before, and therefore the second click works.

You should be using window.getComputedStyle(x).display; to get the value because .getComputedStyle() gets a property value regardless of where or how it was set upon the element.

function myFunction() {    var x = document.getElementById("myDIV");    var displayValue = window.getComputedStyle(x).display;    if (displayValue === "none") {        x.style.display = "block";    } else {        x.style.display = "none";    }}
#myDIV {    display:none;    width: 100%;    padding: 50px 0;    text-align: center;    background-color: lightblue;    margin-top: 20px;}
<p>Click the button to toggle between hiding and showing the DIV element:</p>
<button onclick="myFunction()">Click</button>
<div id="myDIV">  This is my DIV element.</div>

CSS display property not working as expected

First, you have more than one element with the same ID. Element IDs should be unique within the entire document.

So, without muliple IDs #tracks and #mile-buff, here is the HTML: 

<div class="legend-body" id= "legend">
  <b>Railroad Layers</b>
  <div class='train-layer-options'>
    <div class="layer-line tracks" id="tracks"></div>
    <a class="layer-text">Tracks<br></a>
    <div class="layer-fill one-mile" id="mile-buff"></div>
    <a class="layer-text">Sound Buffer (1 mile)<br></a>
    <div class="layer-fill half-mile"></div>
    <span class="layer-text">Sound Buffer (1/2 mile)<br></span>
    <div class="layer-fill onehun-yrds"></div>
    <span class="layer-text">Sound Buffer (100 yards)<br></span>
  </div>
  <b>Bike Lane Layers</b>
  <div class='bike-layer-options'>
    <div class="layer-line hclanes"></div>
    <span class="layer-text">High Comfort Lanes<br></span>
    <div class="layer-line lclanes"></div>
    <span class="layer-text">Low Comfort Lanes<br></span>
  </div>
  <b>Multiuse Trail Layers</b>
  <div class='bike-layer-options'>
    <div class="layer-line paved"></div>
    <span class="layer-text">Paved Trails<br></span>
    <div class="layer-line natural"></div>
    <span class="layer-text">Natural Trails<br></span>
  </div>
</div>

It will already solve the alignment issue, because it will remove some unnecessary CSS.

Then, on .layer-text class, you can replace identation for left margin and add cursor: pointer.

.layer-text {
  display: block;
  margin-left: 40px;
  cursor: pointer;
}

Finally, you just have to add cursor: pointer on any ID you want.

Or on .layer-fill class if you prefer.

Javascript style.display not working and is overwritten by css?

Solved it. You are changing display property of images inside #cursor but then you are changing display property of #cursor element leaving those images intact. You are just referencing incorrect DOM elements.

The only thing you need to change is the code below.

This:

var   prevgif = document.getElementById("prev--cursor"),
      nextgif = document.getElementById("next--cursor"),
      leftzone = document.getElementById("left"),
      rightzone = document.getElementById("right");

To that:

  var   prevgif = document.querySelector("#prev--cursor img"),
        nextgif = document.querySelector("#next--cursor img"),
        leftzone = document.getElementById("left"),
        rightzone = document.getElementById("right");

Please find the code snippet below with working implementation.


Leave a reply



Submit