changing xbasic in the TabbedUI

[[email protected]]

Hi there, appreciate a nudge in the right direction from a guru.

I am playing with CSS and have a new image I want to use in the button panel of the tabbedUI to replace the right arrow, issue is when I "shrink" the button panel the new image "overflows" into the main panel.

using firebug I've discovered the property I need to change (the width from 20px to 40px)

tabbedUI.PNG

I can find this code in the xbasic of the UI component but I cant save my edit, it wont save it.

Any ideas on how to do this?

Cheers in advance

Brad

[frankbicknell]

Re: changing xbasic in the TabbedUI

You can change that in the CSS of the style that you are using. From a dialog or grid in properties under style name click on the edit icon then select edit style. Find that setting and change it there and save, republish your project. I am not sure of exactly where that setting is in the CSS. You probably should make a backup of the css style first.

[[email protected]]

Re: changing xbasic in the TabbedUI

Frank thank you for replying to my post. I've read a lot of your replies on a bunch of topics that have been very helpful.

Frank you've made comments on similar issues to this one and recommended use of the other properties property of the component. I'm unable to bridge the gap between what I'm struggling with and how that could work as I don't understand most of the xbasic in the context of the component, the 10,000 odd lines of code can be pretty daunting for non-coder. Actually be good if someone did an introductory high level overview of a simple component and what all the xbasic meant to start introducing people like me to that but I digress...

Frank my question I guess is this. Disclaimer: I am NOT a CSS expert so apologies if this comes across as a daft question. If you look at my original image you'll see the html element <td> within the xbasic code of the component calls for a class called tabbedUIMenuCollapse, it then has (what I would call) further "in line styling" and it's in this further styling that I need to make my change (I think) to the width of that <td> element (i.e. I need to increase the width). It seems to me that if I change a property in a class then that's like a global change (isn't it?) and that would mean if I changed the width property of the class it would change it everywhere the class was applied - wouldn't it? If this is true then I don't think I want that as I'm only interested in this <td> element.

EXPANDBAR.png

Maybe this extra image will help me explain. Note the arrow "overflows" the hidden side panel into the main section. This arrow replaces the tiny little '>>' arrows that are normally there, I have figured out I can replace the ">>" arrows both in the component properties and the style builder but I cant find anywhere to edit the width property of the <td> element in the style builder or component properties, best I have come up with is I've found the code hard-coded within the xbasic of the component but I cant figure out how to edit it here.

Hope that makes sense? Really appreciate any further 'nudges' thank you.

[GGandhi]

Re: changing xbasic in the TabbedUI

I am jumping in so please forgive me if I take you to a wrong place.
the xbasic you see is constructed by alpha to produce the grid based on the css logic and the grid fields requirement.
so you will not be able to adjust the xbasic, however if you want to change the arrow and still look like the way it did before
I would say css is the place to change.
first import those two arrows to your project folder ( left arrow, right arrow)
then go to tabbed ui properties and change the properties listed under
expand button and collapse button somewhere in the lower half and select the web project folder and then select appropriate image. then it will fit the table element for the menu panel.
you do not need to change the xbasic.
if you need post back I will show you.

[[email protected]]

Re: changing xbasic in the TabbedUI

Thanks Govindan, you're feedback is gold as always.

I did try this ...

expandbtn.PNG

...and I was hoping the <td> would expand to accomodate the image - but it didn't work (see image in post above)

(its a transparent png file, not sure if this is important?)

...you have prompted me to check the style builder as I also changed the default icons in there to the new arrows perhaps I cant do it in both places...I'll have a look and report back - thank you.

[[email protected]]

Re: changing xbasic in the TabbedUI

OK, in the style builder I had previously replaced the PanelRightCollapse icon and the PanelLeftExpand icon with my new images (initially I thought this is where I should do this, later I discovered the two properties you have mentioned) . I have now removed these and re ran the project with just the images referenced in the properties as per previous post - still not working, my arrow is still overflowing.

I have a new issue now. I cant get the original icons to appear on my site when I remove the image references from the collapse and expand btn properties of the tabbedUI.

In Chrome I now get nothing.

chrome.PNG

In Firefox I get a "missing image" image.

firefox.PNG

I have changed the style I was editing back to my old favorite GrGray and it shows the original icons

GrGray.PNG

I've republished the support files... but now these older icons are not are not showing up...any idea how to fix this issue?

yikes!

[GGandhi]

Re: changing xbasic in the TabbedUI

I know it is difficult to deal with the css. I find it very hard to adjust there, but I did change it in the properties to what it seems the way you want.
see if this is something that you can use.

http://screencast.com/t/duy27DTT5wu

[[email protected]]

Re: changing xbasic in the TabbedUI

