I'm posting a problem and a solution at the same time.
When the Alpha Anywhere (v12) just came out I started to build simple UX components
and found that I was left with an odd 1-pixel line between panels.
This can't be fixed using the properties drop-downs. Unfortunately you have to know
more about the how raw javascript works.
Recently I stepped away from AA coding for about 3 months and found that when I returned and
used the most recent version of AA, some of my graphics were slightly messed up.
To fix the problem I started by creating a simple template UX (a test UX) to see if I could create
error-free components.
Oddly, the very first thing I encountered was the same 1-pixel border issue.
The corrective action is similar to that from before but AA responds a bit differently now and
so I thought I'd record issue here.
Here's the problem:
Here's the solution. You can't fix this with the drop-downs or the
naturally available selections. You must alter this in the CSS.txt tab.
The result is a like the correct image shown earlier.
This kind of nutty little javascript or CSS error can be hunted down in the general case by comparing
a component definition from a working component (if available) from a non-working one.
I used "www.DiffChecker.com" to put two component code sets side-by-side and compare them. This
helped to show the difference and then correct the problem.
I also made a little video describing the process in case it helps.
Warning: the video may eventually disappear in coming months if I run out of ScreenCast space. But
for now it should work fine.
I hope it helps someone.
When the Alpha Anywhere (v12) just came out I started to build simple UX components
and found that I was left with an odd 1-pixel line between panels.
This can't be fixed using the properties drop-downs. Unfortunately you have to know
more about the how raw javascript works.
Recently I stepped away from AA coding for about 3 months and found that when I returned and
used the most recent version of AA, some of my graphics were slightly messed up.
To fix the problem I started by creating a simple template UX (a test UX) to see if I could create
error-free components.
Oddly, the very first thing I encountered was the same 1-pixel border issue.
The corrective action is similar to that from before but AA responds a bit differently now and
so I thought I'd record issue here.
Here's the problem:
Problem 1-pixel line between panels | Expected no-pixels between panels |
IMG_01_problem_layout.png | IMG_02_older_working_layout.png |
Here's the solution. You can't fix this with the drop-downs or the
naturally available selections. You must alter this in the CSS.txt tab.
WRONG: "border-style: none;" | CORRECT: "border: none;" |
IMG_05_css-text_for_non-working_property.png | IMG_06_css-text_for_corrected_property.png |
Expected no-pixels between panels |
IMG_02_older_working_layout.png |
a component definition from a working component (if available) from a non-working one.
I used "www.DiffChecker.com" to put two component code sets side-by-side and compare them. This
helped to show the difference and then correct the problem.
I also made a little video describing the process in case it helps.
Warning: the video may eventually disappear in coming months if I run out of ScreenCast space. But
for now it should work fine.
Video link: | ScreenCast-link-here |
I hope it helps someone.
Comment