Arranging buttons vertically within a div container

I have set up a div for some buttons in a sidebar layout. However, I am unsure how to stack them vertically...

Initially, I tried using two divs stacked on top of each other, but this did not work well with different screen sizes as the buttons were not aligned properly...

Any suggestions on how to achieve this?

#sideBar {
  position: fixed;
  right: -29px;
  top: 52vh;
  display: inline-grid;
}

#feedbackBtn {
  z-index: 1000;
  transform: rotate(270deg);
}

#helpBtn {
  z-index: 1000;
}
<div id="sideBar">
  <Button id="feedbackBtn" onClick={onButtonClick} design="Emphasized">
          Feedback
        </Button>

  <Button id="helpBtn" icon="sys-help" onClick={onButtonClickHelp} design="Default"></Button>
</div>

Image

htmlcss

Answer №1

To enhance the appearance of #sideBar, you may want to eliminate the display: inline-grid property, as shown below:

#sideBar {
  position: fixed;
  right: 0px;
  top: 52vh;
  transform: rotate(270deg);
  z-index: 1000;
}
<div id="sideBar">
  <button id="feedbackBtn">Feedback</button>
  <button id="helpBtn">Help</button>
</div>

Answer №2

It seems like only the sideBar CSS is necessary in this case. By utilizing the following attribute, you can ensure that it sticks to the right while still allowing the button to function normally.

One key point to consider is:

  • I have transferred the z-index to sidebar as all buttons within it should take precedence over other elements. Placing it on the sidebar directly instead of its child elements achieves the desired effect.
  • The transform property has also been applied to sidebar so that the rotation affects the "container" of the sidebar. Think of it as a container with two buttons next to each other that is then rotated, explaining why the buttons remain side by side rather than overlapping.

Apologies for any language shortcomings

#sideBar {
  position: fixed;
  transform: rotate(270deg);
  z-index: 1000;
  right:-10px;
  top: 52vh;
}
<div id="sideBar">
  <Button id="feedbackBtn" onClick={onButtonClick} design="Emphasized">
          Feedback
        </Button>

  <Button id="helpBtn" icon="sys-help" onClick={onButtonClickHelp} design="Default">Help</Button>
</div>

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

Submit the value of an anchor tag using a form

Can anchor tag values be sent through a form? <a href=# id="link">Some Value</a> I want to utilize this in a web form where options are in a ul li a format instead of select option. Is there a way to achieve this without using select option? ...

javascriptjqueryhtmlajax

