Bootstrap Popup Broken

  • Posts: 43
  • Thank you received: 0
11 years 3 days ago #101685

It appears the bootstrap popup does not work at all on the User Account Panel Addresses area. Cannot make a new shipping address nor edit current ones. Also, the page is broken in the bottom left area of the screen as soon as you click the edit or new buttons. It sort of works when using Mootools but not being responsive is broken on the smaller devices. I am using the Gantry Framework. Any ideas welcome. :unsure:

www.shadforth.net/rayjays/index.php?opti...l=address&Itemid=206

Username: test
Password: test

Last edit: 11 years 3 days ago by BeLlSiBuB.

Please Log in or Create an account to join the conversation.

  • Posts: 26017
  • Thank you received: 4004
  • MODERATOR
11 years 3 days ago #101696

Hi,

There is no problem in HikaShop with the bootstrap popup. Your template does not contains any CSS rule for modals, no rules for "div.modal", no rule for "div.modal-backdrop", etc.
Exporting the CSS from the bootstrap website:

/*!
 * Bootstrap v2.3.1
 *
 * Copyright 2012 Twitter, Inc
 * Licensed under the Apache License v2.0
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Designed and built with all the love in the world @twitter by @mdo and @fat.
 */
.clearfix {
  *zoom: 1;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
  line-height: 0;
}
.clearfix:after {
  clear: both;
}
.hide-text {
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}
.input-block-level {
  display: block;
  width: 100%;
  min-height: 30px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
div.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1040;
  background-color: #000000;
}
div.modal-backdrop.fade {
  opacity: 0;
}
div.modal-backdrop,
div.modal-backdrop.fade.in {
  opacity: 0.8;
  filter: alpha(opacity=80);
}
div.modal {
  position: fixed;
  top: 10%;
  left: 50%;
  z-index: 1050;
  width: 560px;
  margin-left: -280px;
  background-color: #ffffff;
  border: 1px solid #999;
  border: 1px solid rgba(0, 0, 0, 0.3);
  *border: 1px solid #999;
  /* IE6-7 */

  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
  -webkit-background-clip: padding-box;
  -moz-background-clip: padding-box;
  background-clip: padding-box;
  outline: none;
}
div.modal.fade {
  -webkit-transition: opacity .3s linear, top .3s ease-out;
  -moz-transition: opacity .3s linear, top .3s ease-out;
  -o-transition: opacity .3s linear, top .3s ease-out;
  transition: opacity .3s linear, top .3s ease-out;
  top: -25%;
}
div.modal.fade.in {
  top: 10%;
}
div.modal-header {
  padding: 9px 15px;
  border-bottom: 1px solid #eee;
}
div.modal-header .close {
  margin-top: 2px;
}
div.modal-header h3 {
  margin: 0;
  line-height: 30px;
}
div.modal-body {
  position: relative;
  overflow-y: auto;
  max-height: 400px;
  padding: 15px;
}
div.modal-form {
  margin-bottom: 0;
}
div.modal-footer {
  padding: 14px 15px 15px;
  margin-bottom: 0;
  text-align: right;
  background-color: #f5f5f5;
  border-top: 1px solid #ddd;
  -webkit-border-radius: 0 0 6px 6px;
  -moz-border-radius: 0 0 6px 6px;
  border-radius: 0 0 6px 6px;
  -webkit-box-shadow: inset 0 1px 0 #ffffff;
  -moz-box-shadow: inset 0 1px 0 #ffffff;
  box-shadow: inset 0 1px 0 #ffffff;
  *zoom: 1;
}
div.modal-footer:before,
div.modal-footer:after {
  display: table;
  content: "";
  line-height: 0;
}
div.modal-footer:after {
  clear: both;
}
div.modal-footer .btn + .btn {
  margin-left: 5px;
  margin-bottom: 0;
}
div.modal-footer .btn-group .btn + .btn {
  margin-left: -1px;
}
div.modal-footer .btn-block + .btn-block {
  margin-left: 0;
}

Please contact directly Gantry for this template problem.

Regards,


Jerome - Obsidev.com
HikaMarket & HikaSerial developer / HikaShop core dev team.

Also helping the HikaShop support team when having some time or couldn't sleep.
By the way, do not send me private message, use the "contact us" form instead.

Please Log in or Create an account to join the conversation.

  • Posts: 43
  • Thank you received: 0
11 years 3 days ago #101725

I just added that whole chuck of css to the custom css file which has fixed the issue.

But to be honest, given a choice, I think It might be more user friendly to dump the popups completely and edit the page as normal, the same way as editing your normal joomla profile. Any idea how this could be accomplished please?

Please Log in or Create an account to join the conversation.

  • Posts: 81597
  • Thank you received: 13081
  • MODERATOR
11 years 2 days ago #101763

There is no option for that.

You would have to recode the whole interface for the address edition.

The following user(s) said Thank You: BeLlSiBuB

Please Log in or Create an account to join the conversation.

  • Posts: 43
  • Thank you received: 0
11 years 2 days ago #101857

Just one more issue that I think may be related to this topic. On mobils the edit address icon appears to float at the top left corner of the page. Hard to get a screen shot of this, sorry. I was just wondering if this is by design or if there may be a fix for it?

Attachments:
Last edit: 11 years 1 day ago by BeLlSiBuB.

Please Log in or Create an account to join the conversation.

  • Posts: 81597
  • Thank you received: 13081
  • MODERATOR
11 years 1 day ago #101972

It is not by design.
This is a CSS issue of your joomla template.
In the file www.shadforth.net/rayjays/templates/rt_l...mpiled/bootstrap.css
you should have div.modal instead of just .modal and that should fix the issue.

The following user(s) said Thank You: BeLlSiBuB

Please Log in or Create an account to join the conversation.

  • Posts: 43
  • Thank you received: 0
10 years 2 months ago #142689

Hi,
I have another small problem with the modal on a non responsive site. I need to change the size of the popup smaller to make it look more professional. I did ask in the template developer's forum but they reccommended I ask here too....

Does anyone have any idea of what css toi change to get this modal looking smaller without any scrollbars please?
You need to login then click the "edit" button next to the "delete" button to get it to pop up.
Username: test
Password: test
www.bartleysailingclub.com/mark4/index.p...t=listing&Itemid=662

Reply:
you could add something like this to your css

div#modal-hikashop_new_address_popup.modal.hide.fade.in {
max-height: 450px;max-width: 500px;overflow: hidden;
}

I really suggest to ask Hikashop-support.
That modal has nothing to do with the template.

I added the code but could not see any difference. Any ideas please?

Last edit: 10 years 2 months ago by BeLlSiBuB.

Please Log in or Create an account to join the conversation.

  • Posts: 2334
  • Thank you received: 403
10 years 2 months ago #142701

Hi there,

You should look at the view related to the address and checkout in Display>Views.
There you should be able to change the size of the popup (search for 450 and 480 to find it).

The following user(s) said Thank You: BeLlSiBuB

Please Log in or Create an account to join the conversation.

  • Posts: 43
  • Thank you received: 0
10 years 2 months ago #142790

I found the file that needed to be edited: Display > Views > address > listing

Many thanks!

Please Log in or Create an account to join the conversation.

Time to create page: 0.082 seconds
Powered by Kunena Forum