Cypress Codebuild Project Fails To Start

I have a codebuild cypress project that runs a buildspec file in order to run all of my cypress tests. I have recently updated to cypress v12 and node 16 and now when I run my codebuild project I get the following error:

/root/.cache/Cypress/12.0.0/Cypress/Cypress: error while loading shared libraries: libatk-bridge-2.0.so.0: cannot open shared object file: No such file or directory. 
Platform: linux-x64 (Amazon Linux - 2 (Karoo))

Does anyone know how to fix this?

I have tried a few things like:

yum install gtk3

but nothing is working.

Has anyone run into this with cypress v12?

Regex expression for hyphenating file name in a VS Code snippet

I’m trying to create a regex for a custom VS Code snippet I’m writing. Im taking the file name that’s in camel case format and modifying it so a hyphen separates each word (before the uppercase letter) and then transforms the entire thing to lowercase. For example, if my file name was titled myFileName, the result would be my-file-name. Appreciate the help in advance!

I’m able to create the expression for hyphenating between words with ([a-z])([A-Z])/$1-$2/ but I’m not positive the if that’s the best way to do that. After that expression I’m not able to then transform to lower case

Download HTML canvas as PNG

How can i allow the users of my website to download the content of an HTML canvas as a PNG file?

The problem is, that I am drawing images from different origins onto this canvas. (The user can insert the URL of an image, and that is drawn onto the canvas).
Therefore I cannot use toDataURL(), toBlob() or similar, because they will throw a

DOMException: The operation is insecure.

for cross-origin reasons.
As far as I know, the goal of this restriction is to prevent the website from sending the canvas data back to the server, which could leak private data of the user, for example if only he had access to the URL of the image that was drawn.

But allowing the user to download the canvas as a png is not a security risk itself, which makes me think there must be a safe way to do it.
But how?

Or is there a way to load the image from a public point of view, instead of the users point of view, which would also get rid of the security risk (assuming my understanding for this restriction is right)?

how to make regex pattern to appear based on selection of dropdown using angular15

i am using angular15, here i have got dropdown based on selection of dropdown value, the pattern description is given as dropdown viewValue, so on basis of selection of value, the same regex pattern must be added as pattern to input with placeholder. so basically what ever value we select that regex pattern must be there as part of input and validation to be shown accordingly.

Demo

Azure data-bricks rest api blocked by cors policy while making request through ReactJs web app

Hi am trying to create the trigger button to my react web app. I am getting issue to handle cors policy.
I tried though the postman and It worked fine but i am having issue with reactjs. Also, I don’t have any server as a proxy like nodejs to handle.
Is there any way we can handle cors within reactJs ?

import React, { useState } from "react";

function App() {
  const [response, setResponse] = useState("");

  const handleClick = async () => {
    const url = "https:XXXXXXX";
    const jobId = "XXXXXXX"
    const token = "XXXXXXX";

    const response = await fetch(url, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        Authorization: `Bearer ${token}`,
      },
      body: JSON.stringify({
        job_id:jobId
      ),
    });

    const result = await response.json();
    setResponse(result);
  };

  return (
    <div>
      <button onClick={handleClick}>Run Job</button>
      {response && <p>{response}</p>}
    </div>
  );
}

export default App;

How to Solve Arrow Keys Not Working Properly with Autocomplete for Bootstrap 5

I have an issue with pressing arrow keys inside an autocomplete menu. Tabbing down the menu seems to work, but the arrow key when pressed (twice) disables other keys and throws an error in the console for every press after. I believe the issue relates to the integration of autocomplete in bootstrap 5. I researched this issue and can’t find any ways to solve it.

Bootstrap 5 script that works with autocomplete:
https://www.cssscript.com/autocomplete-typeahead-bootstrap-5/

The error being thrown in the console upon the second press of an arrow key:

Uncaught TypeError: Cannot read properties of undefined (reading 'nextElementSibling')
at Object.next (selector-engine.js:63:24)
at hi._getMenuElement (dropdown.js:270:27)
at new hi (dropdown.js:103:23)
at hi.getOrCreateInstance (base-component.js:55:41)
at HTMLDivElement.dataApiKeydownHandler (dropdown.js:453:31)
at HTMLDocument.n (event-handler.js:119:21)
next @ selector-engine.js:63
_getMenuElement @ dropdown.js:270
hi @ dropdown.js:103
getOrCreateInstance @ base-component.js:55
dataApiKeydownHandler @ dropdown.js:453
n @ event-handler.js:119

