Prevent an element from being animated by CSS

Currently tackling a frustrating bug while working on a component. The issue arises when clicking on a div that opens a menu, contained within a React component which is nested inside another.

Below is the CSS styling:

const FilterBox = styled("div")`
  position: relative;
  display: flex;
  background-color: ${colours.silver};
  border: 1px solid ${colours.silver};
  border-radius: 4px;
  padding: 4px;
  height: 40px;
  width: 40px;
  align-items: center;
  svg {
    position: absolute;
    vertical-align: middle;
    display: inline-block;
    margin-left: 4px;
    text-align: center;
  }
`;

const FilterMenu = styled("div")`
  display: flex;
  margin-top: 10px;
  top: 13%;
  right: 13vw;
  background: #ffffff;
  box-sizing: border-box;
  -webkit-appearance: none;
  box-shadow: 0px 2px 0px #dddee3;
  border-radius: 4px;
  display: ${(props) => (props.visible ? "block" : "none")};

  label {
    display: block;
    width: 10vw;
    margin: 10px;
    padding-left: 10px;
  }
  span {
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 24px;
    display: flex;
    align-items: center;
    color: ${colours.night};
    input {
      margin-right: 8px;
      width: 16px;
      height: 16px;
      border: 1px solid #0f7070;
      box-sizing: border-box;
      border-radius: 2px;
      -webkit-appearance: none;
      -moz-appearance: none;
      :checked {
        background-color: ${colours.green};
        :after {
          content: "\2714";
          font-size: 14px;
          position: absolute;
          top: 0px;
          left: 3px;
          color: white;
          z-index: 9999;
        }
      }
    }
  }
`;

Illustrative examples can be viewed at:

https://i.sstatic.net/gfN0J.png

https://i.sstatic.net/JOPy0.png

The menu appears, but the layout seems off and it doesn't appear to be responsive as intended. Where could I possibly be going wrong?

https://codesandbox.io/s/affectionate-platform-zjg8m?file=/src/App.js

javascripthtmlcssflexbox

Answer №1

To ensure proper rendering, the arrangement of elements in your HTML file holds significance.

Start by relocating the FilterBox element to the beginning of the FilterMenu:

<FilterMenu visible>
   <FilterBox
     id="filterbox"
     onClick={() => setFilterToggled(!isFilterToggled)}
    />

   {isFilterToggled &&
     allColumns.map((column) => (
       <div key={column.id}>
         <label>
           <span>
             <input type="checkbox" {...column.getToggleHiddenProps()} />{" "}
             {column.Header}
           </span>
         </label>
       </div>
     ))}
 </FilterMenu>

Next, add the following line to give margin-left: auto to the FilterBox. This will update your styles as follows:

const FilterBox = styled("div")`
  position: relative;
  margin-left: auto;
  display: flex;
  background-color: silver;
  border: 1px solid silver;
  border-radius: 4px;
  padding: 4px;
  height: 40px;
  width: 40px;
  align-items: center;
  svg {
    position: absolute;
    vertical-align: middle;
    display: inline-block;
    margin-left: 4px;
    text-align: center;
  }
`;

By applying these changes, the element will remain positioned in the top-right corner consistently.

You can view a live example at this link: https://codesandbox.io/s/agitated-mountain-0rv2d?file=/src/App.js

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

The popup image on my main project is not functioning correctly, despite working perfectly in my test project

I am working on creating a pop-up image for my internship project. When the user clicks on an image, I want it to display in a larger size with a background and opacity. However, the code I have implemented so far is not functioning properly. Please ignore ...

javascripthtmlcssimagepopup

When you refresh the page, the number of items in the cart displayed on the navbar always shows 0

When using my angular application, I encountered a problem with adding movies to a cart. Although I can successfully add them to the cart and see the correct number of movies reflected in the navbar, upon refreshing the page, the count resets to 0. Here i ...

javascripthtmlcssangular

Troubleshooting CSS issues in HTML pages

I created an HTML file but the CSS properties are not displaying correctly in the browser. I'm not sure where I made a mistake. Instead of using a separate CSS file, I have included it directly in the HTML file. <!DOCTYPE html> <html> &l ...

htmlcss

Methods to prompt a user to select an option using Bootstrap

I have been struggling with this problem for hours and it's really starting to frustrate me! Currently, I am incorporating Twitter Bootstrap along with bootstrap-min.js. This is the code snippet in question: <select id="assettype" name="assettyp ...

javascriptjquerytwitter-bootstrap

Modifications have no impact on the mapping functionality and do not display any changes

I'm currently in the process of developing a chat application. Essentially, I have a function that retrieves a message and adds it to an array of objects structured like this: newChat = [{message: "new message ", className: "you", ...

