I keep having the same issue-- After creating a set of vertical slides in Reveal.js, using the nested
<section>
<section>Content</section>
<section>Content</section>
</section>
the next slide after that vertical list doesn't work right. My code editor doesn't recognize it as HTML and it displays the new slide content ON ALL SLIDES, not in the regular Reveal.js formatting.
What am I doing wrong?
I'm using the following structure:
<section>
<section>
<h3>First slide with vertical</h3>
</section>
<section>
<h4>First vertical slide</h4>
</section>
<section>
<h4>Second vertical slide</h4>
</section>
I was facing a similar issue. In my case my HTML was somethign similar to
<section>
<h1>Some heading</h1>
<section>Content</section>
<section>Content</section>
</section>
The additional html was causing the issue and showing up in every slide. I think for vertical slides the nesting has to be immediate.
<section>
<section>Content</section>
<section>Content</section>
</section>
I had to remove the html content that was added between the section tag and section tagat the second level.
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.
Can I use angular js with three sectioning of the web page for make it responsive by making two sections into dropdown buttons
<body>
<section id="main">
<section id="body">
// data in li
</section>
<aside id="side">
//data with links
</aside>
</section>
</body>
The HTML section tag has no built in behaviour, it just denotes a section of the document, normally with its own heading, where other tags such as article or nav are not appropriate e.g.
<section id="my-section">
<h2>Heading for section</h2>
<p>Some content</p>
</section>
See https://developer.mozilla.org/en/docs/Web/HTML/Element/section
The HTML element represents a standalone section of functionality contained within an HTML document, typically with a heading, which doesn't have a more specific semantic element to represent it.
As an example, a navigation menu should be wrapped in a element, but a list of search results and a map display and its controls don't have specific elements, and could be put inside a .
So for making a responsive layout, using section over div or any other element does not really have any meaning. You must use CSS (e.g. with media queries) or JavaScript to change the layout (FYI, the default for section is display: block).
I am stuck with a very unusual behaviour of bootstrap. I am working with rails in which I have to build an index page containing blogs in tile system. It is working fine for larger screen but when we reduce the size it is creating extra space. Can't figure out why this space is being created. Any help would be appreciated.
the code for grid layout for index
when experimenting with screen sizes and larger data
Based on what I can see on the image, I'd say the content of your upper left div is bigger than the content of your upper right div.
I've had simular issues with images of different sizes.
Try placing you content inside of rows, this will prevent the huge whitespace.
Example :
<div class='container'>
<div class='row'>
<div class='col-xs-6'></div>
<div class='col-xs-6'></div>
</div>
<div class='row'>
<div class='col-xs-6'></div>
<div class='col-xs-6'></div>
</div>
</div>
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.
I am using jquery mobile for my mobile app. I want to make a page where data-role=content should be scroll when it is overflow but it is scrolling whole page with header and footer. I want to scroll only content div and header and footer divs should be fixed. I have already seen iscrollview but its only working in iPhone or any other way.
Please suggest how can I make this design.
Just add a data-position="fixed" to your header and footer. Check this example below:
<div data-role="page">
<div data-role="header" data-position="fixed" data-tap-toggle="false">...</div>
<div data-role="content">...</div>
<div data-role="footer" data-position="fixed" data-tap-toggle="false">...</div>
</div>
Take a look at http://cubiq.org/iscroll-4; it may not be jQuery, but it is a great JavaScript plugin for Mobile Scrolling.
You would add an ID to each UL and attach a scroll to each one separately.