Avatar billede dane022 Seniormester
16. februar 2024 - 08:29 Der er 1 kommentar og
1 løsning

Bredde på div elementer

Jeg har en "tabel" bestående af div elementer, hvor indholdet af den enkelte række hentes fra SQL. I den øverste række (under overskriften), er der mulighed for at tilføje ny række, dvs. det er input felter. I den række, der får div elementerne en større bredde og jeg kan ikke greje hvorfor. Det er meningen at de skal have samme bredde som de øvrige rækker.

På en eller anden måde, så er det <form> der giver den forskellige bredde. Hvis jeg fjerner <form>, er bredden den samme i alle rækker.

Fra CSS filen:
.responsive-table {
  list-style-type: none;
  padding: 0;
}

  li {
    border-radius: 5px;
    padding: 15px 10px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 7px;
    width: auto;
  }

  .table-header {
    background-color: #95A5A6;
    font-size: 14px;
    font-weight: Bold;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    display: flex;
  }

  .table-row {
    background-color: #ffffff;
    box-shadow: 0px 0px 9px 0px rgba(0,0,0,0.1);
    display: flex;
    width: auto;
  }

.col {
        flex: 1;
        border: 1px solid black;
        padding: 5px;
}

  .col-1 {
    width: 250px;
    display: inline-block;
  }

  .col-2 {
    width: 300px;
    display: inline-block;
  }

  .col-3 {
  width: 350px;
    display: inline-block;
  }

  .col-4 {
  width: 350px;
    display: inline-block;
  }

  .col-5 {
  width: 250px;
  display: inline-block;
  }

.col-6 {
  width: 250px;
  display: inline-block;
  }
 
@media all and (max-width: 2500px) {

.table-header {
      display: none;
    }


Overskriften:
<div class="container">
<h2>Teammøde referat</h2>
<ul class="responsive-table">
<li class="table-header">
    <div class="col col-1">Dato</div>
    <div class="col col-2">Punkt</div>
    <div class="col col-3">Referent</div>
    <div class="col col-4">Emne</div>
    <div class="col col-5">Indhold</div>
    <div class="col col-6">Ret</div>
</li>

1. række med input felter:
echo "<li class='table-row'>";
echo "<form>";
echo "<div class='col col-1'><input type='date' name='Dato'></div>";
echo "<div class='col col-2'><input type='text' name='Punkt' placeholder='Punkt'></div>";
echo "<div class='col col-3'><input type='text' name='Referent' placeholder='Referent'></div>";
echo "<div class='col col-4'><input type='text' name='Emne' placeholder='Emne'></div>";
echo "<div class='col col-5'><input type='text' name='Indhold' placeholder='Indhold'></div>";
echo "<div class='col col-6'><button type='submit' title='Tryk her for at oprette nyt punkt' id='Ret' value='ret'>Opret</button></div>";
echo "</form>";
echo "</li>";

Eksempel på e øvrige rækker hentet fra sql:
echo "<div class='col col-2'>" . $row["Punkt"] . "</div>";
echo "<div class='col col-3'>" . $row["Referent"] . "</div>";
echo "<div class='col col-4'>" . $row["Emne"] . "</div>";
echo "<div class='col col-5'>" . $row["Indhold"] . "</div>";
Avatar billede keysersoze Guru
18. februar 2024 - 20:47 #1
Hvis du arbejder med tabulerede data hvorfor så ikke bare bruge en tabel?
Avatar billede dane022 Seniormester
20. februar 2024 - 12:50 #2
Problematikken er løst. Det hjalp at bruge block i stedet for flex
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester