|
|
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.
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,083
|
Hi,
What version do you use? Also do you have the page online so that we can check it here?
Thanks!
|
|
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.
|
|
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.
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,083
|
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!
|
|
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?
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,083
|
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.
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,083
|
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!
|
|