Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Stop Text Wrapping


Recommended Posts

Hi

 

On the product info page in BS234 is there anyway of stopping the text overflow from wrapping under the product image as shown in the attached image.

 

post-276414-0-28535800-1415172112_thumb.jpg

 

Many thanks

 

Grandpa

Link to comment
Share on other sites

Hi
 
What do you want instead? Two separate columns where the text is completly on the right side? Then you may wrap image and description into separate divs. Something like:
 

.....
<div class="col-sm-6 pull-left">
    <div id="piGal" style="margin-right:40px; padding-bottom: 30px;">
      <?php echo tep_image(DIR_WS_IMAGES_LARGE . $product_info['products_image'], addslashes($product_info['products_name'])); ?>
    </div>
        </div>

<?php
      }
    }
?>
        <div class="col-sm-6 pull-right">
<?php echo stripslashes($product_info['products_description']); ?>
      </div>....

J.J.

 

Link to comment
Share on other sites

Hi Grandpa!

 

Do you remember my product info from my normal, non-BS shop? The A and B thing?

Same thing here, try to wrap the two sections into div classes and give them for example col-md-3 and col-md-9.

Here a sample:

 

You should see somewhere this code

 

<div class="contentContainer">
  <div class="contentText">

 

*here is the code for the images*

 

then comes

 

*here the code for the description and options*

 

now try to wrap them like this

 

<div class="contentContainer">
  <div class="contentText">

    <div class="col-md-3 col-xs-12">

 

*here is the code for the images*

 

</div>

<div class="col-md-9 col-xs-12">

 

*here the code for the description and options*

 

</div>

 

put this last </div> just above the <div class="clearfix"></div> code.

Of course you can play around with the col-md-XX and col-xs-XX numbers until you are satisfied with the result or even add col-sm-XX or col-lg-XX if you want to customize it more for every view mode. Just make sure that the total is always 12 so 3 + 9 or 6 + 6 or 4 + 8 and so on....

 

EDIT: Gary and De Dokta beat me to it.

@@burt is the row class necessary?

Link to comment
Share on other sites

Yes.  Any div "col-*" needs a containing div "row"...to make it line up nicely.  I found that not having the row does not look bad, but having the row makes it look ideal.

 

I see. Thanks for explaining. :thumbsup:

Link to comment
Share on other sites

Hi

@@Tsimi

@@burt

@@De Dokta

 

Here's what Ive done seems to work. Hope its right.

 

<div class="row">

<div class="col-sm-4">
    <div id="piGal" >
      <?php echo tep_image(DIR_WS_IMAGES . $product_info['products_image'], addslashes($product_info['products_name'])); ?>
    </div></div>

<?php
      }
    }
?><div class="row">
 <div class="col-sm-8">
<?php echo stripslashes($product_info['products_description']); ?>
</div></div>

 

Many thanks

Grandpa

Link to comment
Share on other sites

@@grandpaj  right inside the section where you post your messages into the forum there is a icon representing "<>"

so.... when you go paste php code..... first click that icon..... after that..... you willl notice what to do (i trust you do)

 

 

to respond what @@Tsimi say's.... you not need 2 times row. See row as 1 meter of beers......... and 1 meter holds 12 glasses of beer, a column (col-) is a mark on the beer-meter so col-md-4 means.... you marked 4 beers.

 

it means.... left 8 beers....

you can mark if want 5 beers as: col-md-5

so is left 3.... what go be col-md-3

Total is 12 beers ;)

 

So.... a row = 12 beers and in your case the html go look like:

 

 

(now is your time to show us if you understood and show us your fixed code)

Or buy us a beer   :beers: haha

To improve is to change; to be perfect is to change often.

 

Link to comment
Share on other sites

@@joli1811

@@wHiTeHaT

 

Hi guys

 

The beers all lined up, but getting warm, anyway

 

I have hopefully corrected the code, but have 1 problem I have added 3 div tags but when I add 3 closing div tags the web page gets screwed up so I have posted some of  the code

