Obtain css value "width: min-content" in px of an element

Viewed 321

I'm trying to figure out how to get the value of an element width: 'min-content' in px. How is it calculated? I have a slide selector that modifies the css left property of a relative positioned element inside a div that has a max width of 1200px. I need to know if the difference between 1200px and left value has reached the minimum width of the element to stop it incrementing. Like:

  • styles.formato.width = 1200
  • styles.plato.posh contains the slide value for the left attribute
$('.menu-preview .menu-plato').css('max-width', styles.formato.width + 'px');
$('.menu-preview .menu-plato').css('min-width', 'min-content');
                
$('.menu-preview .menu-plato').css('width', 'calc(' + styles.formato.width + 'px - ' + (styles.plato.posh > 0 ? styles.plato.posh : (-styles.plato.posh)) + 'px)')

$('.menu-preview .menu-plato').css('left', styles.plato.posh + 'px');

This code just shrinks ".menu-plato" width to force break-words if it reachs the end of the parent div. But, as "left" max value is styles.formato.width, ".menu.plato" element just overflow parent.

What I want to achieve is:

if (element."min-width" <= (styles.formato.width - styles.plato.posh)){
    //DON'T UPDATE LEFT PROPERTY BECAUSE CHILD IS USING MIN-WIDTH AS WIDTH VALUE
    //SO IT CANNOT BE SHRUNK MORE AND LEFT ATTR WILL OVERFLOW THE ELEMENT TO THE RIGHT

}

I've tryed using some element node attrs like clientWidth or offSetWidth but failed because when the element width reachs the min-width value, they both hold the min-width value, but, as it's a slide selector and those attributes depends on the screen rendering, if you slide too fast, the calculations are wrong.

EDIT

There are more than one element with those classes, so what I've tryed is:

 $('.menu-preview .menu-plato').each((index, element) => {
     element.style.width = ('calc(' + styles.formato.width + 'px - ' + (styles.plato.posh > 0 ? styles.plato.posh : (-styles.plato.posh)) + 'px)');
     if (element.offsetWidth <= (styles.formato.width - (styles.plato.posh > 0 ? styles.plato.posh : (-styles.plato.posh)))) {
        if (styles.plato.posh >= 0) {
           element.style.left = styles.plato.posh + 'px'
      }
  }
})

Thanks

0 Answers
Related