The images are positioned within the middle of the page, directly beneath the sidebar, rather than at the top. (Vue.Js)

I'm currently working on a Vue.JS photo website and I've hit a roadblock as described in the title. Despite trying various solutions, after spending two hours back and forth with ChatGPT, I've decided to seek help here.

Below is the code snippet from the parent component (named "MainNav"):

<template>
  <div class="main_container">
    <header class="header mx-5 my-9 absolute text-xl">Gonçalo Dias</header>
    <div class="m-5 mt-80 space-y-1">
      <div
        class="sidebar-item"
        @mouseover="showInnerSidebar"
        @mouseleave="hideInnerSidebar"
      >
        Projects
        <div
          v-if="showProjectsInner"
          class="inner-sidebar space-y-0.5 mt-1 mb-2"
        >
          <div
            v-for="(project, index) in projects"
            :key="index"
            class="inner-sidebar-item indent-4"
            @click="handleProjectClick(project)"
          >
            {{ project.name }}
          </div>
        </div>
      </div>
      <div>Diary</div>
      <div>Info</div>
    </div>

    <ProjectOne
      v-if="selectedProject && selectedProject.name === 'Project 1'"
      :style="{ marginTop: selectedProject ? '10px' : '0' }"
    />
  </div>
</template>

<script>
import ProjectOne from "./ProjectOne.vue";

export default {
  components: {
    ProjectOne,
  },
  data() {
    return {
      showProjectsInner: false,
      selectedProject: null,
      projects: [{ name: "Project 1" }, { name: "Project 2" }],
    };
  },
  methods: {
    showInnerSidebar() {
      this.showProjectsInner = true;
    },
    hideInnerSidebar() {
      this.showProjectsInner = false;
    },
    handleProjectClick(project) {
      this.selectedProject = project;
      this.showProjectsInner = false;
    },
  },
};
</script>

<style lang="scss">
.header {
  top: 0;
  left: 0;
  width: 100%;
}
</style>

The following snippet showcases the code from the child component:

<template>
  <div>
    <div class="main_box project-image">
      <img :src="require('@/assets/Project1/001.jpg')" />
      <img :src="require('@/assets/Project1/005.jpg')" />
      <img :src="require('@/assets/Project1/022.jpg')" />
      <img :src="require('@/assets/Project1/034.jpg')" />
      <img :src="require('@/assets/Project1/036.jpg')" />
    </div>
  </div>
</template>

<script setup></script>

<style lang="scss">
.main_box {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
}
.project-image {
  max-width: 100%;
  max-height: 100vh;
  margin: 4px;
}
</style>

Take a look at the current appearance
without focusing on the image's large size as I need to resolve the issue first

As a beginner, I'm struggling to come up with many solutions. Even with assistance from Chat GPT, tweaking CSS properties and testing multiple variations has not allowed my images to break out of that sidebar container. It seems like a specific issue related to the CSS and template relationship between components, which points to a Vue system problem.

Answer №1

There seems to be an issue in this code with the mt-80 class. Try removing it and observe the outcome.

<template>
  <div class="main_container">
    <header class="header mx-5 my-9 absolute text-xl">Gonçalo Dias</header>
    <div class="m-5 mt-80 space-y-1"> <!--this line--!>
    ...
    </div>
  </div>
 </template>

If the issue persists, feel free to leave a comment below.

Happy-Coding

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 is causing the Jquery form submit event to not trigger?

I am attempting to use jQuery to submit a form. I need the form submit event to be triggered when jQuery submits the form. However, the submit event handler is not being called successfully after the form is submitted. Here is the code snippet: <html ...

Exploring the world of web scraping using Scrapy, Python, and a JavaScript-based website all in one

Hello, I am attempting to scrape the website using the following script: script.py import scrapy from scrapy.crawler import CrawlerProcess from threading import Thread class CourtSpider(scrapy.Spider): name = 'full_page' allowed_domai ...

Content on the website has vanished into thin air

