Looking to refine your search in materialize css/bootstrap when utilizing cards?

Question

Looking to refine your search in materialize css/bootstrap when utilizing cards?

I recently embarked on a project to create an HTML page utilizing Materialize CSS and Bootstrap. My goal was to incorporate cards representing YouTube videos, along with a search bar that could filter through the cards and display the relevant one. However, the solution I found only partially met my expectations.

.searchBox{
    margin: 4em;
}

.grid-container{
    display: grid;
    border: 1px solid black;
    grid-template-columns: 70% 10% 20%;
    margin: 4em;
}

.grid-item1{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    grid-gap: 20px;
    border: 1px solid black;
}


.grid-item2{
    border: 1px solid black;
}
.grid-item3{
    border: 1px solid black;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <title>Document</title>
    <link href="./style.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>

If you test the code snippet, you'll notice that searching for "aaa/bbb/ccc" causes the card image and "gsp430/.../..." portion to disappear entirely. Similarly, if you search for something like "gsp430," the card title and image vanish. I'm seeking a solution that would display the complete card despite the search term. Can anyone suggest a workaround?

javascript html css bootstrap-4 materialize

Answer 1

Answer №1

Using Bootstrap 3 .JS (from bootstrapcdn) alongside Bootstrap 5 .CSS (from jsdelivr) may lead to layout issues, especially with components like Cards. It's best to stick to one version to avoid conflicts and ensure consistency.

Answer 2

Using Bootstrap 3 .JS (from bootstrapcdn) alongside Bootstrap 5 .CSS (from jsdelivr) may lead to layout issues, especially with components like Cards. It's best to stick to one version to avoid conflicts and ensure consistency.

Answer 3

Answer №2

I made modifications to your code in two key areas:

The filter will now target only .card-content elements:
```
$("#myDIV .card-content").filter(...)
```
The toggle() function is applied to the closest parent of the filtered element:
```
$(this).closest(".card").toggle(vis);
```

The variable vis is now computed as

let vis=$(this).text().toLowerCase().indexOf(value) > -1;

.

$(document).ready(function() {
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#myDIV .card-content").filter(function() {
      let vis = $(this).text().toLowerCase().indexOf(value) > -1;
      $(this).closest(".card").toggle(vis)
    });
  });
});

document.addEventListener('DOMContentLoaded', function() {
      var elems = document.querySelectorAll('.sidenav');
      M.Sidenav.init(elems);
});

.searchBox {
  margin: 4em;
}

.grid-container {
  display: grid;
  border: 1px solid black;
  grid-template-columns: 70% 10% 20%;
  margin: 4em;
}

.grid-item1 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  grid-gap: 20px;
  border: 1px solid black;
}

.grid-item2 {
  border: 1px solid black;
}

.grid-item3 {
  border: 1px solid black;
}

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d4b6bbbba0a7a0a6b5a494e1fae5fae7">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <title>Document</title>
  <link href="./style.css" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>

... (Remaining HTML code omitted for brevity) ...

</body>

Answer 4

I made modifications to your code in two key areas:

The filter will now target only .card-content elements:
```
$("#myDIV .card-content").filter(...)
```
The toggle() function is applied to the closest parent of the filtered element:
```
$(this).closest(".card").toggle(vis);
```

The variable vis is now computed as

let vis=$(this).text().toLowerCase().indexOf(value) > -1;

.

$(document).ready(function() {
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#myDIV .card-content").filter(function() {
      let vis = $(this).text().toLowerCase().indexOf(value) > -1;
      $(this).closest(".card").toggle(vis)
    });
  });
});

document.addEventListener('DOMContentLoaded', function() {
      var elems = document.querySelectorAll('.sidenav');
      M.Sidenav.init(elems);
});

.searchBox {
  margin: 4em;
}

.grid-container {
  display: grid;
  border: 1px solid black;
  grid-template-columns: 70% 10% 20%;
  margin: 4em;
}

.grid-item1 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  grid-gap: 20px;
  border: 1px solid black;
}

.grid-item2 {
  border: 1px solid black;
}

.grid-item3 {
  border: 1px solid black;
}

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d4b6bbbba0a7a0a6b5a494e1fae5fae7">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <title>Document</title>
  <link href="./style.css" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>

... (Remaining HTML code omitted for brevity) ...

</body>

Looking to refine your search in materialize css/bootstrap when utilizing cards?

Answer №1

Answer №2

Similar questions

Issue with integrating MDBootstrap 5 with Django version 2.1.15 not resolved

The CSS sibling combinator is not functioning as expected

Is there a way to verify the phone number input field on my registration form along with the country code using geolocation

Issue encountered when attempting to utilize filters with strapi V4 graphql and nextjs, functionality not working

Guide to importing a JSON file in a Node.js JavaScript file

Guide to attempting an asynchronous function again in JavaScript with a time delay

"Organizing an object array based on a specified order array - a step-by-step

What is the best method for creating interactive carousel indicators that will seamlessly navigate to the corresponding carousel item when pressed?

Having trouble with importing a variable in an Express application? You may encounter this error message: "Route.get() must

Struggling to get my layout perfectly centered

Utilizing PHP to Assign Attributes to Form Elements

How do you locate elements using text in Selenium with special characters like &#65279?

Is there a way to eliminate spaces from a string using react-native?

Using jQuery to create a draggable element with a visual indicator that represents a link between two items

Optimal method for arranging Vue components

Struggling with getting basic CSS to work with React's MUI framework

Strategies for addressing frontend challenges in Bootstrap 4

Guide on parsing a JSON object in JavaScript

Choose All Box for Dynamic Tables in AngularJS

Display only one field and hide the other field using a jQuery IF/ELSE statement