The below code is not working in IE 8.0
It works fine in firefox and chrome browsers . In IE the list items instead of coming on a single row they are coming in multiple lines. How to address this.
I am using Bootstrap v2.0.0
and jQuery v1.7.1
<div class="row-fluid">
<div class="span12">
<div class="pull-left">
<ul class="nav nav-pills">
<li>
<a href="#" data-toggle="pill">openorder"
</a>
</li>
<li >
completedorder
</li>
<li>
service"
</li>
</ul>
</div>
</div>
</div>
It's hard to say with only the HTML here and no example. You tagged this with javascript and jquery - is there some kind of problem here too?
I think you should remove the pull-left class because that just makes the times inside float to the left. I suspect this is your problem.
Related
I have a demo application here and in the upper left corners of the "tweets" there are dots and I have no idea where they come from. The code is written in Ember and the template looks like this
<h2>Ember.js DEMO Tweet list</h2>
<div class="tweets-list">
<h2>Tweets</h2>
<button {{action 'changeAllTweets'}}>Change All Tweets</button>
<button {{action 'changeOneTweet'}}>Change One Tweet</button>
<div class="row input-wrap">
</div>
{{#each this.model.topTweets as |model|}}
<li class="media">
<div {{action 'bindNewModel' this}} class="row">
<a class="pull-left" href="#"><img class="media-object" width="75" height="75" src={{model.avatar}}/></a>
<div class="media-body">
<h4 class="media-heading">{{model.favorites}}</h4>
<p>{{model.text}}</p>
</div>
</div>
<div class="row">
<div class="col-xs-4">
Expand
</div>
<div class="col-xs-8">
<ul class="list-inline text-right">
<li href="#">Reply</li>
<li href="#">Retweet</li>
<li href="#">Favorite</li>
<li href="#">More</li>
</ul>
</div>
</div>
</li>
{{/each}}
</div>
P.S. The SHOW LIST button must be pressed for the list to show
It's because you're using list items, i.e. <li> tags. They're shown with bullet points by default.
First of all, you should only use <li> tags inside an ordered or unordered list (<ol> / <ul>). You should consider if list items are appropriate here. Maybe <div>s are more suitable?
If you want to use list items you should wrap them in a <ul> list and then get rid of the bullet points by applying the styling: list-style-type: none.
Changing the display style of the list item will also get rid of the bullet point.
These are the list item markers. Add list-style:none; to the ul, and they will disappear.
Edit: I see that you are also missing the ul itself. The wrapping ul does not exist. These are just list items. Add the opening ul before the each statement and closing after it. And in case the list style none rule.
I'm on mobile and can't edit the fiddle.
There is HTML structural error.
Wrap the <li class="media"> with an <ul> tag. I can assume you are using Bootstrap. If yes then wrap the <li> tag with <ul class="list-group"> and add list-group-item class to the <li> tag like this: <li class="media list-group-item">
I'm learning AngularJS.
I've written following code:
<ul class="list-group">
<li class="list-group-item" ng-repeat="product in store.products">
<h3 ng-include="'product-title.html'"/>
<section ng-controller="PanelController as panel">
<ul class="nav nav-pills">
When I open the browser I see that the <section ng-controller="PanelController as panel"> part is not present in the resulting HTML code.
You can find the entire source here.
How can I fix this problem (make the section part appear in the browser) ?
Problem is in your
<h3 ng-include="'product-title.html'"/>
ng-include has to be used in pair tags as referred here - https://docs.angularjs.org/api/ng/directive/ngInclude
So change it like that
<h3 ng-include="'product-title.html'"></h3>
I have been driving myself mad over getting ScrollSpy working. I have a menu that remains in a fixed, left position as the user scrolls down after a certain point, however, ScrollSpy refuses to work in any shape or form. I have tried a multitude of methods to get it working, as well as using a CMS (DotNetNuke) so please excuse some messy code here and there.
Here's the HTML of the nav:
<div role="complementary" class="bs-docs-sidebar hidden-print" id="sideNav">
<div class="sideNavCont">
<div>
<span class="sideMenuHeading">TITLE</span>
</div>
<div class="sideMenuGuideSep"></div>
<div class="sideMenu" id="navbar">
<ul class="nav nav-list affix sideMenuGuide">
<li>Option 1</li>
<li>Option 2 </li>
<li>Option 3 </li>
<li>Option 4 </li>
(and so on...)
</ul>
</div>
</div>
</div>
And here is the HTML for the content I want spied on:
<div id="content">
<span id="opt1">
<strong>Overview</strong>
</span>
<div>
<strong>
<span id="opt2" style="font-size: 32px;">TITLE</span>
</strong>
</div>
<p>
<span id="opt3" style="font-size: 32px;">
<strong>TITLE</strong>
</span>
</p>
</div>
Plus I have this piece of Jquery:
$('body').scrollspy({ target: '#content' });
Note that I also currently have working page anchors on each heading that work from linking from the nav.
I know the answer is probably staring me right in the face, but I'd appreciate your help. Thanks!
From the bootstrap doc, http://getbootstrap.com/javascript/#scrollspy.
"Then add the data-target attribute with the ID or class of the parent element of any Bootstrap .nav component."
So it should probably be initialized like this:
$('body').scrollspy({ target: '#sideNav' })
I am using twitter-bootstrap-rails gem. I have following HTML:
<div id="scroll-nav">
<ul class="nav nav-pills">
<li class="active">
<a href="#somelink1">
<div>text1</div>
</a>
</li>
<li>
<a href="#somelink2">
<div>text2</div>
</a>
</li>
<li>
<a href="#somelink3">
<div>text3</div>
</a>
</li>
</ul>
</div>
I also have following javascript:
$('body').scrollspy({target: '#scroll-nav'});
Scrollspy does not work, I do not get any JS errors. Am I missing something?
the documentation says:
Navbar links must have resolvable id targets. For example, a home must correspond to something in the DOM like <div id="home"></div>.
I am working on jquery. I have 4 tabs within the <li> tags. I have used jquery 1.9.1.js for my project. my <li> looks like the one below. I got a solution to use http://www.asual.com/jquery/address/docs/#api-reference. But the fact is that I have used and imported this external lib but it doesn't seem to work. The thing which i am trying to attain is when ever I select the specific <li> item and press f5 the page by default loads the first <li> item. But the thing which I am looking for is , it has to load the same selected <li> item and its contents when refreshed. any help would be appreciated.
Here is my HTML code:
<div class="container">
<div class="coolbar">
<div class="cool-inner">
<ul id="mybar" class="nav cool-tabs">
<li class="Coke">
Coke <span class="dashboard-bottom"></span>
</li>
<li class="Fanta">
Fanta<span class="Pricing-bottom"></span>
</li>
<li class="Pepsi">
Pepsi<span class="Promotion-bottom"></span>
</li>
<li class="Limca">
Limca<span class="Product-bottom"></span>
</li>
</ul>
</div>
</div>
</div>.
<div id="login">
<button type="button" id="submit" value="Login" class="btn">Click me for cool drinks</button>
</div>
And my jquery code for page refresh:
$(function() {
$('#submit').click(function() {
$('.container').show();
$('#login').hide();
$.cookie('shown', true);
});
if ($.cookie('shown')) {
$('#submit').click()
}
});
Thanks in advance.
when activating the tab you may want to set the tabs position/value in the cookie and when the page loads, check if tabs position/value exist in the cookie, then accordingly activate that tab or trigger click event on that tab.
may this help