Listing in PHP when clicking button and displays more results that does not hold CSS?

Question

Listing in PHP when clicking button and displays more results that does not hold CSS?

Navigation

#1 by (0 votes)
#2 by (-2 votes)

0

I've created a listing that displays 6 results and below I have a "Show more" button that calls another query that displays 4 results. However, the results of this last query does not maintain CSS. Appears misaligned.

ThecodeIhaveisthefollowing:

<sectionid="portfolio" class="portfolio">
    <div class="container">
        <div class="row">
            <div class="col-lg-10 col-lg-offset-1 text-center">
                <h2>Portfolio</h2>
                <hr class="small">
                <div class="row">
                <?php
            $query=mysqli_query($db,"select id_album, nome, foto from albuns order by id_album ASC limit 6");
             while($cat=mysqli_fetch_assoc($query)){?>
                    <div class="col-md-6">
                        <div class="portfolio-item">
                        <p class="imgDescription"> <?php echo $cat['nome'];?> </p>
                            <a>
                                <img class="img-portfolio img-responsive" src="<?php echo $cat['foto'];?>" onClick="location.href='listagem_album.php?ida=<?php echo $cat['id_album'];?>'">
                            </a>
                        </div>
                    </div>
                    <?php } ?>

             <?php
            $query=mysqli_query($db,"select id_album, nome, foto from albuns order by id_album DESC limit 4");
            ?><div id="fotos" style="display:none"> <?php
             while($cat=mysqli_fetch_assoc($query)){?>
                    <div class="col-md-6">
                        <div class="portfolio-item">
                        <p class="imgDescription"> <?php echo $cat['nome'];?> </p>
                            <a>
                                <img class="img-portfolio img-responsive" src="<?php echo $cat['foto'];?>" onClick="location.href='listagem_album.php?ida=<?php echo $cat['id_album'];?>'">
                            </a>
                        </div>
                      </div>
                        <?php } ?>
                    </div>
                </div>
                <!-- /.row (nested) -->
                 <div id="button"><a class="btn btn-dark">View More Categories</a></div>
            </div>
            <!-- /.col-lg-10 -->
        </div>
        <!-- /.row -->
    </div>
    <!-- /.container -->
</section>

The button code is as follows:

<script>
   $("button").click(function(){
      $("#fotos").fadeIn();
      $("#button").hide();
   });
</script>

Thank you.

php html css

asked by anonymous 11.05.2016 / 15:14

2 answers

CHANGE PHP STATUS [closed] Link is not active

score 0 · Answer 1

Are you using Bootstrap? Review how you are organizing your objects. This is the way provided in documentation :

<div class="row">
  <div class="xxx-xx-#">Conteúdo da sua divisão 1</div>
  <div class="xxx-xx-#">Conteúdo da sua divisão 2</div>//Lembrando q a soma tem que ser 12
</div>
//Outra row
<div class="row">
  <div class="xxx-xx-#">Conteúdo da sua divisão 1</div>
  <div class="xxx-xx-#">Conteúdo da sua divisão 2</div>//Lembrando q a soma tem que ser 12
</div>

Notice how you are doing:

<div class="row">
   <div class="col-md-6">Suas fotos</div>
   <div id="fotos" style="display:none">
       <div class="col-md-6"></div>
   </div>
</div>

Lost the arrangement of the divisions within the row.

I think it should be:

<div class="row">
   <div class="col-md-6">Suas fotos</div>
   <div class="col-md-6">
      <div id="fotos" style="display:none"> seu conteúdo</div>
   </div>
</div>

score -2 · Answer 2

I suggest that you put classes that hide and show the columns, you do not need al threading another between the columns div ...

  <div class="row">
//primeiro while
      <div class="col-sm-6">Conteúdo da sua divisão 1</div>
      <div class="col-sm-6">Conteúdo da sua divisão 2</div>  
//segundo while  
      <div class="col-sm-6 oculta">Conteúdo da sua divisão 3</div>
      <div class="col-sm-6 oculta">Conteúdo da sua divisão 4</div>
    </div>
        <div id="button"><a class="btn btn-dark">Ver mais</a></div>


<script>
   $("button").click(function(){
      $(".oculta").slideDown();
      $("#button").hide();
   });
</script>

<style>

.oculta{
    display:none
 }

 </style>