Search field disappears when adding product to cart

2

When adding some product in my shopping cart the search field of the site does not appear and I can not identify why I was deleting what I could from the files .css that I have and even then I could not reach a result. / p>

I think it might be something related to clearfix, but my css knowledge does not allow me to do a better analysis.

The page can be viewed here: Insertion of Products in the cart

The search field is thus configured:

<form id="search-form" action="busca.php" method="post">
<input id="s" type="text" name="s" placeholder="Busca" style="display: none;">
<input id="search-submit" type="submit" name="search-submit" value="Search">

My cart call looks like this:

<section id="content" class="container clearfix">
<header id="page-header">
    <h1 id="page-title">MEU CARRINHO</h1>   
</header><br><br>
<p>
      <?php
            $class->setURL($url);
            $class->carrinho();
        ?>
</p>

And the css that mounts the cart is this:

.product-image {
  float: left;
  width: 20%;
}

.product-details {
  float: left;
  width: 37%;
}

.product-quantity {
  float: left;
  width: 10%;
}

/* This is used as the traditional .clearfix class */
.group:before, 
.shopping-cart:before, 
.column-labels:before, 
.product:before, 
.totals-item:before,
.group:after,
.shopping-cart:after,
.column-labels:after,
.product:after,
.totals-item:after {
  content: '';
  display: table;
}

.group:after, .shopping-cart:after, .column-labels:after, .product:after, .totals-item:after {
  clear: both;
}

.group, .shopping-cart, .column-labels, .product, .totals-item {
  zoom: 1;
}

/* Apply clearfix in a few places */
/* Apply dollar signs */
.product .product-price:before, .product .product-line-price:before, .totals-value:before {
  content: '$';
}


label {
  color: #aaa;
}

.shopping-cart {
  margin-top: -45px;
}

/* Column headers */
.column-labels label {
  padding-bottom: 15px;
  margin-bottom: 15px;
/*  border-bottom: 1px solid #eee;
*/}
.column-labels .product-image, .column-labels .product-details, .column-labels .product-removal {
  text-indent: -9999px;
}

/* Product entries */
.product {
  margin-bottom: 20px;
  padding-bottom: 10px;
}
.product .product-image {
  text-align: center;
}
.product .product-image img {
  width: 100px;
}
.product .product-details .product-title {
  margin-right: 20px;
  font-family: "HelveticaNeue-Medium", "Helvetica Neue Medium";
}
.product .product-details .product-description {
  margin: 5px 20px 5px 0;
  line-height: 1.4em;
}
.product .product-quantity input {
  width: 40px;
}
.product .remove-product {
  border: 0;
  padding: 4px 8px;
  background-color: #c66;
  color: #fff;
  font-family: "HelveticaNeue-Medium", "Helvetica Neue Medium";
  font-size: 12px;
  border-radius: 3px;
}
.product .remove-product:hover {
  background-color: #a44;
}

/* Totals section */
.totals .totals-item {
  float: right;
  clear: both;
  width: 100%;
  margin-bottom: 10px;
}
.totals .totals-item label {
  float: left;
  clear: both;
  width: 79%;
  text-align: right;
}
.totals .totals-item .totals-value {
  float: right;
  width: 21%;
  text-align: right;
}
.totals .totals-item-total {
  font-family: "HelveticaNeue-Medium", "Helvetica Neue Medium";
}

.checkout {
  float: right;
  border: 0;
  margin-top: 20px;
  padding: 6px 25px;
  background-color: #6b6;
  color: #fff;
  font-size: 25px;
  border-radius: 3px;
}

.checkout:hover {
  background-color: #494;
}

/* Make adjustments for tablet */
@media screen and (max-width: 650px) {
  .shopping-cart {
    margin: 0;
    padding-top: 20px;
    /*border-top: 1px solid #eee;*/
  }

  .column-labels {
    display: none;
  }

  .product-image {
    float: right;
    width: auto;
  }
  .product-image img {
    margin: 0 0 10px 10px;
  }

  .product-details {
    float: none;
    margin-bottom: 10px;
    width: auto;
  }

  .product-price {
    clear: both;
    width: 70px;
  }

  .product-quantity {
    width: 100px;
  }
  .product-quantity input {
    margin-left: 20px;
  }

  .product-quantity:before {
/*    content: 'x';
*/  }

  .product-removal {
    width: auto;
  }

  .product-line-price {
    float: right;
    width: 70px;
  }
}
/* Make more adjustments for phone */
@media screen and (max-width: 350px) {
  .product-removal {
    float: right;
  }

  .product-line-price {
    float: right;
    clear: left;
    width: auto;
    margin-top: 10px;
  }

  .product .product-line-price:before {
    content: 'Item Total: $';
  }

  .totals .totals-item label {
    width: 60%;
  }
  .totals .totals-item .totals-value {
    width: 40%;
  }
}
    
asked by anonymous 24.03.2015 / 21:47

1 answer

1

From what I checked on your site, this only happens when the screen is not wide enough to display the entire menu. Thus, the search field is only displayed when you click the search icon.

The question is not in CSS, at least not in the part you posted. Certainly this is done via Javascript, the moment the page loads and when the screen size changes.

Look in your code for functions such as window.onload and window.onresize, because it is one of them that this manipulation occurs.

    
05.12.2015 / 18:10