Arranging buttons that are generated dynamically in a vertical alignment

Question

Arranging buttons that are generated dynamically in a vertical alignment

Currently, I am in the process of creating a webpage for various items, and everything is going well so far. However, I have encountered an issue while attempting to vertically align the buttons that I am generating using JavaScript within the document.

I have experimented with multiple approaches, such as applying the display style: block; property extensively, but unfortunately, the buttons are not cooperating.

Although I managed to develop a function where the buttons were integrated into a list structure, they lost their button appearance in the process (even though they still retained functionality), prompting me to abandon that solution.

Oddly enough, JSFiddle does not display the buttons properly. Here is the code I am currently working with:

https://jsfiddle.net/jets29sy/8/

// JavaScript code goes here...

# CSS code goes here...

// HTML code goes here...

When previewing the page locally, everything seems to be displaying correctly except for one thing - the buttons are aligned horizontally instead of vertically. At this point, the positioning of the buttons container is not my immediate concern; rather, I am focused on finding a way to vertically align the buttons within the container using JavaScript, HTML or CSS.

javascript jquery html css

Answer 1

Answer №1

How about this:

#foobar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

Answer 2

How about this:

#foobar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

Answer 3

Answer №2

Adding content directly inside the div tag is sufficient, there is no need for an additional span tag within the div (for buttons) and applying CSS to make sure the button has a display: block;.

DEMO

var URLobj = {
   linkname1: "https://stackoverflow.com/",
   linkname2: "https://www.google.com",
   linkname3: "https://en.wikipedia.org/"
};

function exitbutton(){

   var textelement = document.getElementById("text");
   textelement.style.display = "block";

   var buttonelement = document.getElementById("buttons");
   buttonelement.style.display = "block";

   var headerelement = document.getElementById("header");
   buttonelement.style.display = "block";

   var iframe = document.getElementById("iframeID");
   iframe.src = "#";
   iframe.style.display = "none";

   var exitbutton = document.getElementById("buttonID");
   exitbutton.style.display = "none";

}

function iframeLoaded(){
   var iframeID = document.getElementById("iframeID");
   iFrameID.height = 0;
   iFrameID.width = 0;

} // add to game // parent.iframeLoaded();

function add(name, URL) {
   var element = document.createElement("button");

   //Assign different attributes to the element.
   element.setAttribute("value", URL);
   element.innerHTML = name;
   element.onclick = function () {
      document.getElementById("iframeID").src = this.getAttribute("value");
      document.getElementById("iframeID").width = "95%";
      document.getElementById("iframeID").height = "95%";
      document.getElementById("iframeID").style.display = "block";

      var exitbuttonelement = document.getElementById("buttonID");
      exitbuttonelement.style.display = "block";

      var textelement = document.getElementById("text");
      textelement.style.display = "none";

      var buttonelement = document.getElementById("buttons");
      buttonelement.style.display = "none";

      var headerelement = document.getElementById("header");
      buttonelement.style.display = "none";
   };

   var foo = document.getElementById("buttons");

   //Append the element in page (in span).
   foo.appendChild(element);
}

window.onload = function() {
   for (var key in URLobj) {
      if (URLobj.hasOwnProperty(key)) {
         add(key, URLobj[key])
      }
   }
};

#buttons {
   vertical-align: right;
   float: right;
   display: block;
}
#foobar {
   display: block;
}
#text {
   vertical-align: right;
   float: left;
   text-align: left;
}

#buttonID {
  float: right;
}

.btn-group button {
    cursor: pointer;
    display: block;
}

<head scroll="no">
<link rel="stylesheet" href="page.css">
<script type="text/javascript" src="page.js"></script>
</head>
<body scroll="no">
<div id="header", style="block"><h2>Your links are located here.</h2></div>
<div class="btn-group" id="buttons"></div>
<div id="exit"><button type="button" id="buttonID" style = "display: none" onclick=exitbutton()>Exit link!</button></div>
<div class = "frame_div", background-color="blue">
    <iframe id="iframeID", width="0", height="0", align="middle"></iframe>
  </div>
<div class = "text", id="text", style="block">
<tr>
<th>Choose your link from the list.<br></th>
</tr>
</div>
</body>

Answer 4

Adding content directly inside the div tag is sufficient, there is no need for an additional span tag within the div (for buttons) and applying CSS to make sure the button has a display: block;.

DEMO

var URLobj = {
   linkname1: "https://stackoverflow.com/",
   linkname2: "https://www.google.com",
   linkname3: "https://en.wikipedia.org/"
};

