I don't know if I am the only one noticing this, but I have a application that uses a kendoTabStrip and when the page initially loads before the tabstrip is initialized, the page shows a bulleted list. Does anyone know how to prevent it?
Here is what my HTML looks like.
<div id="tabstrip" style="width:1230px">
<ul>
<li class="k-state-active">
Tab1
</li>
<li>
Tab2
</li>
</ul>
<div>
<div id="Grid1"></div>
</div>
<div>
<div id="Grid2"></div>
</div>
</div>
Basically you should not see such flickering effect. It sounds like your page is pretty heavy. You can try to set the whole tabstrip with style display:none and after initializing it to show() it with jQuery.
Related
<div class="dropdown notification-dropdown" data-toggle="dropdown">
<img src="{{ asset('front/img/notification-bell-ico.svg') }}" alt="">
<ul class="dropdown-menu">
<div class="card notification-card">
<div class="card-header">
<p>Notification</p>
See all
</div>
<notification :user="{{ auth()->user() }}"></notification>
</div>
</ul>
</div>
I am loading my vue component as notification as seed in above code but some how it does not render html when i click header bell icon to open it
I don't know how to resolve it
if any help will be greatly appreciated.
thanks in advance.
Your snippet looks like a blade template and notification bells are often in a site's header area. It's possible your header is not within the root element you've got Vue controlling.
Can someone assist, I need to identify the xpath that's inside label class for the last ticket-type. The .html code is as below.
<div class="vertical-accordion">
<ul id="accordion-5" class="accordion">
<li class="open-li">
<a class="toggle-link open" href="#">
<span>Tickets on your smart card</span>
</a>
<div class="accordion-drop" style="display: block;">
<ul>
<li>
<li>
<li>
<label class="ticket-type">megarider</label>
<label class="validity"> (7 day: 16 June to 22 June 2016 ) </label>
</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
</div>
</div>
</div>
</article>
If you want to find the last ticket-type, I assume that there are multiple ticket type...
You didn't provide a lot of HTML, I'll answer with that assumption :
//label[#class='ticket-type'][last()]
Hope it'll help !
You can use this xpath to find the element in your example:
//label[#class='ticket-type'][1]
Open up this page using Chrome, Hit F12 Developer tools, Inspect the element, find the label in the F12 window (Elements Tab) right click on the label tag and select Copy -> Copy XPath
I am newbie in Telerik (Kendo). I want to know how can I hide or show tab based on roles or authentication as per user. I guess its been done by Helper, but I am not sure how to do it.
Please help me regarding this.
Thanks in advance.
Regards,
DS
Its a bit difficult to provide you with the best answer without seeing what you have so far, but if your initializing the TabStrip using JavaScript you will have a list if tabs in your html:
<div id="example">
<div id="tabstrip">
<ul>
<li id="TabParis" class="k-state-active">
Paris
</li>
<li id="TabNewYork">
New York
</li>
<li id="TabLondon">
London
</li>
</ul>
<div>
<div class="weather">
<h2>17<span>ºC</span></h2>
<p>Rainy weather in Paris.</p>
</div>
<span class="rainy"> </span>
</div>
<div>
<div class="weather">
<h2>29<span>ºC</span></h2>
<p>Sunny weather in New York.</p>
</div>
<span class="sunny"> </span>
</div>
<div>
<div class="weather">
<h2>21<span>ºC</span></h2>
<p>Sunny weather in London.</p>
</div>
<span class="sunny"> </span>
</div>
</div>
Give each of the tab list items an id.
Then simply show or hide the list item by Id using JQuery
$('#TabNewYork').hide()
Here is a working example in JSFiddle: http://jsfiddle.net/loanburger/9mLz5wnc/
I am using Capybara,Rspec and Ruby for my development. I am having drop down list which is populated with values with dynamic ids because of which I am not able locate the element correctly. Here is HTML code. I tried to get the solution from this site as well as by googling. But I couldn't get the correct solution
when I am doing the firebug I am getting Xpath as //[#id='select2-result-label-8'] and every time I am getting new id in the last meaning, next time if I go I will get it as //[#id='select2-result-label-11']. How to resolve this issue. I am having similar issues with my group of check box also. Hope this solution will help there also
<ul id="Values" class="check" role="listbox">
<li class="Reports " role="presentation">
<div id="select2-result-label-3" class="history" role="option">
<span class="same"/>
Add New
</div>
</li>
<li class="Reports-highlighted" role="presentation">
<div id="select2-result-label-4" class="history" role="option">
<span class="same"/>
Multiple
</div>
</li>
<li class="Reports" role="presentation">
<div id="select2-result-label-5" class="history" role="option">
<span class="same"/>
Last
</div>
</li>
</ul>
I'm using a custom tabstrip that I took from the KendoUI page and adapted for my application.\
It has 3 tabs (home, startOfDay and stops). Each tab goes to an HTML page.
The problem is this, I can navigate from Home to one of the other tabs without a problem, but after that if I try navigate to another tab it just goes to a blank page.
Here's the my layout code.
<section data-role="layout" data-id="default">
<header data-role="header">
<div data-role="navbar">FnF Driver Application</div>
</header>
<!--View content will render here-->
<footer data-role="footer">
<div data-role="tabstrip" id="custom-tabstrip">
<a data-icon="home" href="home.html">Home</a>
<a data-icon="globe" href="startOfDay.html">Start Of Day</a>
<a data-icon="toprated" href="stops.html">Stops</a>
</div>
</footer>
</section>
each page is contained in a div that looks like this...
<body>
<div id="home/startOfDay/stops" data-role="view" data-layout="default">
~Content goes here~
</div>
</body>
Any help would be greatly appreciated.
Thanks!!!
Try removing the <body> tags from your views? I think when Kendo UI Mobile reads in a remote view it injects it into the page DOM, and having another <body> tag might be messing it up.
I read somewhere that a layout has to have at least one view defined to work properly, even if it is a blank view. Try putting in a blank view.
<section data-role="layout" data-id="default">
<header data-role="header">
<div data-role="navbar">FnF Driver Application</div>
</header>
<!--View content will render here-->
<div data-role="view"></div>
<footer data-role="footer">
<div data-role="tabstrip" id="custom-tabstrip">
<a data-icon="home" href="home.html">Home</a>
<a data-icon="globe" href="startOfDay.html">Start Of Day</a>
<a data-icon="toprated" href="stops.html">Stops</a>
</div>
</footer>
</section>