I've trying to create something a bit like the navigation on google play, with a fixed number og tabs (the swyping in app-browsing).
I've created a div that contains some content divs.
<div id="container">
<div class="section"> ... </div>
<div class="section"> ... </div>
<div class="section"> ... </div>
</div>
To create the sliding between sections I set the container to a width of 300 %
I then set the left property of the container according to the button pressed.
My question is: How to disable horizontal scrolling of viewport?
You have two solutions:
Wrap #container inside another <div> which has 100% width, disabled wrap and overflow: hidden, then scroll #container inside it, or
Put overflow: hidden on the viewport (or try with overflow-x:hidden);
Related
I am creating multiple dynamic divs of fixed height inside a main div. I can't change the fixed height to % height because it has to have a fixed height even if its empty because user drags elements onto these divs afterwards. Now i am using the Full Screen API to enlarge the main div to full screen. and i want the inside divs to grow their height as the screen enlarges.
On Small Screen it looks like this
On Full Screen it looks like this
on full screen the inside divs adjusted their widths accordingly because they have taken widths % vise but the height of divs doesn't increase because its fixed pixels. The red area in the second image shows the empty space when in full screen mode. how could this area be taken by the divs
The actual code of this is too much complex and lengthy so i am writing here a sample code to understand the problem
<div id="main">
<div Class="Row">
<div Class="Col-md-6">
<div id="A" style="height:100px;width:50%">
</div>
</div>
<div Class="Col-md-6">
<div id="B" style="height:100px;width:50%">
</div>
</div>
</div>
<div Class="Row">
<div Class="Col-md-6">
<div id="C" style="height:100px;width:50%">
</div>
</div>
<div Class="Col-md-6">
<div id="D" style="height:100px;width:50%">
</div>
</div>
</div>
Like i said that divs A,B,C and D are created dynamically. Now i apply a full screen function on main div
var element = document.getElementById("main");
element.webkitRequestFullscreen();
The main div gets to Full screen but the divs A,B,C and D do not adjust their height accordingly.
write a media query like this->
#media screen and(min-width:fullscreenswidth) {
.yourdiv {
height:100vh;
}
}
The fullScreenWidth is the size of the screen in pixels
I'm using React, and I centered an element horizontally and vertically using display: table and display: table-cell, with appropriate centering css.
Inside of it I have some content, when I add content to that element with javascript, the whole element recenters properly, but elements jump from their initial place to their next place.
I'd like to animate it in place, is that possible?
Going from this:
<div table>
<div table-cell>
<div>First Content</div>
</div>
</div>
to this:
<div table>
<div table-cell>
<div>First Content</div>
<div>Second Content</div>
</div>
</div>
(didn't include css to make it easy to read)
I'd do this by adding the new elements with a special class like:
<div table>
<div table-cell>
<div>First Content</div>
<div class="slide-in">Second Content</div>
</div>
</div>
Make the special class have max-height: 0. After it has been inserted into the DOM replace the maximum height with some large enough pixel value to fit the contents on screen. Make sure you have a transition on max-height.
.slide-in {
max-height: 0;
overflow: hidden;
transition: max-height 0.5s;
}
This is my HTML structure:
<body>
<header class="header"></header>
<div class="col-sm-4 sidebar" id="sidebar">
<div class="accordion-1"></div>
<div class="accordion-2">i want vertical scroll for this div without defining height</div>
</div>
<div class="col-sm-8 container no-padding"></div>
</body>
Image 1
Image 2
I have a tow accordian inside the sidebar. So I need a scroll bar in the last red backrounded div if the contents overflows.
Add this to the last red backrounded div it's CSS:
overflow-y: scroll;
Or if you want the scroll bar to appear only if the content overflows:
overflow-y: auto;
I have two containers, as displayed in this FIDDLE.
Both have content that can become quite lengthy, thus I need to use overflow: auto on both containers.
The HTML structure:
<div id="maincontainer">
<div id="left-container" class="go-left overflow-y-auto">
<div id="left-inner-container">Contents</div>
</div>
<div id="right-container" class="go-right overflow-y-auto">
<div id="right-inner-container">
<div id="button-wrapper">
<button type="button" id="tip_button" class="btn primary customized-button">tip</button>
</div>
</div>
</div>
</div>
I have a button within the #right-container that creates a tooltip on click, displayed right next to it. The problem is that, when I have lengthy content (that determines scroll bar to appear), the tooltip won't be placed near the button (on scroll). It will remain relative to the #maincontainer. If I make it relative to the #right-container the tooltip will be 'chopped' (due to overflow).
What I'm seeking is to have the tooltip aligned next to the button when the user scrolls down that area.
If you are using Bootstrap tooltip then add class 'bootstrap-demo' to parent div of button & make sure you are NOT passing container:'body' parameter when initializing tooltip.
I am using the tabs feature of the twitter bootstrap v2.2.2 API within divs being displayed using twitter modal (again, v2.2.2 of the bootstrap). The problem is, when I do this the modal dialog changes shape and size as the tabs change.
I have been looking at trying to set the size of the div that wraps the tab panes by interrogating those tab panes and setting the outer div to the maximum size and width encountered from the panes. Problem is, whatever I do I always seem to be unable to determine the size of those panes (I assume because they have yet to be displayed?).
My layout (roughly)...
<div id="ClientEditPanel" class="modal hide" role="dialog">
<div class="modal-header">
<h3>Client details</h3>
</div>
<div class="modal-body form-horizontal">
<ul class="nav nav-tabs">
<li><a class="active" data-toggle="tab" href="#ClientEditPanel_Tab_Personal">Personal</a></li>
<li>Profile</li>
<li>Other</li>
</ul>
<div id="ClientEditPanel_Tabs" class="tab-content">
<div id="ClientEditPanel_Tab_Personal" class="tab-pane active">
...
</div>
<div id="ClientEditPanel_Tab_Profile" class="tab-pane">
...
</div>
<div id="ClientEditPanel_Tab_Other" class="tab-pane">
...
</div>
</div>
</div>
<div class="modal-footer form-actions">
<input type="submit" class="btn btn-primary" />
</div>
</div>
this is further supported by the following CSS...
.tab-content {
overflow: auto;
}
.tab-content > .tab-pane, {
display: none;
}
.tab-content > .active, {
display: block;
}
I am trying to get the panes as follows...
$.each($(".tab-pane"), function () {
...
});
In theory it should then be as simple as setting the width of the parent div to the width of the widest child and the height of the parent div to the height of the tallest child. I want to measure ClientEditPanel_Tab_Personal, ClientEditPanel_Tab_Profile and ClientEditPanel_Tab_Other and set the maximums on ClientEditPanel_Tabs.
Through debugging, I can confirm that my selector is bringing back the right elements "this" clearly represents my first tab on the first pass through the iterator. Having ascertained that though, whichever property of the div that I interrogate is always null or zero. I have tried the following properties of "this"...
clientHeight
clientWidth
scrollHeight
scrollWidth
innerHeight
innerWidth
outerHeight
outerWidth
style.height
style.pixelHeight
offsetHeight
and probably a few more that I have not listed.
Does anybody have any further ideas that I might achieve what I am looking for. I am sure it can be done as I know that JQuery.dialog can automatically size the dialog to the content (including when combined with JQuery.tabs), but I am too far down the road with the twitter bootstrap to change now.
Thanks.
The height and width properties of an element aren't set until the element is rendered in HTML. You can push the container to be off the page, render the content, do some adjustments and then move the content back to the screen. From my personal experience, I would just render the output and then on document ready (jQuery) I would make the adjustment to the page. This should happen very fast and I haven't noticed any adverse affects as long as the number of elements is fairly small.
You can't read dimensions unless it is in DOM. As #Kalpers suggested, render it outside viewport (e.g. append to <body> and have position:absolute; top: -9999px or append anywhere else but add visibility:hidden, then get element dimensions.