Dynamic creation Table in postgresQL, node.js sequelize

I’m developing a web app which watches about crypto-coins currency. So now, i’m developing a server and DB, so:
I’ve got 2 main models:
Current Coins – the list of current currency of crypto coins
and CoinInfo – the table which has detailed coin currency for all period
So I use One to Many connection for models, but i want to have the next:
I refresh my Current currency every 5 minutes, so data in this Table always refresh, so i want that on each refresh, the data which will be updated store in other table (for each coin) But i don’t how to do it:

  const sequelize = require("../DB/db");
const DataTypes = require("sequelize");
const CoinDetalInfo = require("./CoinDetalnfo");

const CurrencyList = sequelize.define(
  "Coin",
  {
    id: {
      type: DataTypes.STRING,
      primaryKey: true,
      unique: true,
    },
    name: {
      type: DataTypes.STRING,
    },
    symbol: {
      type: DataTypes.STRING,
    },
    image: {
      type: DataTypes.STRING,
    },
    current_price: {
      type: DataTypes.FLOAT,
    },
    price_change_percentage_24h: {
      type: DataTypes.FLOAT,
    },
    mkt_cap: {
      type: DataTypes.FLOAT,
    },
    total_volume: {
      type: DataTypes.FLOAT,
    },
  },
  { timestamps: true }
);

CurrencyList.hasMany(CoinDetalInfo, {
  onDelete: "cascade",
});

module.exports = CurrencyList;

const sequelize = require("../DB/db");
const DataTypes = require("sequelize");

const CoinDetalInfo = sequelize.define("CoinInfo", {
  price: {
    type: DataTypes.FLOAT,
  },
  mkt_cap: {
    type: DataTypes.FLOAT,
  },
  total_volume: {
    type: DataTypes.FLOAT,
  },
});


module.exports = CoinDetalInfo

And code which fill my First table

const axios = require("axios");
const CurrencyList = require("../Models/CurrencyList");
const URLs = require("../Configs/URLs");

module.exports = {
  FillDataBaseWithCurrencyListInfo: async (req, res) => {
    const collectionCurrencies = await axios.get(
      URLs.CoinGeckoURL,
      (response) => {
        return response;
      }
    );
    const mappedCollectionCurrencies = collectionCurrencies.data.map(
      ({
        id,
        symbol,
        name,
        image,
        market_cap,
        current_price,
        price_change_percentage_24h,
        total_volume,
      }) => ({
        id,
        symbol,
        name,
        image,
        market_cap,
        current_price,
        price_change_percentage_24h,
        total_volume,
      })
    );

    mappedCollectionCurrencies.map(async (item, index) => {
      const found = await CurrencyList.findOne({
        where: { id: item.id },
      });

      if (!found) {
        await CurrencyList.create({
          id: item.id,
          name: item.name,
          symbol: item.symbol,
          image: item.image,
          mkt_cap: item.market_cap,
          current_price: item.current_price,
          price_change_percentage_24h: item.price_change_percentage_24h,
          total_volume: item.total_volume,
        });
      } else {
        await CurrencyList.update(
          {
            name: item.name,
            symbol: item.symbol,
            image: item.image,
            mkt_cap: item.market_cap,
            current_price: item.current_price,
            price_change_percentage_24h: item.price_change_percentage_24h,
            total_volume: item.total_volume,
          },
          {
            where: {
              id: item.id,
            },
          }
        );
      }
    });
    res.send(mappedCollectionCurrencies);
  },
  GetCurrencyListInfoFromDataBase: async (req, res) => {
    const CurrencyListCollection = await CurrencyList.findAll();
    res.json(CurrencyListCollection);
  },
};

Filter Datasource by multiple Values

I have a table with datasource(data) with columns 1-8 but i want to search a value only in columns 1,2,3,4 and return the filteredData. The following code doesn’t work and i cant seem to find why.

What i want to do is: when the user enters a keyword, it should search the table data source( array of objects) but only within 4 columns and return the filtered data.

