I'm working on a page with four (4) separate DIV elements that all are scrolled independently of each other. Using the answer here: `-webkit-overflow-scrolling: touch` broken for initially offscreen elements in iOS7 I was able to get most of the pages working. There are still a few pages where the DIV holding the main content cannot be scrolled vertically when a side DIV is expanded.
The page structure looks like this:
...
<div id="paneTop">...</div>
<div id="paneLeft" class="expanded">...</div>
<div id="paneCenter">
<div>
<div style="overflow: hidden;">
<div id="mainContent" style="overflow: auto;">...</div>
</div>
</div>
</div>
<div id="paneRight" class="expanded">...</div>
...
Setting the touchstart event listener on #paneCenter worked for most of the pages but those didn't have the extra layer of divs. I have tried setting the touchstart event listener on #mainContent and all the way up the chain but #mainContent will not scroll when #paneLeft is expanded even though it works when #paneLeft is collapsed and it works whether paneRight is expanded or not.
Note: this issue has only been identified on an iPad running iOS7.
This is the correct behavior. If you want it to scroll vertically but hide it horizontally, then target it specifically: overflow-x: hidden (to hide horizontal excess), and don't set anything to overflow-y. This allows for some good control over elements.
Related
I have the following for a polymer web application. The whole page scrolls. I would like for the contents of and to scroll independently. foo has a longer view and bar is generally able to fit in the page with maybe a little vertical scrolling.
How do I make the two contents of vaadin-split-layout scroll independently vertically?
<app-drawer-layout fullbleed force-narrow>
<app-drawer slot="drawer">
<app-toolbar>
<div main-title>Models</div>
</app-toolbar>
<section>
<div style="margin-bottom:90px;width:100%;"></div>
</section>
</app-drawer>
<app-header-layout>
<app-header slot="header" fixed effects="waterfall">
<app-toolbar>
<paper-icon-button icon="menu" drawer-toggle></paper-icon-button>
<iron-icon id="logo" src="icon.svg"></iron-icon>
<div main-title>Spliter Sample</div>
</app-toolbar>
</app-header>
<section>
<vaadin-split-layout orientation="horizontal">
<foo></foo>
<bar></bar>
</vaadin-split-layout>
</section>
</app-header-layout>
</app-drawer-layout>
Thank you for any advice.
You can style the panels of a vaadin-split-layout as any other div as the panels are in the light DOM as you can see when inspecting their examples.
Thus give them an explicit height and an overflow:auto or overflow-y:auto; to enable scrolling. The style rules be placed in your usual CSS.
I'm using -webkit-overflow-scrolling:touch for native scrolling capabilities on my iPad. But I've come into quite an odd problem:
I have one div with various children. If these children are big enough to create the need for scrolling, the device properly scrolls correctly, with momentum and all. However, if this div is not big enough to require scrolling, and suddenly has elements inserted into it and now does require scrolling, you will not be able to scroll the element at all.
I hope that wasn't too incredibly confusing, but if someone could shed some light on what to do in this situation, that would be fantastic. There isn't much documentation about this property out there.
EDIT: Tried testing this a lot, and it seems now it's just a generally intermittent problem. Every 1 out of 5 times or so, scrolling just fails for my entire web app, no matter the contents.
I had the same issue and it seems like assigning the CSS class after the new DOM element is added seems to work fine:
// your code to add a div to the DOM
// the div contains a scrollable div with the content class
setTimeout(function(){
// this is using JQuery
div.find(".content").addClass("overflowScroll");
}, 1);
// CSS class
.overflowScroll {
overflow: hidden;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
// The HTML for the div
// I am adding a dynamic list to the content div
// which should use the overflow scroll
<div class="panel">
<div class="header">
</div>
<div class="content"></div>
</div>
I've got a jquery accordion on site BUT it kinda doesn't work >> when browser loads page accordion looks good (with one first section opened) BUT when I press on some other section, first section closes and none of sections ar opening up, so it kinda stucks with all sections closed! When I reload the page this loop starts from the beginning. Here is the link to the site, click on "Pakalpojumi" to see that accordion.
Here is the html of accordion:
<div id="accord">
<h3><a id="gr" href="#">Griezšana</a></h3>
<div>
<p>
max griešanas garums: 2500mm </br>max loksnes biezums: 4mm
</p>
</div>
<h3><a id="ur" href="#">Urbšana</a></h3>
<div>
<p>
Mēs piedāvājam 3 dažādu veidu stacionārie urbji
</p>
</div>
<h3><a id="lo" href="#">Locīšna</a></h3>
<div>
<p>
max loksens garums: 2000mm, </br>max spiešanas spēks: 65 t
</p>
</div></div>
Adding accordion to accord:
$('#accord').accordion();
Does anyone have any idea of what could be wrong?
The code works fine by itself, see here. On closer inspection of your site, there is a style which is placed on the active div each time the header is clicked (I'm using chrome, it appears as element.style in its css properties) which sets the height, padding-top and padding-bottom to 0px. If I disable those styles, the selected div appears fine. Do you happen to be adding these styles on every click?
Edit
Ok, I found your problem... Does the second tab here look familiar? According to this post it's because when you initialise your accordion, its parent element is hidden (via your 'off' class). So you can get around this issue by defining a height for your divs after initialising your accordian like so:
$('#accordion').accordion();
$('#accordion >div').css('height', '300');
... or by by initialising your accordion once its parent is shown.
I use JQuery layout feature to build skeleton of my app.
Layout has north-panel i.e header which can be hidden so that content area has more space.
Since header panel also contains icon bar, I only want icon bar to be visible when header is hidden.
Is there a way to achieve this by setting any property while creating layout using UI Layout.
Here is the image of layout where on hiding header should still show icons but only hide blue bar at the top.
Regards,
Satya
If I understand you correctly, the markup you have would like something like this:
<div id="north-panel">
<div id="header">
<div id="icons"></div>
</div>
</div>
If this is the case, maybe the following may help:
Can you seperate the icons panel to be a direct child of the north-panel? If you can, you could just hide the header and the icons panel would still be visible.
<div id="north-panel">
<div id="header"></div>
<div id="icons"></div>
</div>
Otherwise, hiding an element without hiding its children is not possible (as far as I know). What you could try too, is to make the header have the same dimensions as the icons panel and hide anything else inside the header. This would somehow fake the effect you wanted.
I'm using jQuery UI's tabs to divide content on my page. I have a 'link bar' I would like to have hang at the bottom of each tab. (The tab text will change but generally they will navigate the user left or right through tabs.)
Hosting the #linkBar div inside the first tab makes it 'look' right, inside Themeroller's border. Putting it just outside the 'parent tab' div places the links below the theme's border. I've tried creating a spacer div but it just pushes #linkBar down further.
Of course when the user switches to another tab, the link bar goes away. How is ownership of elements organized between tabs? Should I dynamically destroy the #linkBar div on the tab being navigated away from and rebuild it in the tab being navigated to? Or is there a better way to move it between them, or just manage visibility?
I would like to have the link bar follow the content on each tab as a footer, 'floating' one or two lines below the last content of each tab (rather than having it in a fixed position relative to the tab bar).
Ok ... It was simply adding the jQuery UI classes to the linkBar. Check out my working jsFiddle demo:
I moved the linkBar div out of the tabOne div and put it at the bottom of the tabs div:
<div id="container">
<div id="title">
<h1>title bar</h1>
</div>
<div id="tabs">
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
<div id="tabone">
content goes here
<br><br><br><br>more stuff<br><br><br>more stuff<br><br>
</div>
<div id="tabtwo">
content goes here...
</div>
<div id="tabthree">
content goes here...
</div>
<div id="linkBar">
<span id="leftLink"><< left link</span>
<span id="rightLink">right link >></span>
</div>
</div>
</div>
I slightly altered the linkBar style by giving it a top and bottom margin as well as hiding it by default:
#linkBar {
display: none;
margin: 10px auto;
}
Then I simply added the jQuery UI classes to the $linkBar. I slightly altered the jQuery to be more readable:
$("#accordion").accordion({ header: "h3" });
var $tabs = $("#tabs"),
$linkBar = $("#linkBar");
$linkBar.addClass("ui-tabs-panel ui-widget-content ui-corner-bottom");
$linkBar.show();
$tabs.tabs();
$('#title').click(function() {
$tabs.tabs('select', 0);
return false;
});
Note: You could just add class="ui-tabs-panel ui-widget-content ui-corner-bottom" to the linkBar div and be done with it. But, I think I like it better managed in the JS.