Multi-Currency Pricing in Gridbox Store App

Multi-Currency Pricing in Gridbox Store App
Mon. - Fri. 9 am - 5 pm Ask a Question
Remember me

Problem with radio-buttons

5 years 7 months ago #1

  • Christian's Avatar
  • Christian
Hello,

i have a problem with the radio- and checkbox- buttons.
Mouseover input doesnt work proper:
www.sport-piraten.de/firmenevents/sommer...fevents/pfaffenhofen

Thanks and greetings

Christian

5 years 7 months ago #2

  • Artem's Avatar
  • Artem
  • Posts: 10007
Hello Christian,

Thank you for the link! Looks like it's a CSS conflict with template CSS.
We will find a solution and get back to you shortly

Regards,

5 years 7 months ago #3

  • Christian's Avatar
  • Christian
Thanks for your quick response!
I have temporally delete the template.css, but the problem still exists.

5 years 7 months ago #4

  • Artem's Avatar
  • Artem
  • Posts: 10007
Hello,

Add this code into your template custom CSS file, it's a fix for:

- Calendar
- Radio / checkbox buttons
- Tooltips
.calendar tbody tr td {
    border: none;
}

.calendar .button {
    background: transparent;
    color: #000;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

.calendar table {
    margin: 0;
}

.calendar {
    box-sizing: content-box;
}

.ba-form .ba-tooltip:before,
.ba-form .ba-tooltip {
    box-sizing: content-box;
}
.ba-terms-conditions input[type="checkbox"],
.ba-form .ba-checkMultiple span input,
.ba-form .ba-radioMultiple span input,
.ba-form .ba-radioInline span input,
.ba-form .ba-chekInline span input,
.ba-form .ba-radioMultiple span input,
.ba-form .ba-radioInline span input,
.ba-form .ba-chekInline span input {
    margin: 0 !important;
    height: 20px!important;
}

5 years 7 months ago #5

  • Christian's Avatar
  • Christian
Hello Artem,

many thanks for the good solution.
It works perfectly!

Best regards

Christian

5 years 7 months ago #6

  • Artem's Avatar
  • Artem
  • Posts: 10007
You're welcome :)

Have a nice day!

Regards,

5 years 7 months ago #7

  • Christian's Avatar
  • Christian
Hello Artem,

i still also need fixes:

1) css-fix for "-maps", if possible
www.sport-piraten.de/firmenevents/sommer...fevents/pfaffenhofen

2) In Chrome and Safari the icons in the forms looks different compare to Firefox
a) margin-left: 0px;
b) text-transform: uppercase;

In Firefox it looks correct.


Thanks an best regards

Christian


5 years 7 months ago #8

  • Artem's Avatar
  • Artem
  • Posts: 10007
Hi,

Placeholders comes from template, you can add this code into custom.css file
::-webkit-input-placeholder {
    text-transform: none !important;
}
::-moz-placeholder {
    text-transform: none !important;
}

Google Maps
your css file override Google Maps styles



Icons
Add his to your template custom.css file
.row_form .icons-cell {
    top: 15px !important;
    left: 10px !important;
}

.row_form .icons-cell i {
    width: 48px;
    height: 48px;
}

Regards, B)

5 years 7 months ago #9

  • Christian's Avatar
  • Christian
Thank you Artem!

Maps and Chrome is working now B)
But not in Safari :
left: 10px !important;

Can you also help me please with the dropdown-boxshadow in safari.



Best regards

5 years 7 months ago #10

  • Artem's Avatar
  • Artem
  • Posts: 10007
For icons and select add this
.icons-cell i {
    margin: 0 !important;
    padding-left: 10px !important;
}

select {
    -webkit-appearance: none; 
    -moz-appearance: none;
    appearance: none;
}

Regards,

5 years 7 months ago #11

  • Christian's Avatar
  • Christian
Thank you very much for the great support Artem!

Best regards,
Christian

5 years 7 months ago #12

  • Artem's Avatar
  • Artem
  • Posts: 10007
You're welcome :)

Have a nice day!

Regards,

5 years 6 months ago #13

  • Christian's Avatar
  • Christian
Hi Artem,

its me again :)
I have 2 bugs / problems at the "Event-Konfigurator" :
www.sport-piraten.de/firmenevents/sommerevents/teamevent-tubing

1) 1. Wunschdatum on mobile (iPhone) the calendar is at the top of the invisible area




2) 9. Videoservice the fullscreen mode works only in Firefox. It doesnt work proper at Safari and Chrome




Thank you and best regards

Christian

5 years 6 months ago #14

  • Artem's Avatar
  • Artem
  • Posts: 10007
Hi Christian,

1. Calendar - try to add this code
@media (max-width: 768px) {
     body .calendar {
         animation: none !important;
         top: 10px !important;
         -webkit-transform: translateX(-50%) !important;
     }
}

2. We provide support only for our extensions

Regards,

5 years 6 months ago #15

  • Christian's Avatar
  • Christian
Thank you Artem,

but unfortunately this solution does not work for me.
I implemented this code to template.css and to ba-style.css
In both variants there is no improvement.

Do you have any idea?


Thanks and best regards
Christian

5 years 6 months ago #16

  • Christian's Avatar
  • Christian
Hi Artem,

do you have any solution for me?
Our costumer can`t use the tool (calendar) on mobile.


Thank you very much
Christian

5 years 6 months ago #17

  • Artem's Avatar
  • Artem
  • Posts: 10007
Hi Christian,

Let's try next solution.

1. Go to: /components/com_baforms/assets/css/ba-style.css
2. After line 742 add this
@media (min-width: 1025px) {

3. After line 956 add this
}


So, the main idea, is to hide our custom calnder on mobile devices. Let me know results.

Regards,

5 years 6 months ago #18

  • Christian's Avatar
  • Christian
Thanks for your reply, Artem!

Unfortunately this solution doesn´t work.
The calendar continues to be on the top, but it looks different:




Best regards,
Christian

5 years 5 months ago #19

  • Artem's Avatar
  • Artem
  • Posts: 10007
Hi Christian,

Solution for calendar.
go to: /components/com_baforms/assets/css/ba-style.css

Line: +/- 799 (in the version 1.6.4. line 799)

Delete:
.calendar {
    animation: calendar-open .6s cubic-bezier(.25,.98,.26,.99) both;
    -webkit-animation: calendar-open .6s cubic-bezier(.25,.98,.26,.99) both;
    background: transparent !important;
    border: 1px solid transparent !important;
    left: 50% !important;
    position: fixed !important;
    top:5% !important;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    width: 426px !important;
}

@keyframes calendar-open {
    0% {top: -500px; opacity: 0;}
    100% {top: 5%; opacity: 1;}
}

@-webkit-keyframes calendar-open {
    0% {top: -500px; opacity: 0;}
    100% {top: 5%; opacity: 1;}
}

And Add this one
.calendar {
    background: transparent !important;
    border: 1px solid transparent !important;
    left: 50% !important;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, 50%);
    width: 426px !important;
}

Regards,

5 years 4 months ago #20

  • Christian's Avatar
  • Christian
Thank you Artem!
The new solution also doesn´t work for me...
But now works the last css-version proper. B)
I dont no why?

Best regards
Christian
Powered by Kunena Forum