My LESS code looks like this:
&.settings-prompt .panel {
margin-left: -190px;
width: 380px;
height: 200px;
}
&.create-playlist-prompt .panel {
margin-left: -165px;
width: 330px;
height: 180px;
}
I want the .panel to have a margin-left that is always equal to -50% of its width. Can I achieve that with LESS?
By utilizing pure Less, you have the ability to create a parameterized mixin for panels and easily generate the margin-left based on the specified input parameter. This method eliminates the need for separate variables and simplifies your code in Less.
Less:
&.settings-prompt .panel {
.panel(330px);
height: 200px;
}
&.create-playlist-prompt .panel {
.panel(130px);
height: 180px;
}
.panel(@width){ /* Updated as per suggestion by seven-phases-max */
margin-left: (@width / -2); /* calculate -50% of width for margin-left */
width: @width; /* set input parameter as width */
}
Compiled Output:
.settings-prompt .panel {
margin-left: -165px;
width: 330px;
height: 200px;
}
.create-playlist-prompt .panel {
margin-left: -65px;
width: 130px;
height: 180px;
}
Using jQuery: (Providing an alternative solution for future readers)
$("div").each(function() { // automatically assign margin for each div
var el = $(this);
el.css({
'margin-left': -(el.width()/2) //set margin-left to -50% of width (-width/2);
});
});
I have learned a lot about programming, but I'm stuck on one thing. How can I make an image stay in place when clicked on? What I mean is that when you click and hold on the image, then move the cursor, the image moves with the cursor. What I want is ...
I need help creating a footer for my printed pages, but the footer is overlapping the content. I've tried adding padding-bottom to the @page CSS rule with the height of the footer, but it's not making a difference. Any suggestions on how to prop ...
I have been exploring various resources to create an HTML table with a fixed first column using CSS only. Despite my efforts, the fixed column is consistently appearing lower than the rest of the content, and I'm unsure why. Check out the code I&apos ...
I am currently working on an HTML application that needs to fit perfectly within a designated space without causing any page level scrollbars. I have utilized flexbox styles extensively to achieve this, but unfortunately, I am facing compatibility issues w ...
I am looking to implement a drag and drop function where I can move elements from one div to another, each containing different images. However, I want the image displayed in the second div to change based on the element being dragged. For example: When d ...
Working on customizing a theme for my blog using the Discourse engine has been quite interesting. I have noticed that every post, or "topic," loads with a blue background that quickly transitions to the main background color. You can take a look at an exam ...
I attempted to position an absolute element with a negative value, and it works perfectly in every browser except for Firefox. In Chrome, IE, or Safari, the blue handler box is correctly positioned in the middle of the top border. Is there a workaround to ...
I am having trouble with this jQuery function that is supposed to post the value of a variable to a PHP page and display it in the correct status class. I have included the necessary jQuery file, but for some reason, nothing is happening. Any assistance w ...
Presently, I am setting the width of the element using this code format: <div [style.width.px]="size" [style.height.px]="size"></div> What I am aiming for is to utilize a comparable format but to define the border-width css attribute, such as ...
Here is an example of a table: <TABLE class=vysledky > <TR class=podtrzeni> <TD width="39" height="19">Order <br /> League</TD> <TD width="39" height="19">Order <br /> Team</TD> <TD width="3 ...
<html> <head> <style> #msg { visibility: hidden; position: absolute; left: 0px; top: 0px; width:100%; height:100%; text-align:center; ...
After setting the width and height for an image, along with testing overflow:hidden, I've encountered an issue where the alt text for a broken image overflows the bounds of the image and the image size is lost. How can I contain the alt text within th ...
I am attempting to create a PDF with three columns using barryvdh/laravel-snappy and wkhtmltopdf. Since the text that will populate these columns varies in length, I need a method that allows the text to flow freely within the columns. I have attempted to ...
Let me begin by providing some context. I am currently developing a responsive page that uses percentages to position my divs, allowing users to drag and drop items wherever they please. However, a problem arises when the user positions an object too close ...
I'm looking to create a header with a unique color transition effect - a left fade from light blue to blue, a center that is solid blue, and a right fade from blue to light blue. The header should span the full width of the page. Can anyone suggest th ...
I'm struggling with getting padding to be accepted by the browser when I style a card using Material-UI. const useStyles = makeStyles((theme) => ({ cardGrid: { padding: '20px auto' }, })) Unfortunately, the browser is not recogni ...
My app has some CSS code that I found, but it's too small. Can anyone help me increase the size by 150%? I am using React-Bootstrap for styling, so I'm looking for a way to enlarge the element without adjusting every attribute in the CSS classes. ...
I am using 2 different partial views in my main view: <div class="col-md-6"> @Html.Action("Chart", "Teams") </div> <div class="col-md-6"> @Html.Action("SeriesWinsChart", "Teams") </div> <div class="next-game"> & ...
My Navbar is collapsing correctly, but when I click the toggle icon after it's collapsed, the items appear in a horizontal row instead of the intended vertical block. I have checked the code on the Bootstrap 5 example page and tried to replicate it, b ...
Is it possible to change the collapse direction of the Bootstrap 4 navbar from 'top to bottom' to 'right to left'? Here is the code snippet I am currently using: <nav class="navbar navbar-light bg-faded"> <button class="na ...