<div class="row"> 
<div class="col-sm-4 col-xs-12">
    <div id="piGal">
      <?php echo tep_image(DIR_WS_IMAGES . $product_info['products_image'], addslashes($product_info['products_name'])); ?>
    </div></div>
<?php
      }
    }
?>
 <div class="col-sm-8 col-xs-12">
<?php echo stripslashes($product_info['products_description']); ?>
</div>

<?php
    $products_attributes_query = tep_db_query("select count(*) as total from " . TABLE_PRODUCTS_OPTIONS . " popt, " . TABLE_PRODUCTS_ATTRIBUTES . " patrib where patrib.products_id='" . (int)$HTTP_GET_VARS['products_id'] . "' and patrib.options_id = popt.products_options_id and popt.language_id = '" . (int)$languages_id . "'");
    $products_attributes = tep_db_fetch_array($products_attributes_query);
    if ($products_attributes['total'] > 0) {
?>

    <h5><?php echo TEXT_PRODUCT_OPTIONS; ?></h5>
	 <h4><?php echo TEXT_PRODUCT_OPTIONS2; ?></h4>

    <p>
<?php
      $products_options_name_query = tep_db_query("select distinct popt.products_options_id, popt.products_options_name from " . TABLE_PRODUCTS_OPTIONS . " popt, " . TABLE_PRODUCTS_ATTRIBUTES . " patrib where patrib.products_id='" . (int)$HTTP_GET_VARS['products_id'] . "' and patrib.options_id = popt.products_options_id and popt.language_id = '" . (int)$languages_id . "' order by popt.products_options_name");
      while ($products_options_name = tep_db_fetch_array($products_options_name_query)) {
        $products_options_array = array();
        $products_options_query = tep_db_query("select pov.products_options_values_id, pov.products_options_values_name, pa.options_values_price, pa.price_prefix from " . TABLE_PRODUCTS_ATTRIBUTES . " pa, " . TABLE_PRODUCTS_OPTIONS_VALUES . " pov where pa.products_id = '" . (int)$HTTP_GET_VARS['products_id'] . "' and pa.options_id = '" . (int)$products_options_name['products_options_id'] . "' and pa.options_values_id = pov.products_options_values_id and pov.language_id = '" . (int)$languages_id . "'");
        while ($products_options = tep_db_fetch_array($products_options_query)) {
          $products_options_array[] = array('id' => $products_options['products_options_values_id'], 'text' => $products_options['products_options_values_name']);
          if ($products_options['options_values_price'] != '0') {
            $products_options_array[sizeof($products_options_array)-1]['text'] .= ' (' . $products_options['price_prefix'] . $currencies->display_price($products_options['options_values_price'], tep_get_tax_rate($product_info['products_tax_class_id'])) .') ';
          }
        }

        if (is_string($HTTP_GET_VARS['products_id']) && isset($cart->contents[$HTTP_GET_VARS['products_id']]['attributes'][$products_options_name['products_options_id']])) {
          $selected_attribute = $cart->contents[$HTTP_GET_VARS['products_id']]['attributes'][$products_options_name['products_options_id']];
        } else {
          $selected_attribute = false;
        }
?>
      <strong><?php echo $products_options_name['products_options_name'] . ':'; ?></strong><br /><?php echo tep_draw_pull_down_menu('id[' . $products_options_name['products_options_id'] . ']', $products_options_array, $selected_attribute, 'style="width: 200px;"'); ?><br />
<?php
      }
?>
    </p>

<?php
    }
?>

    <div class="clearfix"></div>

<?php
    if ($product_info['products_date_available'] > date('Y-m-d H:i:s')) {
?>

    <div class="alert alert-info"><?php echo sprintf(TEXT_DATE_AVAILABLE, tep_date_long($product_info['products_date_available'])); ?></div>

<?php
    }
?>

  </div>

<?php
    $reviews_query = tep_db_query("select count(*) as count from " . TABLE_REVIEWS . " r, " . TABLE_REVIEWS_DESCRIPTION . " rd where r.products_id = '" . (int)$HTTP_GET_VARS['products_id'] . "' and r.reviews_id = rd.reviews_id and rd.languages_id = '" . (int)$languages_id . "' and reviews_status = 1");
    $reviews = tep_db_fetch_array($reviews_query);