const filterUserSearch = (data, searchState) => {
  const searchIndex = ["col1", "col2", "col3", "col4"];
  let filteredData = null;
  if (searchState) {
    const lowercasedFilter = searchState?.toLowerCase();
    filteredData = data.filter((item) => {
      return searchIndex.forEach((index) => {
        item[index].toLowerCase().includes(lowercasedFilter);
      });
    });
    console.log("filteredData", filteredData);
  } else {
    return data;
  }
  return filteredData;
};

Different this in Object.defineProperty getter in safari devtools, browser bug?

Run this code in the console in Safari (15.1) and another browser (eg. Brave/Chrome):

const a = {b: {c: 5}}
Object.defineProperty(a.b, 'self', {get () {return this}})
console.log(a.b.self) // expected: {c: 5}
console.log(a) // when expanding a.b.self in inspector, expects the same, ie. {c: 5}

Then, expand the last object, until you get self: (...), now, expanding it should be equivalent to running a.b.self? It is in Brave, but I get the a object in Safari.

Hypothesis: Safari devtools has a bug where it uses the object logged, and not the prop parent, as this.

Or is this UB and I’ve gotten something wrong?

safari result
brave results

JQuery select list item

I want to select an item from a list once it is clicked ive tried appending classes and things like that but the click event doesnt seem to recognise the list items, the items also need be able to be deleted later so i think giving them classes is the best option for this scenario here is my code:

function newElement() {
  $(document).ready(function() {
    $("UL").append($("<li>").html($("input").val()).addClass("Item"));
  });

};

