B4J Question [ABMaterial] ABMInput Right to left

ihabsharaf

Member
Licensed User
Longtime User
hi
i have problem with ABMInput
Right to left work with text but title still left
the same issue with ABMIcombo
 

ihabsharaf

Member
Licensed User
Longtime User
ar.jpg
 
Upvote 0

Joan Paz

Member
Hello!

I have not seen a function for what you are looking for in ABMaterial, however I think you can modify it directly on the html with jquery:

B4X:
Dim inp1right As ABMInput
inp1right.Initialize(page,"inp1right",ABM.INPUT_TEXT,"Right Text",False,"")
page.Cell(5,1).AddComponent(inp1right)
  
Dim inp2right As ABMInput
inp2right.Initialize(page,"inp2right",ABM.INPUT_TEXT,"Right Text",False,"")
page.Cell(6,1).AddComponent(inp2right)
  
Dim inp3right As ABMInput
inp3right.Initialize(page,"inp3right",ABM.INPUT_TEXT,"Right Text",False,"")
page.Cell(7,1).AddComponent(inp3right)
  
  
' refresh the page
page.Refresh
  
' Tell the browser we finished loading
page.FinishedLoading
' restoring the navigation bar position
page.RestoreNavigationBarPosition
  
Dim script As String = $"$('label[id*=rightlabel]').css('text-align', 'right'); "$
  
ws.Eval(script,Null)



Important: javascript code after page.refresh

Is not the best solution and you will need use the word "right" in the end of all inputs id, but i hope helps.

Bye.
 
Upvote 0

alwaysbusy

Expert
Licensed User
Longtime User
@Joan Paz This is a good start, but there is a lot more that has to be done (e.g. in case one uses an icon together with an input)

@ihabsharaf Is it you who has entered this in the feedback case? I would be working on it a bit today and would like to send you a test version of the library if I got something. Is that ok?
 
Upvote 0

alwaysbusy

Expert
Licensed User
Longtime User
I'm starting to get somewhere :). I now already see I won't be able to do this for probably 10% of the components, but they are more exotic ones like the ABMChat or the ABMPercentSlider. I'll see how far I will get.

Also, although the content of a navigation sidebar will be Right-To-Left, the bar itself will always slide in from the left. This is because ABM has also ExtraSideBars and they always need to slide in from the right already.

Usage will be pretty simple:

You will be able to set RightToLeft support with one parameter, and on multiple levels:

B4X:
ABM.RightToLeft = true/false ' the complete app
Page.RightToLeft = true/false ' at page level
Cell(1,1).RightToLeft = true/false ' at cell level
Component.RightToLeft = true/false ' at component level

I also noticed in Right-To-Left languages, you have to do some special stuff in the text for e.g. brackets. To get the brackets richt, just add chr(8206) after the ')'. This is the unicode for the lrm; (Left-to-right mark) in HTML.
B4X:
"this is a test (1.0)" & Chr(8206)

So if for example you've set the page.RightToLeft = true, but now have cell you want to show LeftToRight, simple set cell(1,1).RightToLeft=false and it will overrule the page setting.

Primilary results looks promising:

upload_2018-5-31_16-29-37.png


But when you use LeftToRight in web apps, you really have to make the switch into your head, even for the grid! Someone who is used to RTL languages probably won't have a problem to so so, but for me it's quite 'strange'...

Notice here, it is like a 'mirror' of the original page:

upload_2018-5-31_16-37-58.png


I'll post later if I made enough progress to test.
 
Upvote 0

hanyelmehy

Active Member
Licensed User
Longtime User
I'm starting to get somewhere :). I now already see I won't be able to do this for probably 10% of the components, but they are more exotic ones like the ABMChat or the ABMPercentSlider. I'll see how far I will get.

Also, although the content of a navigation sidebar will be Right-To-Left, the bar itself will always slide in from the left. This is because ABM has also ExtraSideBars and they always need to slide in from the right already.

Usage will be pretty simple:

You will be able to set RightToLeft support with one parameter, and on multiple levels:

B4X:
ABM.RightToLeft = true/false ' the complete app
Page.RightToLeft = true/false ' at page level
Cell(1,1).RightToLeft = true/false ' at cell level
Component.RightToLeft = true/false ' at component level

I also noticed in Right-To-Left languages, you have to do some special stuff in the text for e.g. brackets. To get the brackets richt, just add chr(8206) after the ')'. This is the unicode for the lrm; (Left-to-right mark) in HTML.
B4X:
"this is a test (1.0)" & Chr(8206)

So if for example you've set the page.RightToLeft = true, but now have cell you want to show LeftToRight, simple set cell(1,1).RightToLeft=false and it will overrule the page setting.

Primilary results looks promising:

View attachment 68516

But when you use LeftToRight in web apps, you really have to make the switch into your head, even for the grid! Someone who is used to RTL languages probably won't have a problem to so so, but for me it's quite 'strange'...

Notice here, it is like a 'mirror' of the original page:

View attachment 68517

I'll post later if I made enough progress to test.
when RightToLeft function well be available
 
Upvote 0
Top