RadTabStrip rtsSelected and active navigation link

Posted by Community Admin on 05-Aug-2018 16:37

RadTabStrip rtsSelected and active navigation link

Sitefinity - Front- & Back-End Development

All Replies

Posted by Community Admin on 12-Jul-2011 00:00

Hi.

I am trying to set the ACTIVE link in the RadTabStrip navigation. I am using a css class (.sfNavigation) to target the navigation for styling. I notice in firebug that when a user has their mouse over a navigation link, a class name of "rtsSelected" is added to the a href. this only happens on the HOVER state of each link.

why is this and how can i target the ACTIVE navigation link to show the website user the link/page they are currently on?

Here is my css:

.sfNavigation height: 37px; width: 882px; margin: 27px auto 0 auto; background: none; border: none
.sfNavigation ul.rtsUL float: none
.sfNavigation ul.rtsUL li.rtsLI height: 37px; width: 143px; margin: 0 2px; padding: 0
.sfNavigation ul.rtsUL li.rtsLI a.rtsLink height: 27px; width: 143px; padding: 10px 0 0 0; display: block; text-align: center; background: transparent url(../images/background-nav.png) no-repeat left top
.sfNavigation ul.rtsUL li.rtsLI a.rtsLink font-family: Trebuchet MS, Arial, Sans-Serif; font-size: 1.1em; color: #fff; line-height: normal; text-transform: uppercase; text-decoration: none; cursor: pointer
.sfNavigation ul.rtsUL li.rtsLI a.rtsLink:hover background: transparent url(../images/background-nav.png) no-repeat left bottom
.sfNavigation ul.rtsUL li.rtsLI a.rtsLink span.rtsOut margin: 0; padding: 0
.sfNavigation ul.rtsUL li.rtsLI a.rtsLink span.rtsIn margin: 0; padding: 0
.sfNavigation ul.rtsUL li.rtsLI a.rtsLink span.rtsTxt margin: 0; padding: 0



Posted by Community Admin on 15-Jul-2011 00:00

Hello John,


Actually the class .rtsSelected is used to show the current page in the navigation. The add classes on hover are: rtsBefore, rtsAfter, rtsHoverAfter...

You can check this out in the template demo website here:
http://templates.sitefinity.com/university/academics/athletics



Kind regards,
Jordan
the Telerik team

Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

Posted by Community Admin on 22-Jul-2011 00:00

Hi, thanks for your response. I wish it were as simple as you are explaining. However, you're missing what I am referring to.

I am using the class .rtsSelected to show the current page in the navigation, however using the Horizontal RadTabStrip, whenever I HOVER to a NEW navigation link, the class .rtsSelected adds itself to the link being hovered and removes itself from the current page link in the navigation.

link (current page - .rstSelected added)
link
link

link (current page - .rtsSelected removed)
link (hover - .rstSelected added) 
link

I am beginning to think this is a bug with the Horizontal RadTabStrip only.
Thanks!

Posted by Community Admin on 26-Jul-2011 00:00

Hi John,

Acrtuallty there is such bug logged only for RadTabStrip. At the moment what I can propose is using RadMenu instead of RadTabStrip with onClick event.


Greetings,
Jordan
the Telerik team

Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

Posted by Community Admin on 26-Jul-2011 00:00

Roger that!

Posted by Community Admin on 26-Sep-2011 00:00

Any update to this issue? (or workaround)?

Posted by Community Admin on 04-Oct-2011 00:00

Hi Jordan,

Any update on the RadTabStrip issue. Is that issue fixed in latest version?

We are using Telerik version(2010.1.519.20) and we are getting some error css on Radtabstrip while running the testcases in selenium.

Error: css=li.rtsLI.rtsLast > a.rtsLink.rtsAfter > span.rtsOut > span.rtsIn > span.rtsTxt not found

Thanks,
Vijay

Posted by Community Admin on 07-Oct-2011 00:00

Hello Vijay,

Are you reproducing this error manually or only when you are running the selenium test? Can you also give some more information about what kind of test are you executing? Thank you in advance! 
 
All the best,
Petya
the Telerik team

Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

Posted by Community Admin on 11-Oct-2011 00:00

Petya,

I am getting this error only when I run the test cases from Selenium.  There is no error on running applications individually.

Steps of selenium test cases:

1. Run the application
2. Scripts generation from Selenium for running application.
3. Execute the script again ( getting error on executing the script).

Error: css=li.rtsLI.rtsLast > a.rtsLink.rtsAfter > span.rtsOut > span.rtsIn > span.rtsTxt not found

Thanks,
Vijayababu

Posted by Community Admin on 12-Oct-2011 00:00

Hello Vijay,

Can you send me the selenium test in html format so I could try to execute it locally. Thanks in advance.

Regards,
Petya
the Telerik team
Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

Posted by Community Admin on 14-Oct-2011 00:00

Petya,

Please find the below test case script,

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "www.w3.org/.../xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head profile="selenium-ide.openqa.org/.../test-case">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="selenium.base" href="http://uat.sengen.com/" />
<title>Reports - Checking all Report Tabs</title>
</head>
<body>
<table cellpadding="1" cellspacing="1" border="1">
<thead>
<tr><td rowspan="1" colspan="3">Reports - Checking all Report Tabs</td></tr>
</thead><tbody>
<tr>
    <td>open</td>
    <td>/Sengen/Tax306/pages/reports.aspx</td>
    <td></td>
</tr>
<tr>
    <td>click</td>
    <td>css=#ctl00_ContentPlaceholderBody_ReportTabStrip &gt; div.rtsLevel.rtsLevel1 &gt; ul.rtsUL.rtsScroll &gt; li.rtsLI &gt; a.rtsLink.rtsAfter &gt; span.rtsOut &gt; span.rtsIn &gt; span.rtsTxt</td>
    <td></td>
