RTL product display

Hi,
I have a multilingual site and I'm using hikashop with all of the languages. Everything is working great except on the Hebrew version (RTL) the products display is a mess when using bootstrap. Certainly it ain't the template (t-3 framework but its the same with protostar) and I would like to keep the bootstrap option on for mobile users. Only the RTL presentation have this problem! Couldn't find a solution on documentation or here. Would appreciate your help,
Thanks,
Einat

-- url of the page with the problem -- : www.aroma-care.co.il/index.php/he/
-- HikaShop version -- : essential 2.2.3
-- Joomla version -- : 3.1.5

Hi
the acces if your url return "403 forbidden " so n po way to select language and have a look in the html code !!
It is really a hikashop or joomla problem ?
Sometime verify upgrade version could resolve the problem ?
use the console remove default css and test other css "rtl" .css file ....
How do you manage language ( joomfish , falang , others ) ?

---

in joomla framework level
T3 support RTL offical
RTL support in T3v2 framework was cubersome go to t3v3 see changelog

---

in bootstrap level
boostrap have some rtl implementation !! does it mean boostrap don't support rtl by default ? Yes ( read this ) . Boostrap need 2 css , see here . and stackoverflow .

---

in the html level
some modification isneed
1 dir see here
2 some properties values must change so use a tool to do that R2 tool , CSS JAnus

regard's

Other modules and components do work in RTL properly, just hikashop...

A-- I think hikashop is compatible or support boostrap don't mean it implement use tag and css selector / xpath define by boostrap so you have to overrdide all the phph view file ? ( hikashop could confirm my writing ? )

B-- Could you make your site accessible to have a look ?

C-- Hikashop is a product tool or to be basic a bundle of extension LAnguage , plug in , module , component ? problem occur with ALL extension implement by hikashop team ?

D-- if you have a look to the css content create by hikashop you ll see that they use rtl properties only inside rtl.css file ( OK) . But why create a css file specific for hikashop since the rtl must be manage by css ( seelctor properties ) that apply since the top of html ( body tag ) ?


E---the css of Hikashop are store in media/com_hikashop/css the 9 names are 1 backend_default , 2 dtree ,2 frontend_default , 3 frontend_,4 custom ,5 menu ,6 opload ,7 otree ,8rtl 9 StyleSheet
there many properties name value that can be use in rtl
div {
float: left;
text-align: left;
margin: 0 1em 0 2em;
padding-right: 1em;
}
Does change the rigth to left string in all the hikashop css load in your page give a better result ?
text align is find in 1235678 Does the problem come from this properties values set explicit in css file ?

F-- perhap support rtl using boostrap in joomla is a myth anf need to use JUI

Hi, I just have this problem with the product listing page, everything is working fine besides that, RTL & Bootstrap. I dont know why you cant see the site, its fine: www.aroma-care.co.il/ but anyways here are some jpg - english (ltr) in bootstrap design & in Hebrew (rtl) in bootstrap design. If bootstrap design set to NO, there is no problem! but I want the site to be accessible via smartphones as well.

Hi,

Indeed the website is not accessible, 403 error returned.
Thanks to check with your browser console if there is no margin added when in bootstrap mode.
Bootstrap generally add margin on the spanX, so the issue is maybe there.

You can read that tutorial:
hikashop.com/support/support/documentati...ize-the-display.html

Hi Xavier,
Thanks for your replay. I didn't understand from the tutorial how to fix the problem. Is there a solution to this?
Will it help if I buy and install one of the styles offered by Hikashop? I mean, will it override the problematic style using bootstrap?
I'm sorry for not understanding where the problem comes from, I'm a web designer not a programmer

Hi there,

It's a common issue coming from the css. It might come from your template or your own css so we might not assure that buying a style will solve the problem (but it could!). What Xavier suggested is simply to look at the code with the inspect element feature of your browser and try to seek for a margin property. Try to remove this property and see if it fixes the problem.

You can also give us a link to the page if you really can't find the solution.

Hi, I took a look at the inspect element and it does look like there is a span issue but I'm really not sure what to do here... I have noticed that changing the template isn't helpful: its the same again with the basic protostar.
I would really appreciate your help here, the link: www.aroma-care.co.il/index.php/he/shop/facial-products
Again, if you switch to English or Russian it looks fine, its just with rtl.
Would gladly purchase your styles if you think it will solve my problem.
Thank you so much for your help, you meet a really high standard with your great support

I just gave it a try and it looks fine.
What browser and OS are you using?

Sorry, I turned off the bootstrap mode for the last hour. It is on now, please take another look,
Thank you.

Anyone?

hi

Buying style ll not resolve the problem. People have to undertand what they do and so need to understand css before go to premade template or preprocessor ( less compas) . IF they don't do it they ll need support and so pay . Template, framework ( joomla or bootstrap) preprocessor are layer that developper need to study to understand the in out of this layer . Read css file like reset.css and undertand why this file occur is something to do among others ...........

a---the layout using english is wrong when we reduce the width size of the browser
b-- in default language there is wrong alignmeent vertical and horizontal ?
where is the problem ? can you create a virtual capture screen with what i have and what i want and highlight the problem in one raster file ?
c- THERE IS 17 js and 40 css !!!!!!!
d- you use the bootstrap T3 blank FW ( i don't test it a lot )
e- 17 mediaqueries but only 8 breakpoints !!! WOUAHH !!! ( don't test or try to understand logic )
,

I dont really think it is a rtl problem . capture screen is not efficient if you don't highlight the problem ( arrow annotation ) .
An image is 1000 words but ti s easier with some informations ( capture screen before after , actual - aim ) .
So refer to the problem ( image outside box , different vertical/horizontal alignement ) ,here is 2 changes that i think could resolve the problem ( don't know if related to the post ) . It can create other problems because i not test combination of language & mediaqueries ( size width of browser )
frontend_default.css
div.hikashop_subcontainer_border {
border: 1px solid;
min-width: 220px;
min-height:381 px;
}
/plugins.system.t3.base.less.global-typo.less.css
.thumbnails {
margin-bottom: 20px;
margin-left: -40px;
list-style: none outside none;
min-width: 650px;
}

It is the first time i see a web site with a look and feel that don't look like boostrap .
Did you hire a designer like hikashop do for their website ? ( you say in post webdesigner )
( designer is only image , webdesigner is css/js frontEnd developper, developper is php )
it a shame someone (webmaster ) disable the language support when i study your website
english

Hope this ll helpfull

Hi, thanks for helping, the problem is that in ltr language the products are oriented in a nice table and in rtl they are not. If you know how to solve this I'll appreciate it a lot. Purchasing ans Installing Hikashop Styles didn't work...

Im using Chrome and IE, OS- windows

Hi
Can you post the name of selector of the table you speak .
could you give us a css xpath to avoid search it ?

Can you post 2 captures in one that show good and wrong thing ? ( with embedding comments )
regard's

hi

does your issue have been resolved ?
How do you resolve the problem ?
if yes have you got a capture before/after and steps you follow do ?

regard's