Unpredictable spacing in a row arrangement thanks to Tailwind`s randomized

https://i.sstatic.net/QkqVo.png I am facing difficulty in creating a 2-column fixed layout with precise width control. The layout I have currently seems almost perfect, but there is some strange padding on the top-left element. Parent <Layout> ...

htmlcsstailwind-css

What is the best way to access an element's sibling using JQuery within a function?

How can I use JQuery to set an element to match the value of its sibling? In a table with multiple fields, when clicking an Edit button, I want to copy the label value to its adjacent input field: <table style="width:90%"> <tr> <td&g ...

javascripthtmljquery

Automated inclusion of <a> tags for headers implemented in Pandoc

This specific Markdown syntax: # Starting Point Gets transformed into this exact HTML code once processed with Pandoc: <h1 id="starting-point"><a href="#starting-point">Starting Point</a></h1> The technique I follow for using Ma ...

htmlhyperlinkmarkdownpandochtml-heading

What is the best way to prevent a strikethrough from appearing on the delete button in my JavaScript TO-Do application?

I'm working on coding a to-do app using JavaScript, HTML, and CSS. The issue I'm facing is that when I add the text-decoration: line-through property to the list items, it also affects the X icon used for deleting tasks. I suspect this problem ar ...

javascripthtmlcss

Inheriting the width of a sibling element through span tags

I am dealing with a situation where I have a div containing a header element and a span. Is there a way to prevent the span from expanding the size of its parent div? In other words, I want the width of the span to be limited to the width of the adjacent ...

htmlcsstwitter-bootstrap

Creating a dynamic star rating system using CSS

A unique code pen project showcasing a pure css star rating interface can be found at: https://codepen.io/yaworek/pen/JJpEaZ Below is the custom css part: /*** * Custom Pure CSS Star Rating Widget for Bootstrap 4 * * www.TheMastercut.co * ***/ ...

javascriptjqueryhtmlcss

How to customize the navigation bar color with Vue 3 and Bootstrap 5

Here's the navigation bar code: <nav class="navbar bg-body-tertiary navbar-expand-lg" data-bs-theme="dark" :class="{'navbar-expand-lg navbar-dark bg-dark ' : useDarkNavbar, 'navbar-expand-lg bg-light&a ...

htmlcssvuejs3bootstrap-5

What is the best way to insert a specific number of HTML-formatted elements onto my webpage?

I am attempting to utilize PHP to achieve the following: <if !empty($list) {echo . . . ?> My goal is to receive this output: Additional options: <p><input type="checkbox" name="1">1</input></label></p> & ...

phpmysqlformsserializationhtml

Creating keyboard shortcuts using Angular is a skill worth mastering

Struggling to figure out how to implement keyboard shortcuts on my website. Specifically, wondering about coding a shortcut like ctrl + t to increase the font size. Any guidance on where and how to do this? ...

htmlangulartypescriptkeyboard-shortcuts

Is it possible to trigger an AJAX request twice?

<table><form action="/roulette.php" name="ismForm" method="get"> <select id="selez3c" name="bet3c" size="1" class="selezionev" > <option value="0.50">$0.50</option> <option value="0.75"& ...

jqueryhtmlajaxformsinput

Setting up the bxslider plugin in HTML

I'm having trouble getting an image slider (bxslider) to work on my website, despite following the setup instructions provided on . Here is the html code I've used: <!doctype html> <html> <head> <!-- jQuery library (se ...

htmlimageslidergallerybxslider

I am having trouble setting margins for a sticky position in a WordPress website

Can someone help me reposition the left-sidebar with a sticky top to be below the main header when scrolling down? Adding margin-top to sticky-top under col-sm-1 is not working. <style> .col-sm-1 .sticky-top { margin-top: 50px} </style> ...

csswordpressbootstrap-4

When the window is resized, the css('position') method may return undefined

Here is the code I am using to detect the browser resize event: window.onresize = function(){ var style = $('#button-selection').css('position'); if(style == "relative"){ $("#button-section").css("position"," "); }else if(style == ...

jquerycss

Fade in only a single element from a specific class using Jquery

I recently attempted to create a script that would fade in a tooltip when hovering over a link or image. Everything was working fine except for the fact that only one tooltip would appear at a time. In other words, I wanted to hover over an image and have ...

javascriptjqueryhtmlcssfadeto

An HTML tag for hiding elements on a web page

I am facing a challenge in concealing a specific dive element within the footer section of one particular page. Despite attempting to hide the div by using inspect, it ends up hidden on all pages. I have also tested out the code below, but unfortunately ...

css

What is the best way to define the maximum width for responsive images in Bootstrap 4?

Query: How can I control the max-width of an image in Bootstrap 4 without losing its responsiveness? Context: Bootstrap 4's .img-fluid class ensures images remain responsive. The image is set to scale with the parent element by utilizing ma ...

cssbootstrap-4responsiveness

What is the best way to ensure the navigation bar stays at the top of the window once it has reached

I have a sample js fiddle provided here. The navigation bar is positioned right below the "Hello World" section, and the content follows beneath the nav bar. Is there a way to make the navigation bar stick to the top of the window once it reaches that poin ...

htmlcssfixednav

Flexbox helps create responsive layouts with ease

Utilizing flex to centrally position my element within my layers has worked well for me, but I encountered an issue when switching to a smaller screen size. The element simply scales down in size instead of taking up the full width like it does with Bootst ...

javascriptjqueryhtmlcssflexbox

Align the input labels to the right

In the demonstration below, an example is provided for aligning labels to the right of an input field. Is there a way to ensure that the input field takes up 100% of the width? Additionally, can an input be replaced with a textarea or another div element w ...

htmlcss