Issue in Less.js: the 'min' function encountered an error due to incompatible types

In my _main.less file, I have the following styling:

#mapid {
  width: 100%;
  min-height: min(65vh, 500px);
  max-height: 500px;
}

However, when using the Less compiler with grunt, it throws an error:

>> File "public/less/_main.less" changed.
Running "less:development" (less) task
>> ./public/less/_main.less: [L86:C14] error evaluating function `min`: incompatible types
Warning: Error compiling ./public/less/_main.less Use --force to continue.

Aborted due to warnings.

This code works perfectly fine in CSS (see docs).

cssgruntjsless

Answer №1

To prevent LESS-CSS from overwriting the calc() function, you can utilize escape strings in LessCSS:

#mapid {
    width: 100%;
    min-height: ~"min(65vh, 500px)";
    max-height: 500px;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Responsive menu not collapsing properly and appearing funky in Drupal

I've managed to create a responsive navigation bar, but I'm encountering two issues. Firstly, when I resize the screen on my test pages, not all of the links hide as expected. Secondly, after inserting the code into Drupal, the nested links appea ...

javascripthtmlcssdrupal

What are the best methods for placing content within a box and ensuring it is responsive?

Having trouble solving a simple problem that seems to have an easy solution. The code I'm working on is meant to display multiple bubbles with similar content, but the text gets distorted due to using strange margin values to fit a specific resolution ...

htmlcss

Alignment issues with CSS3 navigation bar

After conducting thorough research on this topic, I realized that I am not alone in facing this issue. Unfortunately, the solutions provided by others with the same question did not resolve my problem. I have carefully configured my links for navigation wi ...

css

Dynamic content cannot have classes added to them using jQuery

When adding content dynamically, it is necessary to use an event handler for a parent element using on(). However, I am facing an issue where the class added with addClass on dynamically generated content disappears immediately. Let's take a look at ...

javascriptjquerycssajax

What is the best method for incorporating a unique style to a v-dialog component in Vuetify following the most recent update?

I'm currently working on a project using vuetify, and I am facing an issue while trying to add a custom class to a v-dialog component. I have tried searching for information on how to do this, but it seems that the prop "content-class" has been deprec ...

cssvue.jssassvuetify.js

Quiz12 - The Influence of Inheritance on CSS

How will the text size of "Universe" be affected by the following declaration? <div style=”font-size:12px;”>World is<div style=”font-size:0.5em;”>VERY small in <div style=”font-size:100%;”>Universe</div></div>< ...

css

Is it possible to alter the color of an icon image using CSS?

I'm currently exploring ways to modify the color of an image that has a transparent and solid color split. My goal is to change the white portion for hover effects, and create a dynamic way to alter colors within WordPress without relying on Photosho ...

jqueryhtmlcss

A technique for horizontally centering an image while simultaneously ensuring that the bottom is pushed down, even at an unknown resolution, and maintaining center alignment if

Imagine a scenario where I have an image with unknown resolution. My goal is to horizontally center it, even if the window's width is smaller than the picture, while also adjusting the bottom of the window to match the height of this picture. Is ther ...

htmlimagecssbackground-position

Checkbox failing to trigger

Check out my code snippet here: http://jsfiddle.net/raficsaza/mgukxouj/ I'm facing an issue with the checkbox in this code. It seems to be stuck at a false value and I can't get it to change. Is there a way to work with the "input" tag instead o ...

htmlcsscheckbox

Customizing the Style of Mat-Form-Field

I have designed a search bar using mat-form-field and attempted to personalize the appearance. Currently, there is a gray border-like region surrounding the input field and icons. Moreover, clicking on the input field results in a visible border: <form ...

cssangularangular-materialstyling

Arranging Images with CSS Overlapping

I am striving to make the blue block and red block scale proportionally with the webpage, while also maintaining their position without any shifting up or down. As depicted in this gif, the blocks somewhat accomplish what I desire when scaling diagonally, ...

htmlcssimageresizeoverlap

Implementing class styles using jQuery; however, certain styles fail to be effectively applied

As a beginner, I am experimenting with applying CSS class styles using jQuery. Specifically, I am trying to set two class attributes: color and font size. Surprisingly, only the color attribute is being applied despite both attributes being defined under t ...

jqueryhtmlcss

Simple steps to dynamically alter CSS styles according to the current URL

I am working on a website where I want users to be able to change the background image and other CSS elements. Currently, my approach is to have multiple HTML pages that users can switch between using a dropdown menu and reload the page. For example: hre ...

phphtmlcss

Mastering the Art of Positioning Arrows in Post Car

I am currently facing an issue with my post carousel. The carousel has two arrows on the side, and I have designed a background in the shape of circles for these arrows. However, I can't seem to figure out how to center the arrows inside the circles. ...

csswordpressowl-carousel

Transparent background with opaque text

I noticed that my div has a gray background with some opacity. <div className="absolute w-full h-full top-0 left-0 right-0 bottom-0 bg-slate-500 opacity-50 z-10"> <p className="relative top-1/2 px-8 text-center hea ...

javascripthtmlcsstailwind-css

How can I use JavaScript and HTML to print a canvas that is not within the print boundaries?

As someone who is new to javascript, I recently created a canvas function that allows me to successfully print. However, I am encountering an issue with printing large canvas areas. When I navigate to the further regions of the canvas and try to print, i ...

javascriptcsshtmlcanvasprinting

Mastering @media queries to dynamically alter widths in prop styled components

I have a unique component that utilizes an object with its props for styling. const CustomSection = ({ sectionDescription, }) => { return ( <Text {...sectionDescription} content={intl.formatMessage({ id: &apos ...

cssreactjs

The column flex-direction property seems to be malfunctioning

Can anyone help me with styling a ul tag using display: flex? I'm trying to order it by column with flex-direction: column;, but for some reason, it's not working. Here is the CSS code for the container: #nav li.four_columns ul.sub-menu { widt ...

htmlcssflexbox

The div stops scrolling after the Matrix3d transformation is applied, causing the scrolling functionality to cease

The issue arises when attempting to scroll the #content div, as it seems unresponsive. Oddly enough, scrolling with the scrollbar does work: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ...

htmlcssthree.jstransformation

Tips for positioning a chat box at the bottom of a v-card's visible area

My goal is to create a chat app using Vuejs 3 and Vuetify 3, but I'm encountering an issue aligning the chatbox with the v-card component. Instead of being positioned at the bottom of the v-card, the chatbox (green) appears at the bottom of the page. ...

javascriptcssvue.jsflexboxvuetify.js