javascriptreactjs

When building websites, pages, or applications with React, how do you determine the best choice between JavaScript, TypeScript, or JavaScriptXML?

After completing my portfolio and an eCommerce website design using Figma, I started learning React and Tailwind with Vite. I'm comfortable with basic JavaScript but now I want to understand the differences between .js, .jsx, and .ts files when workin ...

javascriptreactjstypescripttailwind-cssvite

Can webpack or React be set up to automatically import files, eliminating the need to manually use the `import` statement each time?

On a regular basis, I find myself typing: <div style={{display:'flex'}}> ... </div> But it would be more convenient to simply use: <Row> ... </Row> However, I don't want to have to import Row from './Row&ap ...

javascriptreactjswebpackeslint

What steps can I take to address this Material UI alert and deliver a solution that adds value?

I am currently working on fetching API data (specifically category names) from the back-end (Node.js) to the front-end (React). My main objective right now is to populate a Select component from Material UI. To fetch the API data, I am utilizing Express an ...

javascriptreactjsaxiosmaterial-uiwarnings

Sending information between children components in VueORTransferring data between

So, I have a question regarding the Authentication section of my application. Within my application, I have various components and routes, including register and login. The register functionality is working properly with the API, storing both the usernam ...

javascriptauthenticationvue.jstokenregistration

What sets apart the two syntaxes for JavaScript closures?

Similar Query: Is there a distinction between (function() {…}()); and (function() {…})();? I've come across a way to prevent variables from becoming global by using the following syntax: (function ($, undefined) { })(jQuery); Rec ...

javascriptjqueryjquery-plugins

Prevent Scrolling While Dragging in Material-UI Grid

I'm currently developing an application that features multiple columns in a MUI Grid, enabling horizontal scrolling. This app serves as a task planner, and I aim to implement drag-and-drop functionality for tasks moving between the visible columns on ...

cssreactjsmaterial-uidrag-and-dropreact-beautiful-dnd

Using Rails to fetch a remote page using AJAX

Currently using Rails3 and attempting to retrieve a remote page via ajax from (https://play.google.com/store/apps/details?id=). $.ajax({ url: app_url, type: 'GET', data: "id=<id>", crossDomain : true, dataType ...

javascriptruby-on-railsajaxjquery

Display an image from SQL using a link that does not require JavaScript

Greetings! I am faced with a task involving a car table in my SQL database. This table includes columns for the car make and a column named picture of type: Picture(image, null) When displaying the cars in a repeater, it typically appears like this: < ...

c#asp.netsqlhtmlimage

What is the most effective method for retrieving a PHP return value using Ajax?

As I work on creating a validation form in Ajax and PHP, I find myself unsure of how to fetch values from PHP. Can anyone guide me through this process? For instance: The validation form exists in index.php while the page containing the function is check ...

phphtmlmysqlsqlajax

Substitute placeholders in array with information using a loop

I have a question regarding implementing an autosort feature in JavaScript. I want my page to automatically sort data rows based on different time intervals selected by the user through checkboxes. The data updates every 3 seconds, and the autosort functio ...

javascriptjquery

Incorporating dynamic JavaScript animations with immersive 360-degree images

I've been exploring ways to replicate a solution similar to this one: Sample During my research, I came across some lightweight jQuery plugins that can enable 360 degree image rotation. However, there are still a few things I haven't figured out ...

javascriptjqueryhtmlcsscss-shapes

Toggling display of divs with jQuery using plus and minus icons

Is it possible to use two different icons as a sprite image for when the show and hide functions are active on a div element? For instance, having a + icon displayed when showing the div, and then switching to a - icon when hiding it. The current code I ...

jqueryhtmlcsshideshow

Potential bug in Internet Explorer with positioning of relative sized table-cell element

I am struggling a bit here. On my webpage, I have background images that are sized to fit the container and the layout is responsive, with bubbles of images and headings positioned around it (resize the browser window to see how everything is placed). The ...

htmlcssinternet-explorercss-position

Error: Unable to execute fields.map function while generating a dynamic sitemap using next-sitemap module

I'm in the process of creating a dynamic sitemap for my website and here's the code I'm using: import { GetServerSideProps } from 'next'; import { getServerSideSitemap, ISitemapField } from 'next-sitemap'; import { makeSl ...

javascriptreactjstypescriptnext.jssitemap.xml

Does creating a form render the "action" attribute insignificant in an AJAX environment?

When submitting forms exclusively through AJAX, is there any advantage to setting the action attribute at all? I have yet to come across any AJAX-form guides suggesting that it can be left out, but I fail to see the purpose of including it, so I wanted t ...

javascripthtmlajaxformsajaxform