Attempting to retrieve the content of a webpage located at The source code of this page reveals an element labeled "row_1"... However, when attempting to achieve this in my code: reader = new BufferedReader(new InputStreamReader(connection.getInputStrea ...

Smooth scrolling feature malfunctioning in mobile view

While working on my website, I noticed that the smooth-scroll feature works perfectly on desktop browsers. However, on mobile devices, when I click on a link, it does not scroll to the correct position. It always ends up much lower than expected. Any idea ...

Activate the saturation toggle when a key is pressed in JavaScript

I am trying to modify a script that currently toggles the value of a variable when a key is pressed and then lifted. Instead of changing the variable value, I would like to adjust the saturation of the screen based on key presses and releases. How can I ac ...

What triggers a component to be re-rendered?

Struggling to optimize my vuejs app's performance, I can't seem to pinpoint why certain components are constantly re-rendering... Citing the lifecycle hooks, it mentions that a component should indeed re-render when data changes After thoroug ...

relocate HTML files from the src directory to the dist folder using Vite

I am currently working on a Vue.js project with Vite as the build tool. My goal is to tweak the Vite configuration so that the HTML files are directly placed in the 'dist' folder next to the 'assets' folder after building the project. C ...

Concealing the pagination buttons for next and previous in Material-UI TablePagination

Is there a way to remove the next and prev buttons in the TablePagination component without affecting the position of the "Showing ..." text? Should I handle this through CSS styling or by configuring the component settings? ...

Retrieve the value of a tag attribute while the tab is in the active state

Is there a way to extract the value from a specific tag when it is set as active? The tag in question looks like this: <li class="top-tab" role="tab" tabindex="0" aria-selected="true" aria-expanded="true"> TITLE OF SECTION </li> I am interes ...

Tips for preserving the contents of a list with HTML and Javascript

My latest project involves creating a website with a To-Do list feature. Users should be able to add and delete items from the list, which I achieved using JavaScript. Now, my next goal is to ensure that the current items on the list are saved when the pag ...

in vuejs, a legendary row is added to the table every 25 or 50 records

VueJS v-for is functioning properly: <tr v-for="request in requests"> <td>{{request.name}}</td> <td> .. etc .. </td> </tr> Now, I want to insert a legend row after every 25 or 50 records. Here's what I tri ...

Managing environment variables in Nuxt with Firebase: Best practices

I have been working on creating a firebase authentication app that is reusable and fully functional. However, despite exploring various online solutions, I have managed to develop a solution that works well. My concern now is about protecting sensitive dat ...

Tips for resolving a 403 error while utilizing selenium with Python

What is the solution to fixing a 403 error? I have noticed that when trying to access a certain website, I am able to browse for about 30 seconds before encountering a 403 error. This issue only started occurring today, and I find it strange because if m ...

'Error: Object does not have access to the specified property or method 'values'

I've been working on writing some code to retrieve and read a JSON file. It seems to work fine in Chrome, but I'm running into issues with IE11, which is the browser I need to use. I've tried changing variable names, but the problem persists ...

Restrict the number of simultaneous image downloads in HTML

I am currently seeking the most effective solution for throttling image downloads in a Single Page Application. Issue: When on a slow network and navigating to a details page, there is an overload of image downloads occurring which pushes browser connect ...

The navigation bar on the website highlights vibrant green arrows next to the

I'm having trouble implementing a bootstrap menu on my website using the code provided by Bootstrap. The menu is not displaying correctly and instead showing small green UL arrows. I have JavaScript and Bootstrap scripts in my project. Is there a way ...

Differentiating font sizes for headings (h1-h6) based on Bootstrap breakpoints

Is there a way to utilize bootstrap's font size breakpoints (sm, md, lg, xl, etc.) for the various font sizes provided by bootstrap: <p class="fs-1">.fs-1 text</p> <p class="fs-2">.fs-2 text</p> <p class= ...

The ng-model does not reflect changes when using the JQuery datepicker

Currently, I have set up two textboxes for users to choose a date. I am utilizing JqQuery's datepicker UI to showcase a small calendar pop-up whenever the user clicks on the textbox. However, an issue arises when I select a date in the calendar popup ...

What could be the underlying reason for the unusual behavior observed in this range polyfill implementation?

I am attempting to transform an HTML5 range input into a set of radio buttons. Each radio button corresponds to a value within the original range, with text displaying its value. However, I am encountering an issue where the last piece of text, meant to sh ...

When the Bootstrap navbar is collapsed, clicking on it does not result in it opening

I'm attempting to create a collapsible navbar for smaller screens that expands when a button is clicked. However, upon clicking the button, nothing happens and I'm unsure why. <nav class="navbar navbar-expand-lg navbar-light" style="backgro ...