Categories
CSS

How to disable scrolling when touch moving certain element with CSS?

Sometimes, we want to disable scrolling when touch moving certain element with CSS.

In this article, we’ll look at how to disable scrolling when touch moving certain element with CSS.

How to disable scrolling when touch moving certain element with CSS?

To disable scrolling when touch moving certain element with CSS, we set the element’s touch-action CSS style to none.

For instance, we write

touch-action: none;

to disable touch on the element when moving certain element when we add this style to our CSS.

Conclusion

To disable scrolling when touch moving certain element with CSS, we set the element’s touch-action CSS style to none.

Categories
CSS

How to set the placeholder for contenteditable div with JavaScript?

Sometimes, we want to set the placeholder for contenteditable div with JavaScript.

In this article, we’ll look at how to set the placeholder for contenteditable div with JavaScript.

How to set the placeholder for contenteditable div with JavaScript?

To set the placeholder for contenteditable div with JavaScript, we can set the content CSS style.

For instance, we write

[contenteditable="true"]:empty:not(:focus):before {
  content: attr(data-ph);
  color: grey;
  font-style: italic;
}

to add a placeholder into the contenteditable div with content: attr(data-ph).

This means we use the value of the data-ph as the placeholder content.

We use the [contenteditable="true"]:empty:not(:focus):before pseudo-element to select the contenteditable element and place the content as the first child of it.

This will make the content text show at the start of the element.

Conclusion

To set the placeholder for contenteditable div with JavaScript, we can set the content CSS style.

Categories
CSS

How to open another modal in modal with Bootstrap?

Sometimes, we want to open another modal in modal with Bootstrap.

In this article, we’ll look at how to open another modal in modal with Bootstrap.

How to open another modal in modal with Bootstrap?

To open another modal in modal with Bootstrap, we can set the z-index of the modals.

For instance, we write

<a data-bs-toggle="modal" href="#myModal" class="btn btn-primary">
  Launch modal
</a>

<div class="modal" id="myModal">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Modal title</h4>
        <button
          type="button"
          class="btn-close"
          data-bs-dismiss="modal"
          aria-hidden="true"
        ></button>
      </div>
      <div class="container"></div>
      <div class="modal-body">
        Content for the dialog / modal goes here.
        <a data-bs-toggle="modal" href="#myModal2" class="btn btn-primary"
          >Launch modal</a
        >
      </div>
      <div class="modal-footer">
        <a href="#" data-bs-dismiss="modal" class="btn btn-outline-dark"
          >Close</a
        >
      </div>
    </div>
  </div>
</div>

<div class="modal" id="myModal2" data-bs-backdrop="static">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">2nd Modal title</h4>
        <button
          type="button"
          class="btn-close"
          data-bs-dismiss="modal"
          aria-hidden="true"
        ></button>
      </div>
      <div class="container"></div>
      <div class="modal-body">
        Content for the dialog / modal goes here. Content for the dialog / modal
        goes here.
      </div>
      <div class="modal-footer">
        <a href="#" data-bs-dismiss="modal" class="btn btn-outline-dark"
          >Close</a
        >
        <a href="#" class="btn btn-primary">Save changes</a>
      </div>
    </div>
  </div>
</div>

to add the modals.

Then we set the z-index of the modals by writing

.modal:nth-of-type(even) {
  z-index: 1062 !important;
}
.modal-backdrop.show:nth-of-type(even) {
  z-index: 1061 !important;
}

so the 2nd modal will show on top of the first one.

Conclusion

To open another modal in modal with Bootstrap, we can set the z-index of the modals.

Categories
CSS

How to change the mouse cursor on mouse over to anchor-like style with CSS?

Sometimes, we want to change the mouse cursor on mouse over to anchor-like style with CSS.

In this article, we’ll look at how to change the mouse cursor on mouse over to anchor-like style with CSS.

How to change the mouse cursor on mouse over to anchor-like style with CSS?

To change the mouse cursor on mouse over to anchor-like style with CSS, we set the cursor style to pointer.

For instance, we write

#myDiv {
  cursor: pointer;
}

to set the cursor style of the element with ID myDiv to pointer so that when we move our mouse into the element, the pointer will show the hand icon that’s displayed for links by default.

Conclusion

To change the mouse cursor on mouse over to anchor-like style with CSS, we set the cursor style to pointer.

Categories
CSS

How to hide a option in a select menu with CSS?

Sometimes, we want to hide a option in a select menu with CSS.

In this article, we’ll look at how to hide a option in a select menu with CSS.

How to hide a option in a select menu with CSS?

To hide a option in a select menu with CSS, we can add the hidden attribute to the option element we want to hide.

For instance, we write

<select>
  <option>Option1</option>
  <option>Option2</option>
  <option hidden>Hidden Option</option>
</select>

to hide the last option by adding the hidden attribute to the last option element.

Conclusion

To hide a option in a select menu with CSS, we can add the hidden attribute to the option element we want to hide.

If you like the content of this blog, subscribe to my email list to get exclusive articles not available to anyone else.