How can I align two div buttons at the top and bottom to appear on the left and right sides?

How can I change the position of two buttons from top and bottom to left and right as shown in the second image? I am utilizing Floating Vue, so the buttons will be contained within a div. Is it feasible to adjust their position accordingly? Check out the sample here >>> View minimal example
https://i.stack.imgur.com/2zKxz.pnghttps://i.stack.imgur.com/7ho1z.png


    <div>
      <VDropdown :triggers="['hover']" placement="top-start">
        <button>Test</button>
        <template #popper>
          <div style="padding: 1rem">Help Me</div>
        </template>
      </VDropdown>
      <VDropdown :triggers="['hover']">
        <button>Test 2</button>
        <template #popper>
          <div style="padding: 1rem">Hello t2</div>
        </template>
      </VDropdown>
    </div>
  

Answer №1

To center the elements on the page, wrap them in a parent div and apply the style display: flex;. You can also add justify-content: center; to keep everything centered.

Here is the modified code:

<div class="dropdowns" style="display: flex; justify-content:center;">
    <VDropdown :triggers="['hover', 'focus']" placement="top-start">
      <button>Test</button>
      <template #popper>
        <div style="padding: 1rem">Help Me</div>
      </template>
    </VDropdown>
    <VDropdown :triggers="['hover', 'focus']">
      <button>Test 2</button>
      <template #popper>
        <div style="padding: 1rem">Hello t2</div>
      </template>
    </VDropdown>
</div>

I hope this solution works for you!

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

Deploying a Vue and Express application on Heroku without utilizing the Single Page Application located in the server/public directory

I have deployed my application on Heroku, and the routes are returning JSON files. However, I want to serve the Single Page Application (SPA) located in my ./server/public folder as the index.html file. Whenever I access the Heroku app, it displays the JSO ...

saving information into a MySQL database

I am facing an issue where I am trying to write data to MySQL. When I input the data and press the submit button, the console log message from the function indicates that everything is okay. However, upon checking the database, there is nothing saved. Can ...

What steps can be taken to eliminate the 1-pixel line between the background and gradient?

How can I remove the line that appears between the block and the gradient background when zooming in, especially noticeable in Safari (After zooming a couple times, Cmd +) For more details, please refer to this jsfiddle link: http://jsfiddle.net/lokapujya ...

"Utilize jQuery's append method to dynamically add elements to the DOM and ensure

I am currently facing an issue with my AJAX function that appends HTML to a page using the jQuery append method. The HTML being appended is quite large and contains cells with colors set by CSS within the same document. The problem I'm encountering i ...

Issues with select options not functioning correctly in knockout framework

Currently, I am engaged in a project where data is being retrieved from an API. The main task at hand is to create a dropdown list using select binding. In order to do so, I have defined an observable object to hold the selected value within my data model. ...

CSS declarations that have not been acknowledged or acknowledged

While working on a client's stylesheet today, I came across the following code: p { -webkit-hyphens: auto; -webkit-hyphenate-character: "\2010"; -webkit-hyphenate-limit-after: 1; -webkit-hyphenate-limit-before: 3; -moz-hyphens: manual; orphans: ...

Looking to showcase a .tif image in your Angular project?

This code is functioning properly for .png images. getNextImage(imageObj:{imageName:string,cityImageId:number,imgNumber:number}):void{ this.imgNumber= imageObj.imgNumber; this.imagePath=`assets/images/${imageObj.imageName}.png`; this.cityIma ...

Unusual margin glitch discovered in Chrome version 9

Encountered a strange issue with Google Chrome 9: A left-margin for an input element is specified but Chrome fails to apply it upon page load. Oddly enough, when I toggle the specific declaration off and then back on using Developer Tools, the margin is f ...

The AWS Cognito User Interface utilizes a hash in order to incorporate parameters during its invocation of the callback page

I'm encountering an issue with the AWS Cognito provided UI interface. When attempting to use the provided UI, I make a call to the endpoint using the populated URL: The issue arises after authentication when Cognito utilizes a # to return the requir ...

What is the best way to horizontally align an element within a Material UI Grid item?

How do I align elements in the center of a Material UI Grid item? Check out this code snippet from my React project: <Grid container> <Grid item xs={4}> // Other content goes here </Grid> <Grid item xs={4}> // How can ...

The module 'myapp' with the dependency 'chart.js' could not be loaded due to an uncaught error: [$injector:modulerr]

Just starting out with Angular.JS and looking to create a chart using chart.js I've successfully installed chart.js with npm install angular-chart.js --save .state('index.dashboard', { url: "/dashboard", templateUrl ...

What is the best way to position a button to the right side of the screen?

Is there a way to align a button to the right of a page? I attempted using text-align: right; and align-content: right; In addition, I want the button to utilize display: flex; #hideShow { display: flex; text-align: right; align-content: right; ...

Unusual phenomenon of overflow and floating point behavior

HTML and CSS Output Example: <div id="float_left"> DIV1 </div> <div id="without_overflow"> DIV2 </div> CSS Styling: #float_left{ float: left; width:200px; background-color: red; } #wit ...

Encountering a NullPointerException when transferring inputs from scala.html to Controller as a form in Play framework (version 2.8.*) using

I am currently developing a Java web application using the Play Framework (2.8.19). In the process of creating a registration page, I encountered an issue with passing inputs from the registration page written in Scala to the controller class that is respo ...

Ways of accessing an array within an if statement

I have a dashboard with admin privileges for my application. In this dashboard, the admin can select a user from a dropdown list. Once a user is selected, I make an AJAX call to retrieve the user's data and store it in a variable named $result. Howeve ...

Include an additional icon without replacing the existing one on the mouse cursor

I am looking for a way to enhance the user experience by adding an icon that appears when hovering over an HTML element, serving as a subtle hint that the user can right-click. Instead of replacing the default cursor, which varies across platforms and doe ...

Placement of the Zend submit button

How can I position the submit button at the bottom of a form wrapped in an HTML table, when calling two forms from the same controller? Currently, the button is stuck between the first form and the table. I attempted to assign the element in my controller ...

Is it possible to distinguish CSS for varying input types?

Is it possible to style input type=text/radio/checkbox elements differently using CSS? I'm referring to ways other than just adding a class ...

Ways to reduce the size of the background image in a select element?

Utilizing the bootstrap form-select select element : <select class="form-select listbox_length_menu_datatable" <option value='5'>5</option> <option value='10'>10</option> <option value ...

Is there a way to apply a custom CSS to Bootstrap without altering its appearance?

Check out this code snippet <link rel="stylesheet" href="css/bootstrap.css"> <link rel="stylesheet" href="css/sub-cat.css"> I am having trouble with my CSS. I tried to modify the "Caption" class in Bootstrap by adding some new styles in "sub- ...