$(".item").click(function() {
  var $items = $('li'),
    $selected = $items.filter('.selected').removeClass('selected'),
    $next;
  // first time only when no selected exists, remove if you automatically select first one
  if (!$selected.length) {
    $next = $items.first();
  } else {
    $next = $selected.is($items.last()) ? $items.first() : $selected.next();
  }

  $next.addClass('selected')

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div id="div1" class="header">
  <input type="text" id="input" placeholder="...">
  <span onclick="newElement()" class="addBtn">Add</span>
</div>

<ul id="UL" class="nyList">
  <li class="item">blank 1</li>
  <li class="item">blank 2</li>
  <li class="item">blank 3</li>
</ul>

Custom global components not applying style in Nuxt Js

I have built some components such as buttons and I want to use and reuse just about everywhere in my site.

I have already create plugins

Object.entries(components).forEach((([name, component]) => {
  Vue.component(name, component)
}))

and registered in nuxt.config

plugins [
'@/plugins/components'
]
<style lang="scss">
  .btn__container {
    border-radius: '5px';
    border: '1px solid red';
    background-color: 'red';
  }
</style>

but then when i call the component it doesnt apply the style

<v-button>button</v-button>

i am trying to inspect my custom button element and it got strikethrough i dunno why
enter image description here

Issue when trying to loop elements using v-for in Vuejs?

  new Vue({
  el: "#app",
  data: () => ({
    ctx: undefined,
    draw(begin, end, stroke = 'black', width = 1) {
      if (!this.ctx) {
        const canvas = this.$refs['canvas'];
        if (!canvas?.getContext) return;

        canvas.width = canvas.offsetWidth;
        canvas.height = canvas.offsetHeight;

        this.ctx = canvas.getContext('2d');
      }

      if (stroke) {
        this.ctx.strokeStyle = stroke;
      }

      if (width) {
        this.ctx.lineWidth = width;
      }

      this.ctx.beginPath();
      this.ctx.moveTo(...begin);
      this.ctx.lineTo(...end);
      this.ctx.stroke();
    },
    onToggleCheckbox(group) {
      const planeEl = this.$refs['plane'];
      const planeRect = planeEl.getBoundingClientRect();

      const fromEl = this.$refs['checkbox_' + group.name];
      const fromRect = fromEl.getBoundingClientRect();
      const from = {
        x: fromRect.right - planeRect.left,
        y: fromRect.top + fromRect.height / 2 - planeRect.top,
      };

      group.statuses.forEach((status) => {
        const toEl = this.$refs['status_' + status];
        const toRect = toEl.getBoundingClientRect();
        const to = {
          x: toRect.left - planeRect.left,
          y: toRect.top + toRect.height / 3 - planeRect.top,
        };

        console.log(planeRect, from, to);

        this.draw(
          [from.x, from.y],
          [to.x, to.y],
          group.checked ? 'white' : 'black',
          group.checked ? 4 : 2
        );
      });
    },
    questions: [
      {
        name: 'foo',
        checked: false,
        statuses: ['ok', 'notok', 'medium'],
      },
      {
        name: 'bar',
        checked: false,
        statuses: ['ok', 'notok'],
      },
      {
        name: 'baz',
        checked: false,
        statuses: ['ok'],
      },
      {
        name: 'oo',
        checked: false,
        statuses: ['ok', 'notok', 'medium'],
      },
    ],

    statuses: [
      {
        name: 'a',
        checked: false,
        statuses: ['notok', 'medium'],
      },
      {
        name: 'b',
        checked: false,
        statuses: ['medium', 'ok', 'notok'],
      },
      {
        name: 'c',
        checked: false,
        statuses: ['ok', 'notok'],
      },
      {
        name: 'd',
        checked: false,
        statuses: ['ok', 'notok'],
      },
    ],
  }),
};
})
 <script src="https://cdn.jsdelivr.net/npm/vue"></script>
 <div id="demo" :ref="'plane'">
    <canvas :ref="'canvas'"></canvas>
    <div class="questions">
      <div
        v-for="(group, index) in questions"
        :key="'question_' + index"
        :group="group"
      >
        <input
          type="checkbox"
          v-on:click="() => onToggleCheckbox(group)"
          v-model="group.checked"
          :ref="'checkbox_' + group.name"
        />
        <span>{{ group.name }}</span>
      </div>
    </div>
    <div class="statuses">
      <div
        v-for="(status, index) in statuses"
        :key="'question_' + index"
        :group="status"
      >
        <span>{{ status.name }}</span>
        <input type="checkbox" :ref="'status_' + status.name" />
      </div>
    </div>
  </div>

Code link:- https://stackblitz.com/edit/vue-raumkh?file=src%2FApp.vue

Error:- Cannot read properties of undefined (reading ‘getBoundingClientRect’)
I am using two v-for, one on left side content and one on right side content.
and preforming some functionality like, When user click on checkbox on left hand side

I am able to draw line using canvas, by setting width and height of the lines. and targeting the right hand side status.

But the problem is in my v-for, Where when i clicked on the checkbox i am getting the error. That i did not set the property correctly.

How can I get the boolean value from the database selected in the chechbox?

How can I get the boolean value from the database selected in the chechbox? There are two checkboxes. One of them returns 1 0 and the other true false. How can I get these values ​​selected?

<div class="form-group">
                        <label>
                            Status
                        </label>
                        <span class="switch">
                            <label>
                                <input type="checkbox" name="select" id="st">
                                <span></span>
                            </label>
                        </span>
                    </div>

This is my function that returns data to the update modal

$('#nm').val(secilenDeger.Name);
    $('#dsc').val(secilenDeger.Description);
    $('#grs').val(secilenDeger.DetayImage);

    $('#dt').val(secilenDeger.Date);

    $('#st').val(secilenDeger.Status);
    $('#sh').val(secilenDeger.ShowInHome);

    $('#st').val(true) == ':checked';
    $('#sh').val(true) == ':checked';

Error: onBeforeCompile does not exist in type LineDashedMaterialParameters

I want to create a spinning cube with hidden dashed lines as follows.

enter image description here

However, I got the following error in VS Code

(parameter) shader: any Argument of type ‘{ color:
ColorRepresentation; dashSize: number; gapSize: number;
onBeforeCompile: (shader: any) => void; }’ is not assignable to
parameter of type ‘LineDashedMaterialParameters’. Object literal may
only specify known properties, and ‘onBeforeCompile’ does not exist in
type ‘LineDashedMaterialParameters’.

SpinningCube.ts

console.clear();
import * as THREE from 'three';
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";

let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera(45, innerWidth / innerHeight, 1, 100);
camera.position.set(-10, 10, 10);
let renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(innerWidth, innerHeight);
renderer.setClearColor(0x202020);
document.body.appendChild(renderer.domElement);

window.addEventListener('resize', onWindowResize);

let controls = new OrbitControls(camera, renderer.domElement);

let grid = new THREE.GridHelper(10, 10, 0x808080, 0x808080);
grid.position.y = -0.01;
//scene.add(grid);

let box = DashedHiddenEdgesBox(10, 6, 3, "yellow");
box.geometry.translate(0, 2.5, 0);
scene.add(box);

renderer.setAnimationLoop((_) => {
    box.rotation.x += 0.01;
    box.rotation.y += 0.01;
    renderer.render(scene, camera);
});

function DashedHiddenEdgesBox(w: number, h: number, d: number, color: THREE.ColorRepresentation) {
    //box base points
    let basePts = [
        [0, 0, 0], [1, 0, 0], [1, 0, 1], [0, 0, 1],
        [0, 1, 0], [1, 1, 0], [1, 1, 1], [0, 1, 1]
    ].map(p => { return new THREE.Vector3(p[0], p[1], p[2]) });
    // box sides normals
    let baseNor = [
        [0, 0, -1], [1, 0, 0], [0, 0, 1], [-1, 0, 0], [0, 1, 0], [0, -1, 0]
    ].map(n => { return new THREE.Vector3(n[0], n[1], n[2]) });

    let pts = [];
    let n1 = [];
    let n2 = [];

    //bottom
    for (let i = 0; i < 4; i++) {
        // bottom
        pts.push(basePts[i].clone());
        pts.push(basePts[(i + 1) > 3 ? 0 : (i + 1)].clone());
        n1.push(baseNor[i].x, baseNor[i].y, baseNor[i].z, baseNor[i].x, baseNor[i].y, baseNor[i].z);
        n2.push(baseNor[5].x, baseNor[5].y, baseNor[5].z, baseNor[5].x, baseNor[5].y, baseNor[5].z);
        // top
        pts.push(basePts[4 + i].clone());
        pts.push(basePts[(4 + i + 1) > 7 ? 4 : (4 + i + 1)].clone());
        n1.push(baseNor[i].x, baseNor[i].y, baseNor[i].z, baseNor[i].x, baseNor[i].y, baseNor[i].z);
        n2.push(baseNor[4].x, baseNor[4].y, baseNor[4].z, baseNor[4].x, baseNor[4].y, baseNor[4].z);
        // middle
        pts.push(basePts[i].clone());
        pts.push(basePts[i + 4].clone());
        n1.push(baseNor[i].x, baseNor[i].y, baseNor[i].z, baseNor[i].x, baseNor[i].y, baseNor[i].z);
        let prev = (i - 1) < 0 ? 3 : (i - 1);
        n2.push(baseNor[prev].x, baseNor[prev].y, baseNor[prev].z, baseNor[prev].x, baseNor[prev].y, baseNor[prev].z);
    }
    //console.log(pts)

    let g = new THREE.BufferGeometry().setFromPoints(pts);
    g.setAttribute("n1", new THREE.Float32BufferAttribute(n1, 3));
    g.setAttribute("n2", new THREE.Float32BufferAttribute(n2, 3));
    g.translate(-0.5, -0.5, -0.5);
    g.scale(w, h, d);
    let m = new THREE.LineDashedMaterial({
        color: color,
        dashSize: 0.3,
        gapSize: 0.14,
        onBeforeCompile: shader => {
            shader.vertexShader = `
            attribute vec3 n1;
            attribute vec3 n2;
            varying float isDashed;
            ${shader.vertexShader}
          `.replace(
            `#include <fog_vertex>`,
            `#include <fog_vertex>
            
              vec3 nor1 = normalize(normalMatrix * n1);
              vec3 nor2 = normalize(normalMatrix * n2);
              vec3 vDir = normalize(mvPosition.xyz);
              //vDir = vec3(0, 0, -1);
              float v1 = step( 0., dot( vDir, nor1 ) );
              float v2 = step( 0., dot( vDir, nor2 ) );
              isDashed = min(v1, v2);
            `
          );
          console.log(shader.vertexShader);
          shader.fragmentShader = `
            varying float isDashed;
            ${shader.fragmentShader}
          `.replace(
            `if ( mod( vLineDistance, totalSize ) > dashSize ) {
            discard;
        }`,
            `
              if ( isDashed > 0.0 ) {
                if ( mod( vLineDistance, totalSize ) > dashSize ) {
                  discard;
                }
              }`
          );
          console.log(shader.fragmentShader)
        }
      });
      let l = new THREE.LineSegments(g, m);
      l.computeLineDistances();
      return l;
    }

function onWindowResize() {
    camera.aspect = innerWidth / innerHeight;
    camera.updateProjectionMatrix();

    renderer.setSize(innerWidth, innerHeight);
}

enter image description here

Question

How to fix this error?

How to pass paramter in URL javascript Using fetch methi

With the below HTML code I created a Date range picker after that added an HTTP post using javascript.

CODE:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Fraction daterange</title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />

</head>
<body>
    <input type="text" name="daterange" value="" />

    <script>
        $(function () {
            $('input[name="daterange"]').daterangepicker({
                opens: 'left'
            }, function (start, end, label) {
                variable_one = start.format('YYYY-MM-DD');
                console.log("Hai hari its working");
                console.log(variable_one);
            });
        });
        fetch("http://localhost:8000/hvals_hash?key=30-8-21")
            .then(response => response.json())
            .then(data => console.log(data));
    </script>
</body>
</html>

From this code, I stored date in variable_one, URL after passing like this http://localhost:8000/hvals_hash?key=${variable_one} after passing like this I didn’t get any response from API but API request Hitting fast API.

Problems :

  1. How to pass Variable in URL with fetch method

  2. How to GET values from date range ( EX: 13-12-2021 ) and call API with variable

  3. display data on the console after selecting a date from a date picker.

Note: URL Example ( http://localhost:8000/hvals_hash?key=30-8-21 )

How prevent reload after post request?

I am trying to make a post request to the server and do something with the response. Things seem to work on the server-side. The problem is that the page reloads upon completion of the response and I cannot do anything with the response.

The common suggestions are using button or preventDefault. These suggestions do not solve the problem: as you can see below, the input type is button (not submit) and preventDefault() on the event does not work.

Does anyone have an idea about what I am missing?

 <form id="modelCodeForm">
    <label for="codehere"></label>
    <div id="modelAreaDiv">
      <textarea id="modelArea" cols="60" rows="20">
stuff
      </textarea>
      <br>
      <input id="submitUserModel" type="button" value="run on server">
  </div>
  </form>
function initializeUserModel(){
  let model = document.getElementById("modelArea").value;
  fetch('http://localhost:8080/', {
      method: 'post',
      headers: {'Content-Type': 'text/plain'},
      body: model
    })
      .then(response => response.json())
      .then(data => {
        console.log(data);
      }).then(console.log("received!"))     
}  

Call JS function on click of a button in a Bootstrap modal

I have a bootstrap modal, where I have few buttons to capture feedback.

I want to call a JS function on click of one of the buttons.

However, on click of the button, the modal just closes without calling the JS Function.

But, if I do the same onclick event on any other element not in the modal, it works fine.

js

<script>
          
   function sayHello() {
        alert("Demo Alert")
   }
</script>

HTML

<div
class="modal fade"
id="exampleModal"
tabindex="-1"
role="dialog"
aria-labelledby="exampleModalLabel"
aria-hidden="true"
>
<div
  class="modal-dialog modal-lg modal-dialog-centered"
  role="document"
>
  <div class="appie-signup-area">
    <div class="container">
      <div class="row">
        <div class="col-lg-12">
          <div class="appie-signup-box">
            <h3 class="title">How was the Session?</h3>
            <form action="#" id="mood-tracker">
              <div class="row">
                  <div class="input-box">
                    <button type="submit" value="Good" onclick="sayHello()">
                      <i
                        class="fa fa-smile"
                       
                      ></i
                      >Good
                    </button>
                  </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</div>

Where am I going wrong?

Draw lines and set stacking angles between them

I want to draw a set of lines on a canvas with plain javascript. And I want those lines to be stacked on each other. The tricky thing is, that I want to set an angle between each line and I want the angle to be based on the previous angles. So if line1 has an angle of 15° and line1 one of 15° aswell. line2 should be rotated for 30°.

I made a quick sketch in paint to visualize my description:
Image of my goal crappily drawn in paint

I also made a condesandbox and tried it. Each slider should be the angle of one connection point. The first line (red) works just as expected. If you increase the angle, the line is drawn in that angle. But the next lines are not connected at all and I do not know how to fix this.
https://codesandbox.io/s/angled-lines-1p0yz?file=/src/index.js
CodeSandbox Screenshot

Get selected value from dropdown list

I am trying to get the selected value from the dropdown, but have no luck.

<select class="form-control" name="cars" onchange="getAvailableCars();">
   <?php getCars() ?>
</select>

getCars() function retrieves all available cars from the database, and they show in the dropdown menu.

Here is function getCars()

function getCars(){
    $link = new mysqli("localhost", "root", "", "cars");
    $link->set_charset("utf8");

    $sql=mysqli_query($link, "SELECT CarID, CarCode, CarName FROM cars a WHERE CarAvailable = 1");

    echo '<option value="">Select </option>';
    while($record=mysqli_fetch_array($sql)){
        echo '<option value= "' .$record['CarID']. '">' . $record['CarCode'] ."-|-". $record['CarName'] .' </option><br/>';
    }
}

Then I created JS function which will get selected Card ID from the select menu.

<script>
    function getAvailableCars() {

        var car = document.getElementById("cars");
        var selectedCar= car.options[car.selectedIndex].value;

        console.log(selectedCar);
        /*
        var arr = {artikal:selectedCar};
        $.ajax({ url: 'available-cars.php?a=1',
            data: arr,
            type: 'post',
            success: function(output) {
                document.getElementById("cars").value = output;
            }
        });
        */
    }
</script>

Console displays issue:

Uncaught TypeError: Cannot read properties of null (reading 'options')

Also, I have tried with Jquery, but I got in console undefined.

var cars = $("#cars:selected").val(); 

I was following link below, any other too but for some reasons, I cannot get the selected value:
get-selected-value-in-dropdown-list-using-javascript

JS Choosen show option according to data-attribute

In my web app I have a choosen dropdown (second) which has its options with some data-attr that depend of another dropdown (first).

My requirement is, when the user selects a value on the first dropdown, the second one only show the options that have the data-attribute equal to the value that the user selected on the first drodpdown.

My question is, how to show only those options.

I have the code to hide all, and its working fine, what I can´t seem to do is to select only the options with the data-attribute selected and show the-

code to hide all options:

v_reset = function () {
        $("#div_select").each(function () {
            $(this).children("option").hide();
        });
    
        $('#div_select').trigger('chosen:updated');
    }

js function to change the second dropdown:

v_change = function () {
    let selectedValue = $("[id*=firstSelect] :selected").val();
    if (selectedValue > 0) {
        v_reset();

        var optionsArray = getAllElementsWithAttribute('data-search', selectedValue);
        for (let i = 0; i < optionsArray.length; i++) {
            console.log($(this));
            let value = optionsArray[i].value;
            //select all options with data-search attr equals to the selected value
            //$("#div_select option[='"+ selectedValue+ "']").show();
            $('#div_select').trigger("choosen:updated");
        }
};

select html:

<select id="div_select" class="chosen-select form-control" onchange="v_change(this)" ">
        <option value="-1">Selecionar opção</option>
        <option data-search="" value="23">JMM</option>
        <option data-search="" value="1037">Rota 20</option>
        <option data-search="" value="1572">entrega</option>
        <option data-search="" value="2227">29JUN19</option>
        <option data-search="" value="2417">teste</option>
        <option data-search="1" value="2450">18OUT16</option>
        <option data-search="10098" value="2871">18OUT16</option>
        <option data-search="17079" value="2917">Luis</option>
        <option data-search="17079" value="2918">Luis</option>                              
        <option data-search="17079" value="2940">teste tablet</option>
     </select>

Detect when content overflow

I want to add a specific styling when my content is overflowing. The styling I would like to add is a shadow that will indicate that you can scroll to see more information.

My question is: How can I detect that my content is overflowing to add this style only when it is overflowing?