function exitbutton(){

   var textelement = document.getElementById("text");
   textelement.style.display = "block";

   var buttonelement = document.getElementById("buttons");
   buttonelement.style.display = "block";

   var headerelement = document.getElementById("header");
   buttonelement.style.display = "block";

   var iframe = document.getElementById("iframeID");
   iframe.src = "#";
   iframe.style.display = "none";

   var exitbutton = document.getElementById("buttonID");
   exitbutton.style.display = "none";

}

function iframeLoaded(){
   var iframeID = document.getElementById("iframeID");
   iFrameID.height = 0;
   iFrameID.width = 0;

} // add to game // parent.iframeLoaded();

function add(name, URL) {
   var element = document.createElement("button");

   //Assign different attributes to the element.
   element.setAttribute("value", URL);
   element.innerHTML = name;
   element.onclick = function () {
      document.getElementById("iframeID").src = this.getAttribute("value");
      document.getElementById("iframeID").width = "95%";
      document.getElementById("iframeID").height = "95%";
      document.getElementById("iframeID").style.display = "block";

      var exitbuttonelement = document.getElementById("buttonID");
      exitbuttonelement.style.display = "block";

      var textelement = document.getElementById("text");
      textelement.style.display = "none";

      var buttonelement = document.getElementById("buttons");
      buttonelement.style.display = "none";

      var headerelement = document.getElementById("header");
      buttonelement.style.display = "none";
   };

   var foo = document.getElementById("buttons");

   //Append the element in page (in span).
   foo.appendChild(element);
}

window.onload = function() {
   for (var key in URLobj) {
      if (URLobj.hasOwnProperty(key)) {
         add(key, URLobj[key])
      }
   }
};

#buttons {
   vertical-align: right;
   float: right;
   display: block;
}
#foobar {
   display: block;
}
#text {
   vertical-align: right;
   float: left;
   text-align: left;
}

#buttonID {
  float: right;
}

.btn-group button {
    cursor: pointer;
    display: block;
}

<head scroll="no">
<link rel="stylesheet" href="page.css">
<script type="text/javascript" src="page.js"></script>
</head>
<body scroll="no">
<div id="header", style="block"><h2>Your links are located here.</h2></div>
<div class="btn-group" id="buttons"></div>
<div id="exit"><button type="button" id="buttonID" style = "display: none" onclick=exitbutton()>Exit link!</button></div>
<div class = "frame_div", background-color="blue">
    <iframe id="iframeID", width="0", height="0", align="middle"></iframe>
  </div>
<div class = "text", id="text", style="block">
<tr>
<th>Choose your link from the list.<br></th>
</tr>
</div>
</body>

Answer 5

Answer №3

Using "display: block" could have fixed the issue you were experiencing.

Upon reviewing your code, it appears that you applied the style to the incorrect location. You placed it within the <div id="buttons">, but it should have been added to each individual <button> element within the div.

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

To achieve the desired outcome, make sure to include the style on those specific elements.

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

Answer 6

Using "display: block" could have fixed the issue you were experiencing.

Upon reviewing your code, it appears that you applied the style to the incorrect location. You placed it within the <div id="buttons">, but it should have been added to each individual <button> element within the div.

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

To achieve the desired outcome, make sure to include the style on those specific elements.

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

Arranging buttons that are generated dynamically in a vertical alignment

Answer №1

Answer №2

Answer №3

Similar questions

Combining the Powers of ExpressJS and MeteorJS

Exploring the utilization of server-side Web Sockets functionality

Error Alert: Invalid Hook Call detected while using the useSelector hook within a Functional Component

Leveraging the power of the 'var' keyword in JavaScript when

What steps do I need to follow to change the background color to white for the <App/> component in solid-js?

Creating HTML tables with PHP for dynamic web content

Trouble with shadow rendering in imported obj through Three.js

Using data across multiple instances in node.js EJS partials

Unable to adjust the height of an MP4 video to properly display within a Material Box in both landscape and portrait orientations

Executing a JavaScript function within Python using Selenium: A beginner's guide

JavaScript parsing error occurred

Navigating a webpage with an HTML5 canvas in a horizontal direction

What are the best practices for managing promises effectively?

The Vue warning states that the property "$store" was attempted to be accessed during rendering, but it is not defined on the current instance

The code encountered a parsing error at 11:1, due to the presence of

Creating unique random shapes within a larger shape on a canvas, as shown in the image

The html wrapping around the jQuery JSON Response adds an extra layer of presentation

Implement Javascript Event Listener

I am currently working with CakePHP and am interested in learning how to expire the admin session

How can I uniquely identify and edit individual cells within an ng-grid using the bgColor property?