Currently using:
width:calc(100% mod 320);
However, it consistently returns the full width of the parent element.
There doesn't appear to be anything wrong with the syntax, so it seems like a support issue.
This has been tested on Chrome 37 and Firefox 32.0.
You can find an example in this fiddle
<div class="mod">test2</div><!-- it should be 100px -->
.mod{
width:calc(300px mod 200);
}
1) Only Internet Explorer appears to support the mod operator and it behaves as expected.
2) Make sure to include px after the units for the modulo operation (as mentioned by C-link).
3) According to @Harry, the current specification has removed the mod operator from the calc function.
Check out the FIDDLE - (best viewed in Internet Explorer)
<div class="container">
<div class="no">no calc</div>
<div class="simple">simple</div>
<div class="mod1">mod1</div>
<div class="mod2">mod2</div>
<div class="mod3">mod3</div>
<div class="mod4">mod4</div>
</div>
.container {
width: 450px;
border: 1px solid black;
}
.no {
background:aqua;
}
.simple {
width:calc(100% - 100px);
background:green;
}
.mod1 {
width:calc(100% mod 200px); /* = 450 % 200 = 50px */
background:red;
}
.mod2 {
width:calc(100% mod 300px); /* = 450 % 300 = 150px */
background:brown;
}
.mod3 {
width:calc(100% mod 50px); /* = 450 % 50 = 0 */
background:orange;
}
.mod4 {
width:calc(50% mod 100px); /* = 225 % 100 = 25px */
background:yellow;
}
When you take 25% and divide it by 2, the remainder is what we call "modulus"
If you want to learn how to use the Calc Function in CSS3, check out this helpful link: Mastering the Calc Function in CSS3
CSS Tricks
.remainder{
width: calc(200px - ((200px / 150) * 150));
background:blue;
}
I am having issues with Change Detection in my Angular template. I am attempting to change the color of the first div based on text changes in the second div (textbox). Here is the code snippet: <div [ngStyle]="{'background-color': titleT ...
Objective: For Value 1, the CSS class should be badge-primary For Value 2, the CSS class should be badge-secondary For all other values, use the CSS class badge-danger This functionality is implemented in the handleChange function. Issue: Current ...
Most of us are familiar with the functionality on StackOverFlow that allows you to preview your text before posting a question. I'm interested in implementing a similar feature on my website and am looking for some guidance on how to get started. I ...
Is there a way to apply underlining to text and include a small number underneath the underline in a similar style shown in this image, by utilizing css, html, or javascript? ...
Within my php website, there is a button with an anchor tag embedded in it that transmits a numerical value to the Angular application; echo "<button data-toggle='tooltip' type='submit' data-placement='bottom' title='$ ...
I'm currently working on a project that involves the use of the Material UI Drawer component. However, I've encountered a specific issue when using an iPad, which presents two main problems: - The overlay does not appear above the navigation bar ...
Today marks the beginning of my journey in creating an Angular App. My goal is to establish a connection to a server and display a message on screen if the connection is offline, prompting the user to check their network settings. I currently have a JavaSc ...
I have created a static cfm page with a single select query that displays over 3000 records without pagination. When trying to view this page in Firefox, it takes approximately 15 seconds to load the content. Is there any way to reduce the browser loadin ...
I have a frame on my asp.net website page that I want to load with an html page. Instead of specifying the frame source as an html file, I want to use html source which may vary and will be fetched from my database. How can I load a frame with html source ...
I am encountering an issue with a hyperlink <a href="#" id="someID">Link</a> that is located further down the page. This link is used to trigger an Ajax request, but whenever it is clicked, the page automatically scrolls back to the top. I have ...
I am trying to create a single popup that appears when different list elements are clicked, with each list element providing information for the popup. I attempted to implement this functionality but I am having trouble dynamically fetching the text from t ...
I have a question regarding an image that was dynamically changed using JavaScript. The issue I'm facing is that the new image appears to be placed on top of a background image, resulting in a clear square outline around it. I'd like to know if t ...
Struggling to keep my <footer> tag at the bottom of my page despite trying various techniques. Check out my website below to see the issue in action: ...
Currently, my product list is dynamically created using jQuery. I now need to implement filtering based on attributes such as color, size, and price. I found some code that filters the list items by their classes, which worked perfectly for someone else. ...
Can someone assist me in selecting an element using its class name? I currently have GWT 2.0 and I am trying to accomplish this. Your help would be greatly appreciated. Thank you ...
My goal is to resize a canvas to a specific aspect ratio that occupies the maximum available space within its parent container. Below is the CSS and HTML code I am using: .grid-container { display: grid; grid-template-rows: min-content 1fr min-conte ...
Hello, I currently have 2 text fields and 2 checkboxes: <input type="checkbox" id="class1"> <input type="checkbox" id="class2"> <div id="hidden"> <input type="text" id="valclass1"> <input type="text" id="valclass2"> </div ...
Is there a way to split a ul list into 3 columns using CSS? This is how my HTML structure looks like: <ul> <li>Test</li> <li>Test</li> <li>Test</li> <li>Test</li> <li> ...
I have a website that utilizes AJAX to load content dynamically. To enhance user experience, I implemented an overlay with a loading indicator during the loading process using jQuery and the jQuery BlockUI plugin. When invoking $(element).block(), everyth ...
Currently using ReactJS, I have implemented a custom upload image button on my webpage. .upload-btn-wrapper { position: relative; overflow: hidden; display: inline-block; cursor: pointer; } .upload-btn-wrapper input[type=file] { font-size: 10 ...