?>

  <div class="buttonSet">

Hopefully someone can tell me where the 3rd closing div goes. Ive tried all sorts of places but not the right one. Ive tried as Joli1811 said, put this last </div> just above the <div class="clearfix"></div> code.

The web page appears to work OK with the </div> not being inluded.

 

Many thanks

Grandpa

 

 

Please take no notice of the thumbnail

post-276414-0-60651400-1415304185_thumb.jpg

Link to comment
Share on other sites

Looks so far so good to me small tip if you use notepad=++  theres a function top left SEARCH --> FIND --> COUNT
 
here you could for example count your opening <div   and closing </div> in most cases they should match(some exceptions but not important here)
 
it also highlights an opening and closing div  if you click on the <div ...blahblah... </div>  so you can trace the path (open/close)
 
Now as regards the beer   6  ℃  would be fine.

 

Regards

joli



 

<div class="row"> 
<div class="col-sm-4 col-xs-12">
    <div id="piGal">
      <?php echo tep_image(DIR_WS_IMAGES . $product_info['products_image'], addslashes($product_info['products_name'])); ?>
    </div></div>
<?php
      }
    }
?>
 <div class="col-sm-8 col-xs-12">
<?php echo stripslashes($product_info['products_description']); ?>
</div>

<?php
    $products_attributes_query = tep_db_query("select count(*) as total from " . TABLE_PRODUCTS_OPTIONS . " popt, " . TABLE_PRODUCTS_ATTRIBUTES . " patrib where patrib.products_id='" . (int)$HTTP_GET_VARS['products_id'] . "' and patrib.options_id = popt.products_options_id and popt.language_id = '" . (int)$languages_id . "'");
    $products_attributes = tep_db_fetch_array($products_attributes_query);
    if ($products_attributes['total'] > 0) {
?>

    <h5><?php echo TEXT_PRODUCT_OPTIONS; ?></h5>
	 <h4><?php echo TEXT_PRODUCT_OPTIONS2; ?></h4>

    <p>
<?php
      $products_options_name_query = tep_db_query("select distinct popt.products_options_id, popt.products_options_name from " . TABLE_PRODUCTS_OPTIONS . " popt, " . TABLE_PRODUCTS_ATTRIBUTES . " patrib where patrib.products_id='" . (int)$HTTP_GET_VARS['products_id'] . "' and patrib.options_id = popt.products_options_id and popt.language_id = '" . (int)$languages_id . "' order by popt.products_options_name");
      while ($products_options_name = tep_db_fetch_array($products_options_name_query)) {
        $products_options_array = array();
        $products_options_query = tep_db_query("select pov.products_options_values_id, pov.products_options_values_name, pa.options_values_price, pa.price_prefix from " . TABLE_PRODUCTS_ATTRIBUTES . " pa, " . TABLE_PRODUCTS_OPTIONS_VALUES . " pov where pa.products_id = '" . (int)$HTTP_GET_VARS['products_id'] . "' and pa.options_id = '" . (int)$products_options_name['products_options_id'] . "' and pa.options_values_id = pov.products_options_values_id and pov.language_id = '" . (int)$languages_id . "'");
        while ($products_options = tep_db_fetch_array($products_options_query)) {
          $products_options_array[] = array('id' => $products_options['products_options_values_id'], 'text' => $products_options['products_options_values_name']);
          if ($products_options['options_values_price'] != '0') {
            $products_options_array[sizeof($products_options_array)-1]['text'] .= ' (' . $products_options['price_prefix'] . $currencies->display_price($products_options['options_values_price'], tep_get_tax_rate($product_info['products_tax_class_id'])) .') ';
          }
        }

        if (is_string($HTTP_GET_VARS['products_id']) && isset($cart->contents[$HTTP_GET_VARS['products_id']]['attributes'][$products_options_name['products_options_id']])) {
          $selected_attribute = $cart->contents[$HTTP_GET_VARS['products_id']]['attributes'][$products_options_name['products_options_id']];
        } else {
          $selected_attribute = false;
        }
?>
      <strong><?php echo $products_options_name['products_options_name'] . ':'; ?></strong><br /><?php echo tep_draw_pull_down_menu('id[' . $products_options_name['products_options_id'] . ']', $products_options_array, $selected_attribute, 'style="width: 200px;"'); ?><br />
<?php
      }
?>
    </p>

<?php
    }