Thanks - One question, do I call you Govindan or Gandhi? (I have seen you refferd to as both )

I really appreciate you taking the time to show me that vid; I laughed at your comment about not wanting to mess with CSS as it gets frustrating!

One of my issues is that A5 looks ok but not amazing, some of the styling is amazing, a lot of it is "function over form" however I am largely impressed that when you know where to stick stuff you can literally do anything, I have an incredible looking login page that my A5 gurus have helped me pull together and I know they got some help from some other A5 gurus. It really pops, it looks incredidbly professional, uses a lot of CSS and JS libraries. I have showed a client and their eyes literally widened compared to the templated logins that ship with A5 - so I have to learn this. I want to sell my stuff and make money off it and like or not clients like sexy looking apps.

Before

old login.PNG
After (this has some nice styling when you click the Request an account, the user details slide into view to complete the account login - very elegant - very simple)

new login.jpg

Back to my original issue, in your vid you have the same issue I am having, on the arrow pointing to the right most of it is missing i.e. you cant see it, only the back end of the shaft, the actual arrow is not visible... I have my panel set to "Auto Hide buttons pane" = yes/tick/true (for a better view). So when a user logs in the menu panel is initially hidden. The clue to the user that there is the ability to expand the panel- is the arrow. With yours you would only see the back half of the arrow - it would mean nothing and confuse the user. With mine it is overflowing into the main pane and looks stupid.

The answer is to increase the width of that <td> element as per the initial post (I've proven this in firebug) - I just need to know how to get to it. I think there may be a way to get to it through the <td> ID and refference this in the local CSS definition of the component but nothing I have tried works yet, if you have any other ideas I'd love to hear them otherwise I'll keep pecking away and update this thread when I finally solve this.

Thanks again - cheers Brad




I'm convinced that to monetize A5 aps they need to look like modern

[GGandhi]

Re: changing xbasic in the TabbedUI

call me govindan, thanks for asking, that is my first name. if someone calls me gandhi i won't be offended however that name is familiar to many people.

I'm convinced that to monetize A5 aps they need to look like modern

not just a5 apps. web is such a crazy thing if the user is not attracted in less than 30 seconds (even less i think) they are gone. your new login page does look very impressive.
i wish you lot of success.

yes i noticed the hind portion of the arrow when i was posting. i will take a look and see if i can change that.
thanks for all your kind words.

[GGandhi]

Re: changing xbasic in the TabbedUI

I think it is not just the button but the sliding part of the iframe slides up to that portion all the time if I can find the javascript function and able to modify leaving behind the 40 px then the new button will fit that area. so a long way to go.

[Jim Coltz]

Re: changing xbasic in the TabbedUI

There's several ways to change what eventually ends up on the page. You could add some code to your tabbed_ui page (not the component but the A5W page that A5 automatically creates for a tabbed UI. For example if I add this to my tabbed ui .A5W page I can change the width of the td element you're trying to manipulate.

<%a5
dim st as c = <<%html%
<td 	id="tbi.EXPANDBAR"
				class="iOS7GridHeader"
				style="display:none; width: 20px;"
%html%
dim subs as c = <<%html%
<td 	id="tbi.EXPANDBAR"
				class="iOS7GridHeader"
				style="display:none; width: 100px;"
%html%
x_out.Output.Body.TabbedUI_HTML = strtran(x_out.Output.Body.TabbedUI_HTML,st,subs)	

%>
<!-- Inserted new code above the line below -->
<%a5 ?x_out.Output.Body.TabbedUI_HTML %>

The caveat with this method is that each time you make an edit to the tabbed UI component, this .A5W page is overwritten. So keep that in mind!

The second method that comes to mind is to just add a little javascript to the tabbed UI component's onRenderComplete client side event to change the width in the style like so:

//Change with of "tbi.EXPANDBAR" td element from 20px to 200px
$("tbi.EXPANDBAR").style.width = '200px';

Either will work but the latter has the benefit of not worrying about it being overwritten.

Here's a video of both methods in action: http://screencast.com/t/4vJ1ZlvB

[[email protected]]

Re: changing xbasic in the TabbedUI

Genius - pure genius, I wouldn't have thought to change the style of the element in either of those places in a million years - thank you Jim.

Jim my thinking was that I would need to add some code like...

#tbi.EXPANDBAR{
width: 40px;
}
...to the local CSS definitions, this didn't work, can you explain why? (I can use the local CSS definitions to introduce new classes)

As for that voodoo you did with the string transformations...speechless. I'm going to spend some time trying to understand what that was all about...hope you don't mind if I follow up with some questions. I'm likely to have some Thanks for the vid too, I appreciate the time you took to do that, it was helpful.

Cheers
Brad