Arrange components in a table format in a horizontal manner

I am currently working on developing an App that features a slide in/out menu. The challenge I am facing is getting the images to display in two rows within this menu and implementing a horizontal scroll functionality. Additionally, I would like to include arrow buttons for navigation.

However, I am encountering difficulty arranging the images in a horizontal layout with two rows. They keep appearing vertically instead of horizontally as intended.

Another issue I'm experiencing is that when more images are added, the right arrow disappears, but reappears when scrolling to the end. I'm unsure why I can't establish a fixed scroll area without affecting the other elements.

var step = {};
var stepsOpen = false;

function onHandleClick() {
    if (stepsOpen) {
        document.getElementsByClassName("StepMenu")[0].setAttribute("style", "top: -77px;");
        document.getElementsByClassName("Handle")[0].setAttribute("style", "top: 102px;");
    } else {
        document.getElementsByClassName("StepMenu")[0].setAttribute("style", "top: 102px;");
        document.getElementsByClassName("Handle")[0].setAttribute("style", "top: 281px;");
    }
    stepsOpen = !stepsOpen;
}
body{
    margin:0;
    height:100%;
    background: #000000;
}
html {
  font-family: 'SST Japanese Pro';
  font-size: 62.5%;
  height: 100%;
  width:100%;
  margin: 0;
  padding: 0;
  -webkit-user-select: none;
  user-select: none;
}
.Title{
  background: linear-gradient(#000000, #2a2a2a);
  font-size: 28px;
  color: #b9b9b9;
  top:0;
  left: 0;
  position:fixed;
  margin: 0;
  width: 100%;
  height: 102px;
  line-height: 102px;
  z-index:2;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.StepMenu{
  background: #2a2a2a;
  margin: 0;
  padding: 0;
  position:relative;
  display:flex;
  height: 179px;
  width:100%;
  top:-77px;
  transition: 0.5s;
}

.stepContainer{
    float:left;
    top:0;
    width:100%;
    height: 100%;
    display:flex;
    flex-direction: row;
    align-items:baseline;
}

.Stitle {
    font-size: 17px;
    color: #a7a7a7;
    width: 200px;
    left: 0;
    height: 50%;
    margin: 0;
    align-items: center;
    display: flex;
    padding-left:20px;
}

    .Steps {
        width:90%;
        height: 179px;   
        overflow: auto;
    }

        .lines {
            height: 89.5px;
            width: 100%;
            display: table;
            table-layout: fixed;
        }

img {
    width: 97px;
    height:55px;
    background-image: url('../res/image/tuna.jpg');
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-bottom: 31px;
    display: table-cell;
}

::-webkit-scrollbar {
    width: 0px;
}

.arrow {
    border: solid white;
    position: relative;
    padding: 10px;
    margin: auto;
}

.right {
    padding: 0;
    width: 0;
    height: 0;
    border-top: 80px solid transparent;
    border-bottom: 80px solid transparent;
    border-left: 20px solid #959595;
    border-right: 0px;
}

.left {
    padding: 0;
    width: 0;
    height: 0;
    border-top: 80px solid transparent;
    border-bottom: 80px solid transparent;
    border-right: 20px solid #959595;
    border-left: 0px;
}

.Handle {
    width: 87px;
    top: 102px;
    margin: auto;
    margin-top: 0px;
    background-color: #2a2a2a;
    position: absolute;
    left: 0;
    right: 0;
    height: 13px;
    padding: 4px;
    transition: 0.5s;
    display:flex;
}

.Htext {
    font-size: 11px;
    color: #959595;
    width: 80%;
    margin-left: 10px;
    }

.Harrow {
    position: relative;
    width: 0;
    height: 0;
    margin-right:10px;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #959595;
}
<!DOCTYPE html>
<html>

  <head>
    <meta charset="UTF-8">
    <title>Step</title>
    <link rel="stylesheet" href="./css/style.css"/>
  </head>

  <body>

      <div class="Title">Recipe Title</div>
      <div class="StepMenu">
          <div>
            <div class="Stitle">Part1</div>
            <div class="Stitle">Part2</div>
          </div>
          
          <div class="stepContainer">
            <div class="arrow left"></div>
                <div class="Steps">
                <div class="lines">
                    <img></img>
                    <img></img>
                    <img></img>
                    <img></img>
                    <img></img>
                    <img></img>
                    <img></img>
                    <img></img>
                    <img></img>
                    <img></img>
                    <img></img>
                </div>
                <div class="lines">
                    <img></img>
                    <img></img>
                    <img></img>
                    <img></img>
                    <img></img>
                    <img></img>
                    <img></img>
                    <img></img>
                    <img></img>
                    <img></img>
                    <img></img>
                    <img></img>
                    <img></img>
                    <img></img>
                    <img></img>
                    <img></img>
                    <img></img>
                    <img></img>
                    <img></img>
                    <img></img>

                </div>
            </div>
           <div class="arrow right"></div>  
        </div>
      </div>
      <div class="Handle" onclick="onHandleClick()">
          <div class="Htext">STEPS</div>
          <div class="Harrow"></div>
      </div>

      <script src="./js/app.js"></script>
  </body>

</html>

javascripthtmlcssweb

Answer №1

Incorporating the float:left property in CSS has enhanced the presentation of the image on my webpage. If you're looking to enhance your layout, this might be a useful tip for you. You can view the code snippet and see how it works by following this link to my fiddle.

img {
    width: 97px;
    height:55px;
    background-image: url('../res/image/tuna.jpg');
    margin-left: 12.5px;
    margin-right: 12.5px;
    margin-bottom: 31px;
    display: table-cell;
    float:left;
}

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

What methods can I use to modify the text being shown in Angular HTML?

In my Angular template, I have 6 tabs being displayed: <tabset class="tabs"> <tab *ngFor="let option of options" [heading]="option.type" > <!-- tab content --> </tab> The heading for each tab is currently in a rather ...

htmlangulartext

The issue of the WordPress sidebar dropping to the bottom of the page in Internet Explorer

Well, I've been scratching my head for the past two days trying to figure this out but so far no luck! The sidebar looks just fine in Firefox and Chrome, sitting pretty on the right where it belongs. But when it comes to IE, it decides to play hide a ...

cssinternet-explorerwordpress

The result of calling Object.keys(obj) is not being shown on the screen

I have come across a code snippet that functions perfectly fine in the console, however, it is not being displayed on the screen. Any assistance in resolving this issue would be greatly appreciated. {Object.keys(flags).forEach(product => { return ( ...

javascriptreactjs

unpredictable actions resulting in an ajax timeout

I'm working on a web project and using jQuery to make an AJAX request. However, I need to prolong the timeout to almost 10 minutes. Strangely, it keeps timing out after only 2 minutes. Is there a limit in jQuery for waiting for responses to requests? ...

javascriptjqueryajaxrestrequest

Ways to set a random value to a data attribute from a specified array while using v-for in Vue.js?

In my main Vue instance, I have a data attribute that consists of an array containing 4 items: var app = new Vue({ el: '#app', efeitosAos: ['fade', 'flip-up', 'slide-up', 'zoom-in'] ...

javascriptvue.js

implementing a SetTimeOut function following the clicking of a button

Hey there, I've been working on a code snippet that switches the display state from block to none with an onClick function. However, I'm looking to add a delay before the state change happens so that there's time for an animation effect to ...

javascriptjqueryfunctionsettimeout

Node.js offers a variety of routing options and URL endpoints

app.use('/api', require('./api')); app.use('/', require('./cms')); The initial path is designated for my public API, while the latter is intended for the CMS dashboard. However, the setup is flawed as localhost:80/a ...

javascriptnode.jsexpress

The color of the Bootstrap font remains unchanged and the responsiveness of the navbar button is not functioning correctly

Just starting out with frontend development and my professor recommended trying Bootstrap for practice. I attempted to code a simple webpage, but ran into some issues. Here is the code I used: https://github.com/nguyencuc2586/project1 I encountered a pro ...

htmlcssbootstrap-4bootstrap-5

Angular's inline style manipulation fails to function in IE browser

I am facing an issue with setting the position of a div based on the return value of a function in an angular controller Although it works fine in FireFox and Chrome, Internet Explorer is interpreting {{position($index)}}% as a literal string value, resul ...

htmlangularjsinternet-explorerangularjs-ng-repeatinline-styles

Is there a way to dynamically import images in Next JS without having to place them in the public folder?

Currently, I am developing a textbook website in which authors contribute textbook folders containing markdown files and images: textbooks ├───textbook-1 │ ├───images │ └───markdown-files └───textbook-2 ├── ...

javascriptnode.jsnext.jsmarkdown

Uncertainty surrounding the distinction between global variables (var) and block variables (let, const) in Node.js

It's common knowledge that var is a global variable in node js and can be accessed from anywhere. However, I found myself perplexed by the following examples: In the first example, accessing global_1 poses no issues as it is a global variable. var g ...

javascriptnode.js

Inconsistencies in spacing among flex items with flexbox styling

https://i.sstatic.net/oT9dgpaA.png NavBar.js import React from "react"; import ReactDOM from 'react-dom'; import ReactDOMServer from 'react-dom/server'; import './NavBar.css'; function NavBar() { const heading ...

cssreactjsflexbox

Using JavaScript to Request an Access Token from Reddit's API

Struggling with the POST request format to retrieve the access token using the Reddit API. I am following the guidelines for OAuth2 and successfully extracted the initial 'code' from the URL after user authorization. However, I am unsure of the c ...

javascriptnode.jsfetch-apix-www-form-urlencoded

Exploring the differences between utilizing request.body in building RESTful APIs with Django versus Node.js

As I dive into learning the Django framework, my main aim is to leverage this knowledge in creating a rest api. Although I've looked into using django-rest framework, my current job necessitates a focus on Django specifically. In my journey so far, I ...

javascriptpythonnode.jsdjangoexpress

Properly Escaping Quotes When Inserting a Variable into a Link with Multiple Quotes

Currently, I am in the process of setting up a link to Adobe's Aviary web app, and it requires input in a specific format: <a href="#" onclick="return launchEditor('editableimage1', 'http://www.mywebsite.com/IMAGE.jpg');">E ...

javascriptvariablesescapingquotes

Leverage variables from different Vue components and link them together

I'm currently working on two different sections of the website First: Is it acceptable to use one instance within another, particularly with v-model? Are there any drawbacks to this approach? Second: Is there a way to reference each other, such as p ...

javascriptvue.jsvuejs2

What is the best way to show the associated ul tag?

I've constructed the following HTML: <input id="<code generated id>" type="text" value="select"/> <div id="<code generated id>" class="popup"> <ul id="<code generated id>" class="none"> <li>A</li& ...

javascriptjquery

Unable to find the import "@mui/x-charts/PieChart" in the file "src/components/Pie/Pie.jsx". Could the file be missing or spelled incorrectly?

I utilized the PieChart component in my pie.jsx file pie.jsx import { PieChart } from '@mui/x-charts/PieChart'; const Pie = () => { return ( <div> <PieChart series={[ { data: [ ...

javascriptreactjsinstallationmaterial-uipie-chart

Combining items in JavaScript using a shared key

Is there a way to combine 4 separate arrays of objects into one big object based on the keys inside an object? For example: OUTPUT: What I want to achieve. [ { "bugId": "", "testerId": "", "firstName": "", "lastName": "", "country": " ...

javascriptjsonecmascript-6lodash

Numerous XMLHttp requests causing JSON data to be overwritten

I am facing an issue where my JSON data is being overwritten by the result of the last XMLHttpRequest made for each country. Is there a way to prevent this from happening? Below is the code snippet in question: function getDataBetween() { for (var i = ...

javascriptjsonxmlhttprequest