css Question posted in
Some basic documentation can be found here.

Css – Hide grid items when space is not available

I have a grid container that has 4 items. The first 2 items and the 4th items will always take up similar space and the 3 items can be long or short and it must take up all the leftover space as shown below

function handleWidth() {
  const inputValue = document.getElementById("widthInput").value;

  document.getElementsByClassName("grid-container")[0].style["width"] = inputValue + '%';
}
.grid-container {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
}

.grid-container>div {
  padding-right: 10px;
}
<div class="grid-container">
  <div>Jira-123</div>
  <div>Icon</div>
  <div>Summary - This is a summary of jira item</div>
  <div>In progress</div>
</div>
<br />
<br />
<div><input type="number" value="100" id="widthInput" /></div>
<button onclick="handleWidth()">set width</button>

But if you reduce the available space in which the grid container fits (you can do so by entering a value, say 25, in the input field, in the sample given above), you’ll see that the summary/title is shown in multiline.

What I desire to do

As the space reduces, I want to remove the status("In progress" in the above example) and show the "summary/title" with an ellipsis and as the space reduces further, I want to remove the "summary/title" as well. The first grid item i.e. JIRA-123 should not wrap.

Tags:

2

Answers


  1. 0 
    function handleWidth() {
  const inputValue = document.getElementById("widthInput").value;

  document.getElementsByClassName("grid-container")[0].style["width"] = inputValue + '%';
}
    .grid-container {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
}

.grid-container>div {
  padding-right: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-weidth: 0;
  outline: 1px solid red;
}
    <div class="grid-container">
  <div>Jira-123</div>
  <div>Icon</div>
  <div>Summary - This is a summary of jira item</div>
  <div>In progress</div>
</div>
<br />
<br />
<div><input type="number" value="100" id="widthInput" /></div>
<button onclick="handleWidth()">set width</button>
    Login or Signup to reply.
  2. 0

    You can use @media query to implement responsive design.
    Ex, you can hide the third and fourth grid items when the width is 600 pixels or less.

    function handleWidth() {
    const inputValue = document.getElementById("widthInput").value;
    const gridContainer = document.querySelector(".grid-container");
    const summaryItem = gridContainer.querySelector(":nth-child(3)");
    const statusItem = gridContainer.querySelector(":nth-child(4)");

    gridContainer.style["width"] = inputValue + '%';

    statusItem.style.display = inputValue < 50 ? "none" : "";
    summaryItem.style.display = inputValue < 25 ? "none" : "";
}
    .grid-container {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
}

.grid-container>div {
  padding-right: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 600px) {
  .grid-container>div:nth-child(3),
  .grid-container>div:nth-child(4) {
    display: none;
  }
}
    <div class="grid-container">
  <div>Jira-123</div>
  <div>Icon</div>
  <div>Summary - This is a summary of jira item</div>
  <div>In progress</div>
</div>
<br />
<br />
<div><input type="number" value="100" id="widthInput" /></div>
<button onclick="handleWidth()">set width</button>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search