Tips for creating a square HTML element

Looking to customize my react calendar with square tiles. Currently, the width is determined by the overall calendar width, but I want the height to match.

https://i.sstatic.net/3vVrq.png

Sample HTML:

<button class="react-calendar__tile react-calendar__tile--active react-calendar__tile--range react-calendar__tile--rangeStart react-calendar__tile--rangeEnd react-calendar__tile--rangeBothEnds react-calendar__month-view__days__day" type="button" style="flex: 0 0 14.2857%; overflow: hidden;">
    <abbr aria-label="July 14, 2022">14</abbr>
</button>

Here's what I've attempted so far:

.booking-calendar .react-calendar__tile {
    flex: 0 0 14.2857%;
    overflow: hidden;
}
.booking-calendar .react-calendar__tile--active abbr {
    outline: 2px solid #444444;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    border-radius: 40px;
    font-weight: 700;
}

.booking-calendar .react-calendar__month-view__days__day abbr {
    padding: 10px;
    border-radius: 40px;
    display: inline-block;
    vertical-align: middle;
}
cssreactjsreact-calendar

Answer №1

If you're looking to maintain aspect ratio using CSS, the aspect-ratio property is your solution. Check out more information on it here.

.booking-calendar  {
    width: 400px;
    display: flex;
}

.booking-calendar .react-calendar__tile {
    width: 100%;
    aspect-ratio: 1 / 1;
    margin: 10px;
}

.booking-calendar .react-calendar__tile--active abbr {
    outline: 2px solid #444444;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    border-radius: 40px;
    font-weight: 700;
}

.booking-calendar .react-calendar__month-view__days__day abbr {
    padding: 10px;
    border-radius: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    
}
<div class="booking-calendar">
     <button class="react-calendar__tile react-calendar__tile--active react-calendar__tile--range react-calendar__tile--rangeStart react-calendar__tile--rangeEnd react-calendar__tile--rangeBothEnds react-calendar__month-view__days__day" type="button" style="overflow: hidden;">
    <abbr aria-label="July 11, 2022">11</abbr>
</button>
  <button class="react-calendar__tile react-calendar__tile--active react-calendar__tile--range react-calendar__tile--rangeStart react-calendar__tile--rangeEnd react-calendar__tile--rangeBothEnds react-calendar__month-view__days__day" type="button" style="overflow: hidden;">
    <abbr aria-label="July 12, 2022">12</abbr>
</button>
  <button class="react-calendar__tile react-calendar__tile--active react-calendar__tile--range react-calendar__tile--rangeStart react-calendar__tile--rangeEnd react-calendar__tile--rangeBothEnds react-calendar__month-view__days__day" type="button" style="overflow: hidden;">
    <abbr aria-label="July 13, 2022">13</abbr>
</button>
  <button class="react-calendar__tile react-calendar__tile--active react-calendar__tile--range react-calendar__tile--rangeStart react-calendar__tile--rangeEnd react-calendar__tile--rangeBothEnds react-calendar__month-view__days__day" type="button" style="overflow: hidden;">
    <abbr aria-label="July 14, 2022">14</abbr>
</button>
</div>

To make sure the aspect-ratio effect works properly, remember to remove any conflicting inline flex styles.

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

When resizing the browser, the divs stack neatly without overlapping

We need to ensure that the 4 divs stack on top of each other without overlapping! The header should have the same width as the footer, 100% The menu should stack with the header and footer The content should be centered on the page and stack with the oth ...

htmlcssoverlapping

Determine the location of a character based on its index position

Is it feasible to identify the precise x and y coordinates of the character at position 24 (e.g., '-') in this overflowing multi-line text? ...

jqueryhtmlcss

Ways to resolve the issue of the experimental syntax 'jsx' not being enabled

I encountered an issue while trying to implement react-fancybox and received an error. https://i.sstatic.net/vgFha.png To resolve the error, I executed the following commands: npm install --save-dev @babel/preset-react, npm install --save-dev @babel/plugi ...

javascriptreactjsnpmbabeljs

Using an array of objects to set a background image in a Bootstrap carousel using jQuery: a step-by-step guide

I have an array of items, each containing a background property with a URL to an image. Here is my array: https://i.sstatic.net/jfrV0.png Here is the HTML structure: <div id="myCarousel" class="carousel slide" data-ride="carousel"> <ol ...

javascriptjqueryhtmlcsstwitter-bootstrap

What is the best method to generate polar charts using highcharts-react-official?

I'm having trouble creating a polar chart using the HighchartsReact wrapper in my project. Instead of getting the desired result, I either end up with a regular line chart or run into errors. Can anyone help me understand how to utilize the highcharts ...

