Comments (7)
Consider adding the class c-select
to the selects: http://v4-alpha.getbootstrap.com/components/forms/#custom-forms
This does not solve the closing issue, but it will aid styling!
from oakterm.
Test: adding a select to the terminal area does not have this issue.
<select class="c-select form-control"><option>test</option><option>test</option><option>test</option><option>test</option><option>test</option></select>
Replicating the Device Select dropdown in the Terminal area doesn't have this problem either.
from oakterm.
Tracked down this issue to these lines in app.js:
$('#sidebar').hover(function(){
$('body').css('overflow', 'hidden');
}, function(){
$('body').css('overflow', 'auto')
});
Commenting them out fixes the issue.
Looks like this code was intended to modify scrolling when when in the sidebar, but I don't see any difference in behavior with or without it. @emcniece do you remember what the intended function was? Are there any implications to deleting it?
Investigating this revealed another issue (#72: Sidebar doesn't scroll when it occupies the full width) which might be related to the non-functioning of this code.
from oakterm.
The #sidebar
hover code was implemented to prevent child-element scrolling when hovering over the sidebar.
Without this code, expand all sidebar sections and reduce window height to the point where you can scroll both terminal and sidebar areas. You can safely scroll in the terminal area without affecting the sidebar scroll position, but scrolling in the sidebar past the top or bottom of its content will affect the terminal area.
This code was added to prevent unexpected behavior like this, but it may well be pointless. Let's remove it if necessary!
from oakterm.
If I'm following you correctly, I'm not sure this code was working as
intended. Both with and without this on hover function, I found that
scrolling past the limits of the sidebar would scroll the terminal content.
I see that the overflow: scroll is set on the html not body tag, but on
hover is changing the class on body. Not sure if this is the issue.
Also, would moving the scrollbar from html to #content solve the scrolling
past limits problem since the scrolling divs would be siblings not child
and ancestor?
On May 11, 2016 1:24 AM, "Eric McNiece" [email protected] wrote:
The #sidebar hover code was implemented to prevent child-element scrolling
when hovering over the sidebar.
Without this code, expand all sidebar sections and reduce window height to
the point where you can scroll both terminal and sidebar areas. You can
safely scroll in the terminal area without affecting the sidebar scroll
position, but scrolling in the sidebar past the top or bottom of its
content will affect the terminal area.
This code was added to prevent unexpected behavior like this, but it may
well be pointless. Let's remove it if necessary!
—
You are receiving this because you commented.
Reply to this email directly or view it on GitHub
#66 (comment)
from oakterm.
I also see identical behavior when this code is present and not - unsure if something has changed since implementation that causes this to be different, but I vaguely recall that in the "broken" state the sidebar scrolled the content area before it scrolled the terminal area. This is no longer the case.
The trick with scrolling the terminal separate from the sidebar is that all elements other than the terminal area are absolutely positioned. When a scroll event happens, the entire page (including terminal) scrolls while header, footer, and sidebar stay fixed.
Moving the scroll action to the #content
div may disrupt natural page scroll. This is probably unnecessary for now, and it's much easier to remove this scroll-prevention code as 1) it doesn't do anything anymore, and 2) the resulting behavior is fine.
from oakterm.
This is probably unnecessary for now, and it's much easier to remove this scroll-prevention code
Okay, that's done in #73.
from oakterm.
Related Issues (20)
- Add note on login page explaining that no login information is saved on our servers HOT 4
- Responsive data "Send" button doesn't submit HOT 1
- Move OakTerm logo and top row of buttons into sidebar (at least on mobile)
- Variable values are still requested after they are unexposed HOT 2
- Implement proper error handling and display HOT 10
- Login error: err.errorDescription is undefined
- FF collapsible sections bump content during animation
- Errors from the EventStream object returned by particle.getEventStream are not handled (e.g. if the stream dies, we don't detect it)
- Sidebar doesn't scroll when it occupies the full width of the screen (desktop only) HOT 2
- Add button/link to Oak wiki and/or forums HOT 1
- Add button/link to the Particle IDE when that's up and running
- Add validation for sent event names
- Unhandled error when there are no devices associated with the Particle account HOT 1
- Error when sending an event HOT 3
- Timestamps can be inconsistent between sent and received data
- Change background colour of variable tags (or text colour) HOT 2
- Filter for illegal Particle.variable("Names!!! ", value) ?? HOT 1
- "Cannot read property 'name' of undefined" HOT 3
- Feature request: ifttt-trigger-event-check filter HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from oakterm.