ArtcoInc Posted November 7, 2014 Share Posted November 7, 2014 (this *should* be simple ... ) In shopping_cart.php, I have several buttons: I would like to move the 'Continue Shopping' button to the left side. I've tried: float: left text-align: left pull-left but nothing is working for me. Here's the unaltered code: <div class="buttonSet"> <span class="buttonAction"> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#quotesModal"> <?php echo GET_QUOTES; ?> </button> </span> </div> <div class="buttonSet"> <span class="buttonAction"> <?php $back = sizeof($navigation->path)-2; if (isset($navigation->path[$back])) { echo tep_draw_button(IMAGE_BUTTON_CONTINUE_SHOPPING, 'glyphicon-chevron-left', tep_href_link($navigation->path[$back]['page'], tep_array_to_string($navigation->path[$back]['get'], array('action')), $navigation->path[$back]['mode']), 'primary', NULL, 'btn-success') . " " ; } ?> <?php echo tep_draw_right_button(IMAGE_BUTTON_CHECKOUT, 'glyphicon-chevron-right', tep_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL'), 'primary', NULL, 'btn-success'); ?> </span> </div> Thanks! Malcolm Link to comment Share on other sites More sharing options...
De Dokta Posted November 7, 2014 Share Posted November 7, 2014 Hi If you want your buttons in one line put them into ONE div not into two. <div class="buttonSet"> <span class="pull-right"> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#quotesModal"> <?php echo GET_QUOTES; ?> </button> </span> <span class="pull-left"> <?php $back = sizeof($navigation->path)-2; if (isset($navigation->path[$back])) { echo tep_draw_button(IMAGE_BUTTON_CONTINUE_SHOPPING, 'glyphicon-chevron-left', tep_href_link($navigation->path[$back]['page'], tep_array_to_string($navigation->path[$back]['get'], array('action')), $navigation->path[$back]['mode']), 'primary', NULL, 'btn-success') . " " ; } ?> <?php echo tep_draw_button(IMAGE_BUTTON_CHECKOUT, 'glyphicon-chevron-right', tep_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL'), 'primary', NULL, 'btn-success'); ?> </span> </div> You can align the buttons as you want by adding <span class= "pull-right"(pull-left")> instead of <span class="buttonAction"> which has - if I remember well - no more definitions in BS (as well as buttonSet). It seems to be nothing but a relict from standard osc. :- J.J. PS. I don't know what your "tep_draw_right_button" means!? :unsure: Link to comment Share on other sites More sharing options...
ArtcoInc Posted November 7, 2014 Author Share Posted November 7, 2014 Thank you. I obviously was not clear with my question. When compared to the screen shot shown above, I want the "Get your shipping costs" button to stay where it is, on it's own line. Below that, I want the 'Continue Shopping" button slid to the left, and the "Checkout" button slid to the right, like this: PS. I don't know what your "tep_draw_right_button" means!? :unsure: tep_draw_button puts the icon to the left of the text within the button. In the 'Checkout' button, I wanted the icon to be to the right of the text, so I copied tep_draw_button, renamed it to tep_draw_right_button, and revised the display order to put the icon on the right. Malcolm Link to comment Share on other sites More sharing options...
De Dokta Posted November 7, 2014 Share Posted November 7, 2014 @@ArtcoInc In two lines it should be something like that: <div class="buttonSet"> <span class="buttonAction"> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#quotesModal"> <?php echo GET_QUOTES; ?> </button> </span> </div> <div class="buttonSet"> <?php $back = sizeof($navigation->path)-2; if (isset($navigation->path[$back])) { echo '<span class="pull-left">' . tep_draw_button(IMAGE_BUTTON_CONTINUE_SHOPPING, 'glyphicon-chevron-left', tep_href_link($navigation->path[$back]['page'], tep_array_to_string($navigation->path[$back]['get'], array('action')), $navigation->path[$back]['mode']), 'primary', NULL, 'btn-success') . '</span>'; } ?> <span class="pull-right"><?php echo tep_draw_right_button(IMAGE_BUTTON_CHECKOUT, 'glyphicon-chevron-right', tep_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL'), 'primary', NULL, 'btn-success'); ?> </span> </div> J.J. Link to comment Share on other sites More sharing options...
burt Posted November 7, 2014 Share Posted November 7, 2014 Almost exactly the same scenario was covered yesterday in @@grandpaj post. Use the grid system. <div class="row"> <div class="col-sm-6">continue button</div> <div class="col-sm-6 pull-right">checkout button</div> </div> Link to comment Share on other sites More sharing options...
burt Posted November 7, 2014 Share Posted November 7, 2014 Yes, I block my buttons so it didn't show for me :( for those who dont btn-block, this looks good: <div class="row"> <div class="col-sm-6">button</div> <div class="col-sm-6 text-right-not-xs">button</div> </div> Link to comment Share on other sites More sharing options...
burt Posted November 7, 2014 Share Posted November 7, 2014 It's something not in core bootstrap - as I recall I got really annoyed at not being able to do something in LG and something else in (say) SM. So I went on the hunt and found that from https://github.com/twbs/bootstrap/issues/11292 It really should be included in core BS in my opinion Link to comment Share on other sites More sharing options...
nafri Posted April 26, 2015 Share Posted April 26, 2015 Yes, I block my buttons so it didn't show for me :( for those who dont btn-block, this looks good: <div class="row"> <div class="col-sm-6">button</div> <div class="col-sm-6 text-right-not-xs">button</div> </div> Hi i tried this and on computer it looks okay. on iphone it doest as shown in the image http://pasteboard.co/KCdWf1.jpg any idea how i can fix this regards nafri Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.