Tested on Chrome 110.0.5481.178 and Firefox 111.0.1 on Windows 10.

I made a fiddle example of the issue:
https://jsfiddle.net/q5o698mh/1/

I am not sure how to solve this. Any ideas are welcomed.

Passing a variable declare in beforeEach to describe Jest

I have a describe.each in which i want to pass in variables. I am trying to read these variables from a JSON file and then pass it into the describe test.

I get the error
Error: .each` called with an empty Array of table data.

My code is as follows:

let accountsTest = []

beforeEach(() => {
  fs.readFile('./test/utils/Files/connectv4.json', 'utf8', function (err, data) {
    if (err) throw err;
    console.log(data);
    accountsTest = data
  })
})



let country = 
    [
        "en",
        "fr"
    ]   

    describe.each(accountsTest)('Connectv4 - Key: %s', (stringKey) => {    

        test.each(country)(`key: ${stringKey} is contained in the locale: %s`, async (locale) => {
          const Output = await sharedFunctions.verifyTranslationIsAvailable(locale, stringKey)


          
          await expect(Output).toBe(200)
        })
      })
  

It doesn’t look like the beforeEach is actually assigning anything or it isnt being run before the describe?

Confused about comma separated functions looking at chrome extension code

I’m attempting to learn more about chrome extensions and the best way I learn is by looking at stuff that works and trying to understand what it is doing. Well I’ve gotten a decent understanding of one I’ve been looking at but I see quite a few odd things that I’m not really sure why they are written that way. Here is a snippet of what I’m looking at:

chrome.runtime.onMessage.addListener((o, s, c) => {
  c(),
  (function(o, s, c) {
    <code>
  })
  (o.url, o.headers)
});

What I don’t understand is why the first 2 statements are separated by a comma while the 3rd is just wrapped in parenthesis. If I remove the comma, then there is an error in the console stating

Error in event handler: TypeError: c(...) is not a function

It almost seems like somehow that is linking the c function with the function after the comma. I really don’t know what is happening with it and it’s not the only place that I see it. In the background.js the chrome.webRequest.onSendHeaders.addListener() is seperated by a comma from the next function of chrome.runtime.onMessage.addListener()

chrome.webRequest.onSendHeaders.addListener(
  <code>
),
chrome.runtime.onMessage.addListener(
  <other code>
)

Tried to look up as best I could but couldn’t quite find anything that answered my question. Can anyone explain it to me?

how to save scanned data from TWAIN?

So I’m using TWAIN to scan a document(quotation table i needed in billing) and when the document is scanned the data should be saved in my data base bade in my rubrique_facturations table , so this is my controller:

<?php

namespace AppHttpControllers;

use AppModelsRubrique_facturation;
use IlluminateHttpRequest;
use IlluminateSupportFacadesDB;

class Rubrique_facturationController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return IlluminateHttpResponse
     */
    public function index()
    {
        $rubrique = Rubrique_facturation::all();

        return view('facturation.index', ['facturations' => $rubrique]);
    }
    public function scan(Request $request)
    {
        // Get the scanned data from the POST request
        $scannedData = $request->input('scanned_data');

        // Validate the scanned data before storing it
        $request->validate([
            'scanned_data' => 'required|string|max:255',
        ]);

        // Convert the base64-encoded scanned data to binary
        $binaryData = base64_decode($scannedData);

        // Store the scanned data in your database
        $scan = new Rubrique_facturation;
        $scan->scan_data = $binaryData;
        $scan->save();

        // Redirect the user to a success page or back to the form page
        return redirect()->back()->with('success', 'Scanned data has been stored successfully.');
    }
    public function saveScan(Request $request)
    {
        // récupération des données scannées

        $designation = $_POST['designation'];
        $quantite = $_POST['quantite'];
        $prix_unitaire  = $_POST['prix_unitaire '];
        $MontantHT = $_POST['MontantHT'];
        $totaleHT = $_POST['totaleHT'];
        $tva = $_POST['tva'];
        $TotalTtc = $_POST['TotalTtc'];
        $unite_rebrique_financier = $_POST['unite_rebrique_financier'];

        // sérialisation des colonnes qui peuvent contenir de 1 jusqu'à n valeurs
        $designation = serialize($designation);
        $quantite = serialize($quantite);
        $prix_unitaire  = serialize($prix_unitaire);
        $MontantHT = serialize($MontantHT);
        $totaleHT = serialize($totaleHT);
        $tva = serialize($tva);
        $TotalTtc = serialize($TotalTtc);
        $unite_rebrique_financier = serialize($unite_rebrique_financier);

        // insertion des données dans la table
        DB::table('rubrique_facturation')->insert([

            'designation' => $designation,
            'quantite' => $quantite,
            'prix_unitaire ' => $prix_unitaire,
            'MontantHT' => $MontantHT,
            'totaleHT' => $totaleHT,
            'tva' => $tva,
            'TotalTtc' => $TotalTtc,
            'unite_rebrique_financier' => $unite_rebrique_financier,
        ]);

        // désérialisation des colonnes pour récupérer les valeurs stockées
        $designation = unserialize($designation);
        $quantite = unserialize($quantite);
        $prix_unitaire  = unserialize($prix_unitaire);
        $MontantHT = unserialize($MontantHT);
        $totaleHT = unserialize($totaleHT);
        $tva = unserialize($tva);
        $TotalTtc = unserialize($TotalTtc);
        $unite_rebrique_financier = unserialize($unite_rebrique_financier);
    }
    /**
     * Show the form for creating a new resource.
     *
     * @return IlluminateHttpResponse
     */
    public function create()
    {
        //
    }

    /**
     * Store a newly created resource in storage.
     *
     * @param  IlluminateHttpRequest  $request
     * @return IlluminateHttpResponse
     */
    public function store(Request $request)
    {

        $rubrique = new Rubrique_facturation();
        $rubrique->designation = $request->input('designation');
        $rubrique->quantite = $request->input('quantite');
        $rubrique->prix_unitaire = $request->input('prix_unitaire');
        $rubrique->MontantHT = $request->input('MontantHT');
        $rubrique->totaleHT = $request->input('totaleHT');
        $rubrique->tva = $request->input('tva');
        $rubrique->TotalTtc = $request->input('TotalTtc');
        $rubrique->unite_rebrique_financier = $request->input('unite_rebrique_financier');
        $rubrique->store();
        return redirect('facturation.index');
    }

    /**
     * Display the specified resource.
     *
     * @param  int  $id
     * @return IlluminateHttpResponse
     */
    public function show($id)
    {
        //
    }

    /**
     * Show the form for editing the specified resource.
     *
     * @param  int  $id
     * @return IlluminateHttpResponse
     */
    public function edit($id)
    {
        //
    }

    /**
     * Update the specified resource in storage.
     *
     * @param  IlluminateHttpRequest  $request
     * @param  int  $id
     * @return IlluminateHttpResponse
     */
    public function update(Request $request, $id)
    {
        $rubrique = Rubrique_facturation::find($id);
        $rubrique = new Rubrique_facturation();
        $rubrique->designation = $request->input('designation');
        $rubrique->quantite = $request->input('quantite');
        $rubrique->prix_unitaire = $request->input('prix_unitaire');
        $rubrique->MontantHT = $request->input('MontantHT');
        $rubrique->totaleHT = $request->input('totaleHT');
        $rubrique->tva = $request->input('tva');
        $rubrique->TotalTtc = $request->input('TotalTtc');
        $rubrique->unite_rebrique_financier = $request->input('unite_rebrique_financier');
        $rubrique->store();
        return redirect('facturation.index');
    }

    /**
     * Remove the specified resource from storage.
     *
     * @param  int  $id
     * @return IlluminateHttpResponse
     */
    public function destroy($id)
    {
        //
    }
}

and this is my view of scan and save scanned data


<!DOCTYPE html>
<html>
<head>
    <title>Scan d'image</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <div class="row justify-content-center mt-5">
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">
                        <h4 class="text-center">Scannez votre document</h4>
                    </div>
                    <div class="card-body text-center">
                        <div id="dwtcontrolContainer"></div>
                        <div class="mt-5 d-flex justify-content-end">
                            <form method="post" action="save.php">
                                <input type="hidden" id="designation" name="designation">
                                <input type="hidden" id="quantite" name="quantite">
                                <input type="hidden" id="prix_unitaire" name="prix_unitaire ">
                                <input type="hidden" id="MontantHT" name="MontantHT">
                                <input type="hidden" id="totaleHT" name="totaleHT">
                                <input type="hidden" id="tva" name="tva" value="">
                                <input type="hidden" id="TotalTtc" name="TotalTtc">
                                <input type="hidden" id="unite_rebrique_financier" name="unite_rebrique_financier">
                                 <button type="button" class="btn btn-success mr-2" onclick="saveData(scannedData)">Enregistrer</button>
                            </form>
                            <button type="button" class="btn btn-primary mr-2" onclick="AcquireImage()">Scaner</button>
                            <button type="button" class="btn btn-danger mr-2" onclick="LoadImage();">Charger un document</button>
                            <button type="button" class="btn btn-secondary mr-2">Annuler</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <?php
    // Connexion à la base de données
    $serverName = "127.0.0.1";
    $connectionOptions = array(
        "Database" => "cth",
        "UID" => "hanane",
        "PWD" => "16011998"
    );
    $conn = sqlsrv_connect($serverName, $connectionOptions);
    if ($conn === false) {
        die(print_r(sqlsrv_errors(), true));
    }

    // Vérifier la connexion

    // Récupérer les données envoyées depuis la page HTML
    $designation = isset($_POST['designation']) ? $_POST['designation'] : '';
$quantite = isset($_POST['quantite']) ? $_POST['quantite'] : '';
$prix_unitaire = isset($_POST['prix_unitaire']) ? $_POST['prix_unitaire'] : '';
$MontantHT = isset($_POST['MontantHT']) ? $_POST['MontantHT'] : '';
$totaleHT = isset($_POST['totaleHT']) ? $_POST['totaleHT'] : '';
$tva = isset($_POST['tva']) ? $_POST['tva'] : '';
$TotalTtc = isset($_POST['TotalTtc']) ? $_POST['TotalTtc'] : '';
$unite_rebrique_financier = isset($_POST['unite_rebrique_financier']) ? $_POST['unite_rebrique_financier'] : '';
    // Préparer la requête SQL pour insérer les données dans la base de données
    $sql = "INSERT INTO rebrique_facturations (designation, quantite, prix_unitaire, MontantHT, totaleHT, tva, TotalTtc, unite_rebrique_financier) VALUES (?, ?, ?, ?, ?, ?, ?, ?)";
    $params = array($designation, $quantite, $prix_unitaire, $MontantHT, $totaleHT, $tva, $TotalTtc, $unite_rebrique_financier);
    $stmt = sqlsrv_prepare($conn, $sql, $params);

    if (!$stmt) {
        die(print_r(sqlsrv_errors(), true));
    }

    // Exécuter la requête SQL
    if (sqlsrv_execute($stmt)) {
        echo "Données enregistrées avec succès.";
    } else {
        echo "Erreur: " . $sql . "<br>" . print_r(sqlsrv_errors(), true);
    }

    // Fermer la connexion à la base de données
    sqlsrv_close($conn);
    ?>


    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://unpkg.com/@popperjs/core@2"></script>
    <script src="Resources/dynamsoft.webtwain.initiate.js"></script>
    <script src="Resources/dynamsoft.webtwain.config.js"></script>



    <script type="text/javascript">
        var DWObject;

        function Dynamsoft_OnReady() {
            DWObject = Dynamsoft.DWT.GetWebTwain("dwtcontrolContainer");
        }
        function AcquireImage() {
            if (DWObject) {
                DWObject.SelectSourceAsync()
                .then(function () {
                    return DWObject.AcquireImageAsync({
                        IfDisableSourceAfterAcquire: true,
                    });
                })
                .then(function (result) {
                    console.log(result);
                })
                .catch(function (exp) {
                    console.error(exp.message);
                })
                .finally(function () {
                    DWObject.CloseSourceAsync().catch(function (e) {
                        console.error(e);
                    });
                });
            }
        }
        function LoadImage() {
            if (DWObject) {
                DWObject.LoadImageEx("", 5)
                    .then(function () {
                        console.log("Image chargée");
                    })
                    .catch(function (err) {
                        console.error(err.message);
                    });
            }
        }

            function saveData() {
                var formdata = new FormData();
                formdata.append('scannedData', scannedData);
                formdata.append('designation', document.getElementById('designation').value);
                formdata.append('quantite', document.getElementById('quantite').value);
                formdata.append('prix_unitaire', document.getElementById('prix_unitaire').value);
                formdata.append('MontantHT', document.getElementById('MontantHT').value);
                formdata.append('totaleHT', document.getElementById('totaleHT').value);
                formdata.append('tva', document.getElementById('tva').value);
                formdata.append('TotalTtc ', document.getElementById('TotalTtc ').value);
                formdata.append('unite_rebrique_financier', document.getElementById('unite_rebrique_financier').value);
                var xhr = new XMLHttpRequest();
                xhr.open('POST', 'save.php', true);
                xhr.onload = function () {
                    if (this.status == 200) {
                        alert('Data saved successfully!');
                    } else {
                        alert('Error saving data!');
                    }
                };
                xhr.send(formdata);
            }

</script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

I am blocked didn’t find anything on youtube and the documentation didn’t contain much info

Issue with programming a firebase cloud function which deletes documents in a collection if certain conditions are met

I have a ProductDatabase collection which stores all the products I’m displaying on my app. Each document in the collection has a timestamp field called ‘SBD’ which represents the sell by date of each item. I have created and uploaded a cloud function which checks the each item in the database every 2 hours to check that every items SBD field has not passed. This is the function:

const functions = require("firebase-functions");
const admin = require("firebase-admin");
admin.initializeApp();

exports.delete = functions
    .region("europe-west2")
    .pubsub.schedule("every 2 hours").onRun((context) => {
      const productsRef = admin.firestore().collection("TestDatabase");

      const query = productsRef.where("SBD", "<", Date.now());

      return query.get()
          .then((querySnapshot) => {
            const batch = admin.firestore().batch();

            querySnapshot.forEach((doc) => {
              batch.delete(doc.ref);
            });

            return batch.commit();
          });
    });

This program uploads appears in the firebase cloud functions console and says it’s being invoked every 2 hours however no products are deleted from the TestDatabase even though they should all be deleted. The index.js file is stored in a bucket in the google cloud console which has all the necessary permissions. The database and cloud function are also in the same region.

navigate.push is not redirecting to another page

Im trying to redirect the user after a successful log in. So everything works but when it comes to redirecting, it doesn’t work.
Im using react-router-dom v6 so I had to use useNavigate() instead of useHistory(). Im new to using react and will appreciate any insights on the matter. Here is my code-:

import React,{ useState } from 'react';
import Navbar from '../../../layouts/frontend/Navbar';
import axios from 'axios';
import swal from 'sweetalert';
import { useNavigate } from 'react-router-dom';

function Login() {

    const navigate = useNavigate();

    const [loginInput, setLogin] = useState({
        email: '',
        password: '',
        error_list: [],
    });

    const handleInput = (e) => {
        e.persist();
        setLogin({...loginInput, [e.target.name]: e.target.value });
    }

    const loginSubmit = (e) => {
        e.preventDefault();

        const data = {
            email: loginInput.email,
            password: loginInput.password,
        }

        axios.get('/sanctum/csrf-cookie').then(response => {
            axios.post(`api/login`, data).then(res => {
                if(res.data.status === 200){
                    localStorage.setItem('auth_token', res.data.token);
                    localStorage.setItem('auth_name', res.data.username);
                    swal("Success",res.data.message,"success");
                    navigate.push('/');
                }
                else if(res.data.status === 401)
                {
                    swal("Warning",res.data.message,"warning"); 
                }
                else
                {
                    setLogin({...loginInput, error_list: res.data.validation_errors });
                }
            });
        });
    }

    return(
        <div>
            <Auth/>                
        </div>
    );
}

export default Login;

Dynamically write contents to iframe

When I dynamically write HTML to an iframe somehow the <body> tag is omitted? The body tag hold the font-family etc. but now the whole tag is gone so the HTML document is not shown correctly

const iframe_content = $('#'+iframe_id).contents().find('html');
iframe_content.html(data.html);

contents of data.html

<!DOCTYPE html>
<html style="">
    <head style="">
        <meta charset="utf-8" style="">
        <meta name="color-scheme" content="light dark" style="">
        <meta name="viewport" content="width=device-width, initial-scale=1" style="">
        <style style="">@media (prefers-color-scheme: dark){
.body_inner{background:#000 !important}
.content{border:0}
.content_inner{background:#000 !important;color:#fff !important}
}</style>
    </head>
    <body style="margin:0;padding:0;font-family:arial,helvetica,garuda">
        <div>first element</div>
    </body>
</html>

After the HTML is written to the iframe, the source of the iframe looks like this (the body tag is gone!)

<!DOCTYPE html>
<html style="">
    <head style="">
        <meta charset="utf-8" style="">
        <meta name="color-scheme" content="light dark" style="">
        <meta name="viewport" content="width=device-width, initial-scale=1" style="">
        <style style="">@media (prefers-color-scheme: dark){
.body_inner{background:#000 !important}
.content{border:0}
.content_inner{background:#000 !important;color:#fff !important}
}</style>
    </head>
    <div>first element</div>
</html>

I have tried to validate the HTML via https://validator.w3.org/ and no errors

jsPDF generating two pdf files

I’m using the code below to create a PDF from the png image when the user click the botton “download”. It’s working almost fine. The problem is that is generating two pdf files.

(function($) {
    $(document).ready(function() {
        $('#downloadPDF').click(function() {
            var doc = new jsPDF("p", "mm", "a4");

            function getDataUri(url, callback) {
                var image = new Image();

                image.onload = function() {
                    var canvas = document.createElement('canvas');
                    canvas.width = this.naturalWidth; // or 'width' if you want a special/scaled size
                    canvas.height = this.naturalHeight; // or 'height' if you want a special/scaled size

                    canvas.getContext('2d').drawImage(this, 0, 0);

                    // Get raw image data
                    callback(canvas.toDataURL('image/png').replace(/^data:image/(png|jpg);base64,/, ''));

                    // ... or get as Data URI
                    callback(canvas.toDataURL('image/png'));
                };

                image.src = url;
            }

            // Usage
            getDataUri('/cover.png', function(dataUri) {
                console.log('RESULT:', dataUri);
                doc.addImage(dataUri, 'png', 0, 0, 210, 297, undefined, 'FAST');
                doc.save('download.pdf')
            });
        })
    })
})(jQuery)

I think is a loop, but I can’t figure it out how to solve it.

How to add scroll bar just when div grows after a max-height?

I have a cart:

<nav id="cart">
        <img id="cart_button" alt="cart" src="images/cart.png" />
        <div id="cart_itself">
            <img id="close_cart_button" alt="close" src="images/cancel.png" />
            <h3>Your selection</h3>
            <table>
            </table>
            <h4>Total: 0,00</h4>
        </div>
    </nav>

The table is empty because I am adding lines to it with JavaScript (selecting the table, creating trs, tds, and appending Children. This code is not important because it is working as expected. As I click to add rows, they are being added.

This is my cart:

Open empty cart

This is my CSS code for the cart:

#cart_itself {
    grid-area: cart;
    background-color: white;
    border-radius: 10px;
    display: none;
    padding: 10px;
    max-height: 300px;
    overflow-y: auto;
    grid-template-columns: 12fr 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas:
        "sum close"
        "text text"
        "table table"
}

The cart is initially display:none, when I click the button it changes to display:grid, or when I add something on the cart.

I want to prevent the cart to cover items in my page, so I set a max-height of 300px, as stated above.

Then I wanted to add scroll bars IF the content overflows, but here is my result when I start adding lines to the table:

If I turn the overflow-y property OFF, the content overflows, obviously:

enter image description here

Then if I turn the overflow-y property, the div collapses:

enter image description here

I need the div #cart_itself to grow as I continue adding new items until it reaches a maximum height (300px) and then, if more content is added, a scroll bar is included.

I’ve added a !important to the max-height, no success.

What am I doing wrong? Can you help me fix it?