简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
CSS row class makes some elements go out of frame, while they should be static and fixed to the bottom of the display
P粉156415696
P粉156415696 2024-04-03 18:48:12
0
1
282

My current page looks like this. After adding the row class so that the two elements are next to each other, the bottom navigation bar is pushed down to where I have to scroll.

Here you can see another page without row elements, where the navigation links are perfectly stuck at the bottom of the display (plants and room navigation elements should not be in the reminder tab (image 1), so ignore This element picture 2) The page is scrollable and keeps my navbar in the correct position, but the outline of the element is incorrect. All green box displays should be on top of one another, along with edit and delete buttons. I tried to fix this using the row class used for Figure 1, but this resulted in the issue in Figure 1.

Here you can see what I want to achieve in the Reminders tab

I am wondering what is wrong with my current css code that causes this error when there is a row element in my html.

If you know of a better way to display items next to each other that prevents this behavior, you are also welcome. 

.row {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #bdbdbd;
    font-family: 'Montserrat', sans-serif;
  }

  .CheckButton {
    margin-left: 30px;
    width: 60px;
    height: 80px;
  }

  .ReminderDescription {
    flex-grow: 1;
    font-weight: bold;
    margin-right: 80px;
  }

HTML code snippet causing the problem

{% block content %}
  {% for reminderInstance in Reminders %}
  <div class="row">
    <div class="CheckButton">
      <form action="{{ url_for('reminder', Plant_id = reminderInstance.Plant_id) }}">
        <button class="NewButton NewButton1"></button>
      </form>
    </div>
    <div class="ReminderDescription "> Give {{ reminderInstance.Plant_name }} water {{ reminderInstance.TimeSinceWaterNeeded }} days ago </div>
  </div>
  {% endfor %}
{% endblock %}

If the problem lies elsewhere, I'll include the entire html page as well as the navigation css code. Reminder HTML

<!DOCTYPE html>
<html>
    <head>
        <title> Reminders </title>
        <meta name="viewport" content="width=devide-width, initial-scale=1.0">
        <meta charset="utf-8">
        <link rel="shortcut icon" href="/assets/favicon.ico">
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='src/nav.css') }}">
        <link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='src/Collection.css') }}">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    </head>
    <body>
        <nav class="nav">
          <a href="{{ url_for('collection') }}" class="nav__link">
            <span class="nav__text">Collection</span>
          </a>
          <a href="{{ url_for('index') }}" class="nav__link">
            <span class="nav__text">Home</span>
          </a>
          <a href="{{ url_for('reminders') }}" class="nav__link nav__link--active">
            <span class="nav__text">Reminders</span>
          </a>
        </nav>
    </body>
</html>

{% block content %}
  {% for reminderInstance in Reminders %}
  <div class="row">
    <div class="CheckButton ">
      <form action="{{ url_for('reminder', Plant_id = reminderInstance.Plant_id) }}">
        <button class="NewButton NewButton1"></button>
      </form>
    </div>
    <div class="ReminderDescription "> Give {{ reminderInstance.Plant_name }} water {{ reminderInstance.TimeSinceWaterNeeded }} days ago </div>
  </div>
  {% endfor %}
{% endblock %}

Navigation CSS

body {
    margin: 0 0 55px 0;
}

.nav {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 55px;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
    background-color: #4ea662;
    display: flex;
    overflow-x: auto;
}

.nav__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
    min-width: 50px;
    overflow: hidden;
    white-space: nowrap;
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
    font-size: 15px;
    color: #ffffff;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.1s ease-in-out;
}

.nav__link:hover {
    background-color: #eeeeee;
}

.nav__link--active {
    padding: 2px 4px;
    border: none;
    text-align: center;
    border-radius:5px;
    background-color: #468454;
    color: #ffffff;
}

P粉156415696
P粉156415696

reply all(1)
P粉905144514
P粉9051445142024-04-04 10:11:30 1 floor

Putting the entire content inside a div (like below with 90% width) solved the entire problem: 

.div-2 {
      margin: auto;
      width: 90%;
      height: 90%;
 }
Like +0
Add Reply
Popular Topics
More>
Popular Articles
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！