Guest Posted November 5, 2014 Share Posted November 5, 2014 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. Many thanks Grandpa Link to comment Share on other sites More sharing options...
De Dokta Posted November 5, 2014 Share Posted November 5, 2014 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 More sharing options...
burt Posted November 5, 2014 Share Posted November 5, 2014 Use the grid system. Place your image(s) into 1 grid and your description into another grid. <div class="row"> <div class="col-sm-6">IMAGE</div> <div class="col-sm-6">DESC</div> </div> Link to comment Share on other sites More sharing options...
♥Tsimi Posted November 5, 2014 Share Posted November 5, 2014 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 More sharing options...
burt Posted November 5, 2014 Share Posted November 5, 2014 @@burt is the row class necessary? 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. Link to comment Share on other sites More sharing options...
♥Tsimi Posted November 5, 2014 Share Posted November 5, 2014 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 More sharing options...
Guest Posted November 5, 2014 Share Posted November 5, 2014 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 More sharing options...
♥Tsimi Posted November 6, 2014 Share Posted November 6, 2014 You don't need 2 row classes. Look at burt's example. Link to comment Share on other sites More sharing options...
♥joli1811 Posted November 6, 2014 Share Posted November 6, 2014 @@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 More sharing options...
Guest Posted November 6, 2014 Share Posted November 6, 2014 Link to comment Share on other sites More sharing options...
Guest Posted November 6, 2014 Share Posted November 6, 2014 @@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 Link to comment Share on other sites More sharing options...
♥joli1811 Posted November 6, 2014 Share Posted November 6, 2014 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 More sharing options...
Guest Posted November 6, 2014 Share Posted November 6, 2014 @@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 More sharing options...
♥joli1811 Posted November 6, 2014 Share Posted November 6, 2014 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 More sharing options...
De Dokta Posted November 7, 2014 Share Posted November 7, 2014 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 More sharing options...
Guest Posted November 7, 2014 Share Posted November 7, 2014 @@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 More sharing options...
De Dokta Posted November 7, 2014 Share Posted November 7, 2014 @@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 More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.