reactjshighcharts

What is the method for deactivating a hyperlink with CSS?

Within my wordpress page, there is a specific link present. This particular link belongs to a class. Is it viable to deactivate this link solely through the use of CSS? <a class="select-slot__serviceStaffOrLocationButton___5GUjl"><i class="mater ...

htmlcsswordpress

Ways to restrict users from inputting alphabets in TextField using material ui

I've set up a TextField where users can only input positive digits. Currently, I'm using the following onKeyDown event: <TextField label={distanceError} error={!!distanceError} defaultValue={kpoints.distance} on ...

reactjstypescriptmaterial-ui

How to style TextInput to display dollar amounts when using onChangeText and Redux in React Native

Struggling to format number input in a TextInput using the onChangeText function in React Native with Redux. Tried using .toFixed(2) function, but encountering an issue where it interprets the next digit as the first decimal and rounds back to 0 due to Re ...

javascriptreactjsreact-nativereduxformatting

Struggling to configure a React-Redux boilerplate

I encountered an issue with my previous boilerplate while working on a project, so I decided to switch to a different one. After exploring Github, I came across this repository that seemed simple and similar to what I needed. Upon cloning it and running np ...

reactjsnpmreduxreact-reduxnpm-install

After retrieving data, React can update specific key values in an array of objects within a datatable row by replacing them with aster

I am currently working on a project that involves displaying data in a datatable/datagrid using an array of objects with various values. I need to find a way to specifically target a certain object or column within the table and change its row value from t ...

arraysreactjsdatatablematerial-uifetch-api

In Angular/Typescript, dynamically add a class to a `td` element when it is clicked. Toggle the class on and off

My problem arises when trying to individually control the arrow icons for each column in my COVID-19 data table. By using Angular methods, I aim to show ascending and descending arrows upon sorting but run into the challenge of changing arrows across all c ...

javascripthtmlangularreactjstypescript

I attempted to implement a CSS and Typescript animation for a sliding effect, but unfortunately, it isn't functioning

So I'm encountering an issue with this unique ts code: {/* Mobile Menu */} <div className="lg:hidden"> <button className="flex items-center w-8" onClick={toggleMenu}> {isMobileMenuOpen ? ( ...

cssreactjstypescriptcss-animations

What are some techniques for applying masking to various elements beyond just input fields within React?

I am currently developing an admin dashboard using NextJS and MaterialUI (mui), and I am facing a challenge with masking certain values, such as phone numbers, that are retrieved from the backend without any masking applied. While I have successfully impl ...

javascriptreactjsnext.js

Expanding a wrapper to fit the entire width of its content

I am facing an issue where the background color of a wrapper does not adjust to the overflowing content within it. How can I make sure that the background stretches behind all the content, regardless of its size? <div style="background-color: black;m ...

htmlcss

Using Font Awesome Class Aliasing

Is there a way to create an alias for a Font Awesome class like fa fa-users, and then switch between classes dynamically? I'm working on a project where I need to use Font Awesome icons, and currently I have the following code: <i class="fa fa-us ...

cssfontsextjs4font-awesome

Prevent the wrapping of elements in an expanded hover state

Check out the Latest Demo: https://fiddle.jshell.net/Benihana77/cjtg5ojf/ The Scenario: I have designed a versatile promo where the main text and the button/link text can vary in length. The button/link is placed inline, with an extended arrow that expan ...

css

Incorporate text into the URL of the image

Got a URL of an image like this: https://lipsum.mobi/catalog/product/SE0229E/YG/AAA/4/1/SE0229E-YG-AAA-4.jpg', and looking to add 240x240 within the URL. Current Url: https://lipsum.mobi/catalog/product/SE0229E/YG/AAA/4/1/SE0229E-YG-AAA-4.jpg Desire ...

javascripthtmljquerycss

React Jest testing throws an error when testing a component with certain properties

I am trying to understand why my most recent test failed -> it("cron input should have a passed Value in properties"). I conducted tests on my react component both with and without properties. The first two tests passed successfully, but the l ...

reactjsjestjsreact-testing-libraryreact-test-renderer

Issue arising with hover animation on a stable colored background

I recently created my own website and utilized this codepen https://codepen.io/nikolamitic/pen/vpNoNq to incorporate an animation effect on my name. While it works well overall, I encountered an issue when trying to decrease the line-height of my elements ...

htmlcss

Creating a side by side Material-UI React List

Looking for some guidance on aligning lists in material UI within a react project. Any suggestions? <Typography><strong>Symptoms</strong></Typography> <ul> <h5>Common:</h5> <ul class ...

reactjsmaterial-ui