?>

    <div class="clearfix"></div>

<?php
    if ($product_info['products_date_available'] > date('Y-m-d H:i:s')) {
?>

    <div class="alert alert-info"><?php echo sprintf(TEXT_DATE_AVAILABLE, tep_date_long($product_info['products_date_available'])); ?></div>

<?php
    }
?>

  </div>

<?php
    $reviews_query = tep_db_query("select count(*) as count from " . TABLE_REVIEWS . " r, " . TABLE_REVIEWS_DESCRIPTION . " rd where r.products_id = '" . (int)$HTTP_GET_VARS['products_id'] . "' and r.reviews_id = rd.reviews_id and rd.languages_id = '" . (int)$languages_id . "' and reviews_status = 1");
    $reviews = tep_db_fetch_array($reviews_query);
?>
To improve is to change; to be perfect is to change often.

 

Link to comment
Share on other sites

@@joli1811

 

Hi John

 

Seems the only div which doesn't have a closing div is on line 29 (or thereabouts)

<div class="contentContainer">

 

Presumably this doesn't seem to matter.

 

Ive got 18 opening and 17 closing div's

 

Many thanks

 

Grandpa

Link to comment
Share on other sites

well bootstrap standard has 15 + 15 so you have one to many   because you added 2 + 2 !! so should be 17 +17

 

Had a case once where I never noticed the extra div until I got I think to a sub sub catagory then lost my left hand column

 

  so better to fix just compare with original and redo your changes  before you forget and wonder next year why things are wonky :)

 

Regards

John

To improve is to change; to be perfect is to change often.

 

Link to comment
Share on other sites

It's quite simple:

 

<div class="row">  open 1
<div class="col-sm-4 col-xs-12"> open 2
<div id="piGal"> open 3
<?php echo tep_image(DIR_WS_IMAGES . $product_info['products_image'], addslashes($product_info['products_name'])); ?>
</div> close 3
</div> close2
<?php
}
}
?>
<div class="col-sm-8 col-xs-12"> open 4
<?php echo stripslashes($product_info['products_description']); ?>
</div> close 4

 

Which one is still open now? open 1 which you have to close after close 4. :D

 

J.J.

Link to comment
Share on other sites

@@De Dokta

 

Hi JJ

 

Is the above the correct code you posted the correct one ( I suspect so), This is what I had but seemed to be short 1 closing Div. This worked but if I try to balance the divs(as below) to be the same, then the web pages gets screwed up.

 

Many thanks

Grandpa

<div class="row">  
<div class="col-sm-4 col-xs-12"> 
<div id="piGal"> 
<?php echo tep_image(DIR_WS_IMAGES . $product_info['products_image'], addslashes($product_info['products_name'])); ?>
</div> 
</div> 
<?php
}
}
?>
<div class="col-sm-8 col-xs-12"> 
<?php echo stripslashes($product_info['products_description']); ?>
</div> </div>
Link to comment
Share on other sites

@@grandpaj
 
 

<div class="row">  
<div class="col-sm-4 col-xs-12"> 
<div id="piGal"> 
<?php echo tep_image(DIR_WS_IMAGES . $product_info['products_image'], addslashes($product_info['products_name'])); ?>
</div> 
</div> 
<?php
}
}
?>
<div class="col-sm-8 col-xs-12"> 
<?php echo stripslashes($product_info['products_description']); ?>
</div> </div>

This is correct! If it does not work for you and your site messes up, you have an opening or closing div elsewhere in the wrong spot. In that case I can only repeat what @@joli1811 has recommended: "so better to fix just compare with original and redo your changes  before you forget and wonder next year why things are wonky".

 

J.J.
 

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...