I'm using Bootstrap 3 for a project and I'm having a problem with tabs... and this is only happening in one of the pages...
I've 2 tabs, and everything loads fine except for the fact the second tab (not active) loads as well, as a huge white space under the active tab content. I'm using tabs in other parts of the site (backoffice) and I've had no problems or whatsoever so far... I've checked for open HTML brackets but I've found none... Can you have a look at what's happening?
Thanks!
Website: http://www.jomall.org/v2/ (look between at the footer)
you have a typo on the second div
<div class="tab-page" id="contacts">
should be
<div class="tab-pane" id="contacts">
Related
Since I can't really figure out where the problem is the cite is here
I'm sure most people know ctrl-u will allow you to see the coding.
The scroll bar should move the content in the box.
Any suggestions are helpful but please don't be rude
The scrollbar is transparent but it should wok like the one on this page
Based on what I'm currently seeing - your problem is that you have two separate <div id="entries"> divs. The second one (line 1060 of your compiled source, as I'm seeing it in Firefox) is blank - it contains an empty <div id="post"> and nothing else.
id properties have to be unique - because this one is repeated, the style attributes aren't being applied to it correctly. Simply delete the second <div id="entries">, and your scrollbar will work.
I have two Tab Sections on my site that are being added after page load. I am "reflowing" them through backbone.js like this:
this.$el.foundation('section', 'reflow');
One of them shows up as expected. The HTML generated is:
<div class="section-container auto" data-section="" data-section-resized="true" style="min-height: 48px;">
The other one gets different data-sections applied to it, and does not display properly.
<div class="section-container auto" data-section="" data-section-small-style="true">
Here is a screenshot of the incorrect behaviour: http://imgur.com/9ozNvNC
All of the tabs have width: 100% applied to them and overlap (hence why you can only see the 'Help' tab there) and the top of the 'Preview' image is covered by the tabs.
The strange thing is, the HTML is exactly the same, in a Reveal Modal in both cases. The same JS is being applied to each. Does anyone know why one of my sections would get data-section-resized while the other gets data-section-small-size?
Edit: Two things.
I forgot to mention, this is Zurb Foundation 4.3.2
If I resize the window, it automatically shows up correctly... So I guess if I can run the 'window resize' Zurb code, that would solve my issue.
I was able to solve my problem. After pouring through the issues in Zurb's Github, I found a semi-related issue that was fixed in a recent pull request.
On a whim I merged it into my code, and it fixed the issue.
See here: https://github.com/seantimm/foundation/commit/7af78ddbcc5a516eafed588e7c17d90bee115567
I'm currently working with Spry Tabbed Panels in a Site. I've nested a set of panels inside of another set of panels. My problem is that 2 out of 4 tabs in the first panel don't work. And two out of four tabs in the nested set of panels don't work.
Here is a link to the site for an example:
http://emilymagnuson.com/trustbank/index.html
Your HTML structure looks broken. You need to fix that if you want spry to work properly. For example on line 336 of the source code there is an extra </div> closing tag. I would review your code and make sure that all your HTML elements are placed properly.
I have almost finished my portfolio page , but on one of my pages I have a error when displaying on firefox , on the http://www.jn-design.co.uk/about.html page the skills section on the right has moved a paragraph of my text (The cv lines). This is not a issue within any other browsers , just firefox!
Any help would be greatly appreciated!
It actually looks fine in Firefox but is broken on Chrome. Anyway, try adding a "clear: both" style to the last paragraph that contains the cv lines.
I have markup like this on somepage.html:
<div class='someclass' id='hashtag1'>
<h1>somecontent</h1>
</div>
<div class='someclass' id='hashtag2'>
<h1>somecontent</h1>
</div>
<div class='someclass' id='hashtag3'>
<h1>somecontent</h1>
</div>
And links like this on another page (let's call it someotherpage.html):
<a href='somepage.html#hashtag1'>first content div</a>
<a href='somepage.html#hashtag2'>second content div</a>
<a href='somepage.html#hashtag3'>third content div</a>
However when I click on one of these links I don't see the expected behaviour - the page loads as normal but the scrollTop of the window doesn't match these divs. I've tried changing the IDs as they had hyphens in the to start with, this didn't make any difference - I've also tried changing what element the ID is on, i.e changed the <h1> to have the ID, then changed the <h1> to an anchor, but no luck.
When I'm already on the page, if I edit the hasthag and hit enter, it works as expected - changing the scrolltop of the window to the element with the ID of the hashtag without refreshing the page - but it doesn't work on the first hit.
Am I missing something obvious here?
EDIT:
Using FF 9.0.1 on Mac OSX
Turned JS off using web developer toolbar
changing or removing CSS doesn't seem to make any difference
UPDATE:
This works fine if I enable javascript - which is exactly when it doesn't need to work.
I have this as a catch for users with no javascript / disabled js. WTF, firefox?
Given your specific example, it seems to me that the scrollTop only changes when the page is already long enough to require scrolling.
When all the content is in view, the scrollTop position remains at the top of the document however when the page requires some scrolling, the scrollTop scrolls as far as the document can already scroll.
If scrolling to the required ID does not exceed the total possible scroll position, then the element in question will apear at the top of the page, otherwise the document will only scroll to it's maximum (based on its content).
Hashtags don't work with ids. You have to put a tags like this: <a name="foo"></a>. Then you can link to them using go to foo. Same goes for linking between multiple pages.