</tr>
<tr>
    <td>click</td>
    <td>css=#ctl00_ContentPlaceholderBody_ReportTabStrip &gt; div.rtsLevel.rtsLevel1 &gt; ul.rtsUL.rtsScroll &gt; li.rtsLI &gt; a.rtsLink.rtsAfter &gt; span.rtsOut &gt; span.rtsIn &gt; span.rtsTxt</td>
    <td></td>
</tr>
<tr>
    <td>click</td>
    <td>css=li.rtsLI.rtsLast &gt; a.rtsLink.rtsAfter &gt; span.rtsOut &gt; span.rtsIn &gt; span.rtsTxt</td>
    <td></td>
</tr>
<tr>
    <td>click</td>
    <td>css=#ctl00_ContentPlaceholderBody_ReportTabStrip &gt; div.rtsLevel.rtsLevel1 &gt; ul.rtsUL.rtsScroll &gt; li.rtsLI &gt; a.rtsLink.rtsBefore &gt; span.rtsOut &gt; span.rtsIn &gt; span.rtsTxt</td>
    <td></td>
</tr>
<tr>
    <td>click</td>
    <td>css=#ctl00_ContentPlaceholderBody_ReportTabStrip &gt; div.rtsLevel.rtsLevel1 &gt; ul.rtsUL.rtsScroll &gt; li.rtsLI &gt; a.rtsLink.rtsBefore &gt; span.rtsOut &gt; span.rtsIn &gt; span.rtsTxt</td>
    <td></td>
</tr>
<tr>
    <td>click</td>
    <td>css=li.rtsLI.rtsFirst &gt; a.rtsLink.rtsBefore &gt; span.rtsOut &gt; span.rtsIn &gt; span.rtsTxt</td>
    <td></td>
</tr>
</tbody></table>
</body>
</html>

Thanks,
Vijay

Posted by Community Admin on 18-Oct-2011 00:00

Hello Vijay,

Can you also give me a link to the frontend page you are testing, so I can execute the test there. My suggestion is to put some "wait for element present" commands, because some of the elements you are testing may be loaded slowly and this might cause some troubles.

Best wishes,
Petya
the Telerik team
Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

Posted by Community Admin on 18-Oct-2011 00:00



Thanks Petya,I will use "wait for element" and let you know if any issues. Please find the below front page link,

http://uat.sengen.com/Sengen/Tax306/pages/reports.aspx

Regards,
Vijay

Posted by Community Admin on 18-Oct-2011 00:00



Thanks Petya,I will use "wait for element" and let you know if any issues. Please find the below front page link,

http://uat.sengen.com/Sengen/Tax306/pages/reports.aspx

Regards,
Vijay

Posted by Community Admin on 20-Oct-2011 00:00

Hello Vijay,

You can try something like this:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="selenium.base" href="http://uat.sengen.com/" />
<title>testcase</title>
</head>
<body>
<table cellpadding="1" cellspacing="1" border="1">
<thead>
<tr><td rowspan="1" colspan="3">testcase</td></tr>
</thead><tbody>
<tr>
    <td>open</td>
    <td>/Sengen/Tax306/pages/reports.aspx</td>
    <td></td>
</tr>
<tr>
    <td>waitForElementPresent</td>
    <td>css=#ctl00_ContentPlaceholderBody_ReportTabStrip > div.rtsLevel.rtsLevel1 > ul.rtsUL.rtsScroll > li.rtsLI > a.rtsLink.rtsAfter > span.rtsOut > span.rtsIn > span.rtsTxt</td>
    <td></td>
</tr>
<tr>
    <td>click</td>
    <td>link=Agency List</td>
    <td></td>
</tr>
<tr>
    <td>pause</td>
    <td>5000</td>
    <td></td>
</tr>
<tr>
    <td>waitForElementPresent</td>
    <td>css=#ctl00_ContentPlaceholderBody_ReportTabStrip > div.rtsLevel.rtsLevel1 > ul.rtsUL.rtsScroll > li.rtsLI > a.rtsLink.rtsAfter > span.rtsOut > span.rtsIn > span.rtsTxt</td>
    <td></td>
</tr>
<tr>
    <td>click</td>
    <td>link=Customer List</td>
    <td></td>
</tr>
<tr>
    <td>pause</td>
    <td>5000</td>
    <td></td>
</tr>
<tr>
    <td>waitForElementPresent</td>
    <td>css=#ctl00_ContentPlaceholderBody_ReportTabStrip > div.rtsLevel.rtsLevel1 > ul.rtsUL.rtsScroll > li.rtsLI > a.rtsLink.rtsAfter > span.rtsOut > span.rtsIn > span.rtsTxt</td>
    <td></td>
</tr>
<tr>
    <td>click</td>
    <td>link=Adjustments</td>
    <td></td>
</tr>
<tr>
    <td>pause</td>
    <td>5000</td>
    <td></td>
</tr>
<tr>
    <td>waitForElementPresent</td>
    <td>css=#ctl00_ContentPlaceholderBody_ReportTabStrip > div.rtsLevel.rtsLevel1 > ul.rtsUL.rtsScroll > li.rtsLI.rtsLast > a.rtsLink > span.rtsOut > span.rtsIn > span.rtsTxt</td>
    <td></td>
</tr>
<tr>
    <td>click</td>
    <td>link=Age Report</td>
    <td></td>
</tr>
</tbody></table>
</body>
</html>

 

Kind regards,
Petya
the Telerik team
Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

This thread is closed