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
Related
switching a content pipeline away from wordpress.
everything is going well but there is a tiny difference that has to be simple but throwing everyone for a loop.
on this production page, when you scroll the main page... you only see the 'main' content when it's visible:
https://pracplay.com/partners
(same as: https://pracplay.com/index.php/partners/ )
on the staging page, [if the window is resized, or you're on mobile] you can usually see the non-visible content from 'main' in the footer (see attached pic, or live at: https://stage.pracplay.com/partners )
what we've tried:
running diffs of production html (very little js used)
fixed everything obviously off
it appears to be something related to z-index of the footer div, or the transparency of the footer div.
also tried:
force zindex of footer absurdly high it has no effect
changing the opacity or playing with background color alpha channel of footer doesn't reproduce it.
Our issue should be even simpler than this since we're just reproducing an existing site, with all same css. So it should be a class name issue on a div or something even simpler... but the diff isn't pointing out anything so modifying raw html to identify the problem is where we're at in this post.
this has to be so simple to fix i figured i'd try to post my understanding here and see if it generated any suggestions or ideas.
attaching a screenshot for experts who don't want to look at site but know problem from observation/experience.
(we primarily develop non-web applications but it's been exciting to get away from wordpress and have web use same processes that our other apps use.)
any help appreciated!
Ok asked someone with fresh eyes take a look.
It was pretty simple and had nothing to do with fixed/relative, z-order nor transparency (at least not directly).
They ran staging-v-prod diffs again on the actual page mentioned here.
It was pretty clearly missing one div wrapper, with class id of 'page-content'
This page-content class was applying an explicit white background to the main/central content of pages. So when it was missing, these divs were transparent and were bleeding into the footers.
So while it appeared like a footer issue, it was actually a page content issue.
Now staging matches production in this respect.
A particularly helpful tool was textcompare's html comparator view:
https://www.textcompare.org/html/
Which was a little easier to spot the html differences than a regular diff.
Your Layout Structure is a bit weird but you can fix it by putting the footer container inside #page or inside of #main. The page is overlapping the footer because of the fixed positioning. I recommend using a common clean layout structure and avoid unnecessary usage of containers.
You could simply do something like this:
<body>
<div class="page-wrapper">
<header>
<nav>
<ul>
<li>Home</li>
</ul>
</nav>
</header>
<main>
<section>
<div class="grid">
....
</div>
</section>
</main>
<footer>
....
</footer>
</div>
</body>
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'm working on a web project. In the last two weeks I was having my semester examinations so I'd to take a break from it. Now, since they are over, I've resumed my work; but I find that some of my web elements (like button,span) have shifted by some pixels on Chrome (not on IE and Mozilla). What could be the reason behind this? How do I overcome this problem?
ORIGINAL CODE: http://jsfiddle.net/p22L15vs/15/embedded/result/
The left margin (for button) for chrome was originally:
-webkit-margin-start:620px;
Now the same code causes the button to enter a new line.
Another example of span:
ORIGINAL CODE: http://jsfiddle.net/vbpasx1j/
The text shown in the fiddle was placed in a span tag. Two weeks ago it required only two lines. Now it requires three lines.
Hello and welcome to the community!
First off, in your provided link the -webkit-margin-start: of the button is set to 620px, not 166.
That, combined with the width of your menu div <div id="div_element"> as well as the padding around your elements exceeds your original #wrapper width of 1006px, making the button element jump to the next row.
Here's a demo to a top-of-my-mind solution: http://jsfiddle.net/kqxmbcdt/
Reduce the -webkit-margin-start: to 619px and you're good to go.
Always be on the lookout for unaccounted margins and paddings when positioning elements, as you can see, sometimes 1px is all it takes to break a layout.
This is to due the headline change in Chrome 37 ,the introduction of DirectWrite support for Windows.
Check this link for further details:
http://www.omgchrome.com/google-chrome-37-arrives-improved-font-rendering-windows/
This feature has caused a similar issue for various developers.
In order to restore to your previous font, the solution is to disable this new feature in your browser. You need to follow the following steps:
1> Enter chrome://flags/ in your address bar.
2> In the Disable DirectWrite Windows section click on Enable (actually disables it).
3> Click on Relaunch Now at the bottom.
4> Restart your browser.
Your original page design remains unchanged. :)
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">
So here's the website that has the container that I want to emulate: container
Here's the textbox specifically:
Here's what mine looks like:
They gave their css file and I looked at their html source code. I got the part in the html and css that pertains to the demo text and style. Here's all the code in fiddle
I'm pretty new to web programming, just a couple weeks in. And the css for the demo text looks daunting. I'm trying figure out how mine is different. Can anyone tell me what I need to do to fix my container to look like theirs? Thanks
Here's a fixed version: http://jsfiddle.net/dain/XJqvG/6/
The main problems were:
you haven't included the required JavaScript and CSS files, this
custom scrollbar requires the libraries as explained at the top of the article
you have to set a fixed height on the sample element
For some reason it still doesn't want to scroll with the touchpad, but that might just be something with JSFiddle.