When attempting to align buttons to the right side, encountered a surprising issue with their positioning

I need help moving the buttons above the chart in my JS Fiddle to the right-hand side.

When I apply the class pefBut to the div with the id range-butts-index, the buttons disappear. However, when I remove the class, the buttons reappear on the left side. I'm puzzled as to why adding this class causes the buttons to vanish?

html

<div id="IndexArea">
        <div id="range-butts-index" class='perfBut'>
            <button class="ui-button ui-widget ui-corner-all" data-range="5">5d</button>
            <button class="ui-button ui-widget ui-corner-all" data-range="20">MTD</button>
            <button class="ui-button ui-widget ui-corner-all" data-range="999">Max</button>
        </div>
        <div id="chartIndexPerf"/div>
</div>

css

.perfBut {
 float: right;
}

Answer №1

Instead of using float: right, try this:

.perfBut {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}

To see the difference, check out this link: https://jsbin.com/abcdefg/edit?css,output

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

Leveraging PHP to manipulate HTML elements

I have an example of a basic HTML page: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8> <title>Document</title> </head> <body> <p id="demo">Nothing to see here</p> & ...

What is the best way to postpone one of the 3 ajax requests?

Can anyone assist me with handling AJAX forms? I am trying to ensure that the smallest one is executed after the others, but I also want to introduce a delay in the process. I attempted to utilize setTimeout(), however, it does not seem to be functioning ...

Deciding on pixel values, percentages, and sizing elements within CSS styles

For all you web development experts out there, I have a question regarding CSS styles. I often see precise pixel or percentage measurements used for properties like "padding" and "height." Experienced developers seem to effortlessly position their content ...

What is the best way to show and hide the information in a FAQ section when each one is clicked?

const faqItems = document.getElementsByClassName("faq-question"); const faqContents = document.getElementsByClassName("faq-content"); for (item of faqItems) { console.log(item); item.addEventListene ...

Images on small screens are not displaying properly on responsive cards

I've been struggling with making a card responsive for smaller screens. No matter what I try, some of the images get cut off when the screen size is reduced. I need to keep it small enough to fit on a small screen without sacrificing the appearance on ...

How to Retrieve the Following Element in a Table Using Javascript

https://jsfiddle.net/en6jh7pa/1/ I am encountering an issue with accessing the next element, as it is returning null. When I pass "this" as the onclick parameter, I expect to be able to grab the next element using this keyword. However, it seems to be re ...

Why does Angular Redirection initiate both my method and NgOnInit?

As a beginner in Angular, I am encountering an issue with Angular Redirection. Whenever I manually clear storage, the code executes ngOnInit, prompts an error, and redirects to the Login page as expected. However, when I attempt to do the same using the lo ...

Inconsistent Failures Plague JQuery-Servlet Post Requests

Recently, I have started working with JQuery and encountered a strange issue. When I try to post my HTML form data to a servlet and print it out, most of the time (about 7 out of 10 times) it works perfectly fine with new values. However, the other 3 times ...

How can one set relative paths for links when including a file from a different directory that contains links?

My project directory is structured as follows: root css img src login login.php dashboard basic header.php footer.php profile.php manage.php department ...

The href attributes are not being retrieving correctly

I'm currently working on extracting the URLs for each restaurant listed on this page and have developed a Python script for this purpose: import time from selenium import webdriver from selenium.webdriver.common.keys import Keys browser = webdriver ...

Double dragenter events triggered before dragleave in HTML5 drag and drop functionality

Currently, I'm researching HTML5 Drag and Drop functionality by using this resource. However, I've encountered an issue with the dragenter event that seems to fire twice for child elements before the dragleave event. Because of this, the dashed b ...

How can JavaScript be used to create a unique signup and login process on

I am struggling with storing sign up and login details in JavaScript. In my previous project, I used PHP and a database to handle this information, so transitioning to JavaScript has been challenging. Here is an example of the sign-up HTML code: <!DOC ...

Bootstrap Button Problem: Difficulty arranging buttons in a neat way, unable to position them next to each other

I'm currently working on a real estate website project and have designed a Photoshop template which is uploaded on Behance. Check it out here. Right now, I'm creating the static version of the real estate store template and facing an issue with ...

Element widths are displaying uneven alignment

I can't seem to wrap my head around what's happening here. I've got an HTML layout with a header, sidebar, and central content page. Both the sidebar and central content are within the same div acting as a clearfix. I floated the sidebar le ...

When the height of the window decreases, scrolling is not implemented

Having trouble adjusting the height of my Responsive Modal when the window height decreases. The content is slipping under the window and the scroll bar isn't adjusting accordingly. It seems like the nested div structure is causing issues. https://i.s ...

Incorporating random images into diverse div containers every time

I previously asked this question, but it was too long and not specific enough. So here is a revised version of my query. For fun, I am creating a game based on instructions I found online. The game involves 12 cards with images face down. You click on two ...

Is it possible to decrease the HTML font size when making the website responsive?

I made the entire website using rem units due to utilizing the bootstrap 4 alpha version. Now, I am ready to begin the responsive design of the site. My html {font-size: 16px} declaration is set, so I am wondering if I can adjust the size of html in the m ...

Modify the background color of column headers in a Material UI DataGrid as you scroll down vertically

In my React(NextJS) project using material UI, I have implemented tables (DataGrid component from material UI) with distinct background colors in the column headers, as shown below: https://i.sstatic.net/zd3Iu.png However, I encountered an issue where ra ...

Strategies for aligning tooltips with the locations of dragged elements

One of my projects involves a simple drag element example inspired by Angular documentation. The example features a button that can be dragged around within a container and comes with a tooltip. <div class="example-boundary"> <div ...

Show whether the day is even or odd with the JavaScript getDay object

I'm currently working on a task where I need to show the text "Even Day" if the day of the month is 2, 4, 6..., and "Odd Day" for days such as 1, 3, 5, and so on. I attempted to achieve this by setting up an array linked to the getDay object, but unfo ...