Logo
My Account |  Site Map | Contact Us  
Welcome Guest Search | Active Topics | Sign In | Register

Tab << >> buttons not showing on EO WebForms Tab Control Options
Adrian
Posted: Tuesday, July 13, 2021 5:46:22 PM
Rank: Newbie
Groups: Member

Joined: 7/13/2021
Posts: 4
We are experiencing an intermittent issue where the << and >> buttons at the right edge of the Tab control are not displaying consistently and the user is unable to navigate to certain tab pages.

You can see them appear / disappear seemingly at random when refreshing the page.

Strangely the issue only occurs on Chrome; on IE11 it is working fine!

Can you offer any suggestions as to the likely causes.

I believe it is coming from the EO client side scripts as I can see in the chrome network tab that the << and >> bitmaps are not being requested.

When I look in the HTML, the table containing the << >> buttons are completely missing. Viewing page source, just seems to show difference in the HTML attribute tags created by EO.

I downloaded the very latest version of the control and the issue is still present.

Jack Cheng
Posted: Wednesday, July 14, 2021 1:12:47 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 23,036
Hi,

What version do you use? Also do you have the page online so that we can check it here?

Thanks!
Adrian
Posted: Thursday, July 15, 2021 4:40:03 AM
Rank: Newbie
Groups: Member

Joined: 7/13/2021
Posts: 4
eo_support wrote:
Hi,

What version do you use? Also do you have the page online so that we can check it here?

Thanks!


As I mentioned in the OP I unsuccessfully tried the latest version (2021 Full) to see if it fixed the issue.

Sorry, the page is not publicly assessable - although I will make enquires as to whether we could facilitate demonstration of the issue.
Adrian
Posted: Thursday, July 15, 2021 6:37:20 AM
Rank: Newbie
Groups: Member

Joined: 7/13/2021
Posts: 4
I am now able to provide a publicly accessible demo - please PM me for details.
Jack Cheng
Posted: Thursday, July 15, 2021 5:01:26 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 23,036
Hi,

We have found the root of the problem. The issue is when our code detects the tabstrip width, the LeftIcon/RightIcon images for each tab items have not been loaded yet. This causes the image size to be calculated as 0 instead of their real size. The easiest way to avoid such issue is to use CSS to explicitly define their sizes. You will need to:

1. Add a CSS class name to the TabStrip's "_Default" LookItem's NormalStyle and SelectedStyle. The actual class name does not matter as long as it matches the step below. For demonstration purpose, we use class name "image_sizes". So the look item will be like this:

Code: HTML/ASPX
<eo:TabStrip ...>
  ....
  <LookItems>
	<eo:TabItem ItemID="_Default" 
	  LeftIcon-Url ="left_icon_url" RightIconUrl="right_icon_url"          
	  NormalStyle-CssClass="image_sizes"
	  SelectedStyle-CssClass="image_sizes"
	  .....>
  </LookItems>
</eo:TabStrip>


Note the added NormalStyle-CssClass and SelectedStyle-CssClass attribute;

2. Place the following CSS rules in your HTML file:

Code: CSS
.image_sizes td:first-of-type img
{
  width: 19px;
  height: 17px;
}
.image_sizes td:last-of-type img
{
  width: 11px;
  height: 17px;
}


Note here image_sizes is the CSS class name used in step 1. Here the first size (19 x 17) is the actual size of your left icon image, and the second size (11 x 17) is the actual size of your right icon image. If you change your images, you can adjust those sizes accordingly.

Please let us know if this works for you.

Thanks!
Adrian
Posted: Friday, July 16, 2021 5:47:34 AM
Rank: Newbie
Groups: Member

Joined: 7/13/2021
Posts: 4
Thank you for your response. The fix does indeed address the issue.

We have many pages where a similar issue could potentially occur. Are you planning to address this scenario in your library or is a different approach on our end required?



Jack Cheng
Posted: Friday, July 16, 2021 7:18:16 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 23,036
Yes. We are planning to address this issue on our end as well. The above solution is just the "fast" solution before we change code on our end.
Jack Cheng
Posted: Monday, July 19, 2021 3:11:11 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 23,036
Hi,

We have posted a new build that fixed this issue on our end. Please download it from our download page and take a look.

Thanks!


You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.