Semantic-UI Sidebar transition issue - javascript

Am a newbie in webdev. Am trying to use semantic-ui to build a simple web portal.
I have an issue in using the sidebar component. I want the sidebar behaviour to be like this page https://adminlte.io/themes/AdminLTE/index2.html where the body content shrinks / expands when the sidebar is shown/collapsed.
But whatever settings / transition method i choose on the sidebar (push/scale) in semantic-ui , some part of the body moves out of the screen. I just want the content to shrink and expand without exceeding the viewport width.
Here is the jsfiddle of my code showing the issue :
https://jsfiddle.net/vinu_tlg/L5eqt3f4/
Can anyone let me know how i can achieve this behaviour in semantic-ui.
There is a somewhat similar question asked earlier but i don’t see any answer on how to achieve it.
Appreciate any pointers. Thanks in advance.

Add this style
.sidebar.visible + .pusher {
width: calc(100% - 260px);
}
body.pushable {
background-color: white !important;
}
Updated
fiddle

Related

Set a <div> to be a specific amount taller than a dynamic sized <div>

Using Angular & Bootstrap.
My ui-grid-viewport div is overflowing my ui-grid div.
I would like to have my ui-grid resize vertically to fit myui-grid-canvas as well as the horizontal scroll bar on
I believe this can be accomplished best with Javascript. Would my best bet be making a function that sets the height of ui-grid-viewport == ui-grid-canvas + 10px?
Thanks
Vlad & Sam suggested that this is a possible fix in html/css.
Further exploration revealed that ui-grid and ui-grid-viewport were inheriting a height variable.
I was able to dynamically resize the container with the following code:
.ui-grid {
height: auto !important;
}
.ui-grid-viewport {
height: auto !important;
}
Thanks!

I can't scroll to the bottom

You see, for some reasons some times I can't scroll to the bottom of the page (some times it happens in the middle too). Here is a screenshot:
Why does this happen? I can't create a jsfiddle, because I can't reproduce it since sometimes when I reload I have this problem, sometimes it works fine... It happens in a random way. I have no idea what might be causing this. It just stops scrolling before reaching the bottom. I know this might be classified as an open question but I just want to see, if anyone have had this problem. Any suggestions are appreciated..
UPDATED
Ok, here is the code I used to style the scrollbar and the scrolling, in CSS:
body
{
scrollbar-face-color: rgb(0,131,168);
scrollbar-track-color: rgba(0,131,168,0.8);
scrollbar-arrow-color: rgba(0,131,168,0.5);
scrollbar-shadow-color: rgb(0,131,168);
}
::-webkit-scrollbar-track
{
background-color: rgba(0,131,168,0.5);
}
::-webkit-scrollbar
{
width: 5px;
}
::-webkit-scrollbar-thumb
{
background-color: rgb(0,131,168);
}
in the javascript, "vista" is the main container, I wrote:
var vistaProfesional = document.getElementById('vista');
vistaProfesional.style.overflow = "auto";
vistaProfesional.style.overflowX = "hidden";
vistaProfesional.style.height = 100 + '%';
I have been thinking, and I found out that, when I was doing the whole thing, I wanted it to have a smooth scroll, therefore I used the smoothWheel plugin because it is easy to use and since I am new to programming this seems a charm. However, right after the code abode I wrote:
$("#vista").smoothWheel();
to initialize it and though it works, it is when this plugin is active that I have this issue. If I comment that line of code and stay with the normal scroll, the problem described doesn't occur. As for one of the comments, yes, the zoom is already in 100%
I have seen this problem in several websites before. Set your zoom level to 100% to allow you to scroll to the bottom of the page.
Often when the zoom is not equal to 100% there is a partial row that is not shown, so the website thinks that you have not displayed the bottom of the page, so won't fetch the rest, or update the scroll bar properly.
I think you should specify height to body and html because as for as i know Scrolling plugins need that, so
body, html {
height: 100%;
}
If this does'nt solve your issue you may use Nice Scrolling Plugin which has a lot of properties, also it has been documented very well.
Hope this helps you.

Making Bootstrap modal resizable with jQuery UI issue

So I have a Bootstrap modal I've created and I am trying to make it resizable using jquery. I have the resize working horizontally but if you try to resize vertically its like the content inside of the modal is not contained within the element I am trying to resize.
I tried using the 'alsoResize' property on the .resizable() and included all the divs within the modal but that seems to cause other issues.
$('.modal-content').resizable({
alsoResize: ".modal-header, .modal-body, .modal-footer"
});
Here is my example: https://jsfiddle.net/p7o2mkg4/
You actually did everything right! But the default overflow behaviour of HTML elements is visible. So if the parent element's content gets overflowed, they break out of the modal and that doesn't look good! So, you need to set the CSS overflow property to scroll or hidden to fix breaking on small size. Try adding:
.modal-content.ui-resizable {
overflow: scroll;
}
This will ensure scrolling on overflow of the element.
Link to JSFiddle: https://jsfiddle.net/p7o2mkg4/1/
This works (css)
#myModal>div{
overflow-y: hidden;
overflow-x: hidden;
}
In case anyone stumbles across this like I have, make sure you have both jQueryUI.js and jQueryUI.css.
I thought having only jQueryUI.js was enough, but it turns out adding the stylesheet is why it wasn't working for me.

How can I add a scroll bar to a fixed sidebar that only appears on hover

I'm working on a site where I made the sidebar to be fixed on the left and extended to the full height of the page using this CSS:
sidebar {
position: fixed;
top: 0;
bottom: 0;
}
And that works fine to keep the sidebar in place, but the problem is when the page is re-sized to a smaller height, you can only see the stuff at the top of the sidebar and there's no way to see the stuff at the bottom of the sidebar.
Now, I know I can add a scroll bar using overflow-y: scroll; but what I'm trying to do is have a scroll bar that only appears when the content on the sidebar exceeds the height of the window and only appears on hover. I also want the scroll bar to have some style to it, similar to the sidebar on TheNextWeb or the Facebook chat sidebar.
I know I need some JavaScript to do this, but my skills in JavaScript are very limited so I appreciate any help on this.
overflow-y: auto should work:
For styling you should probably search for a good scrollbar-replacement, as scrollbar-styling only works in webkit (http://css-tricks.com/custom-scrollbars-in-webkit/). It's not a trivial thing to do, but fortunately there are some plugins:
http://cubiq.org/iscroll-4
http://jscrollpane.kelvinluck.com/
http://www.yuiazu.net/perfect-scrollbar/
Just to mention a few.
EDIT:
Thanks to sheba, I made some modfications:
.sidebar:hover{
overflow-y: scroll;
}
http://codepen.io/johannesjo/pen/GcLFn

Relative Positioning at bottom of the screen issue with Flex and different browsers

I have a flex component like this:
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
...
width="100%"
height="100%"
creationComplete="init()">
.......
<components:NavigationBar id="nagivationBar"
left="0" bottom="0" />
This is supposed to show at the bottom left of the screen considering that parent container fills the screen.
The behaviour I just described shows perfectly with Safari
with Chrome it shows correctly if the download bar beneath is not visible but as soon as the download bar has something it covers the bottom part of it.
and FireFox seems to always hide like 50 pixels or so from the bottom of the screen.
It seems like every browser renders the 100% height in its own way.
What is your recommended best way to overcome this? I can add a 100 pixel margin at the bottom but it's not something I want to do in this application.
Try something like this in the <head></head> section of the HTML page that loads your Flex Application:
<style type="text/css">
html, body{
width: 100%; /* make the body expand to fill the visible window */
height: 100%;
padding: 0 0 0 0;
margin: 0 0 0 0;
overflow: hidden;
}
</style>
Not sure it will help in your case but it's easy to try.
You could wrap the output in a containing <div>, then using YUI's getClientRegion, and a resize event for good measure, set the containing div's CSS height property to the value which YUI has determined the available viewport vertical space.
Sorry the solution is an outside-of-Flex one, but it'll work.
Edit: I meant 'getViewportHeight()' not 'getClientRegion()', sorry, check out the APi docs though, there's plenty of goodies in there for this sort of stuff.
Flex is just a flash component in a web page. Its size depends of what is outside of flex. I don't think you'll get a proper answer unless you post HTML/JS code surrounding flex app.
PS. From my experience working with browser height may be very troublesome.
this normally happens when you have one or more positioning elements in a page. Check your code to see if you have used the position element anywhere else in your code, if so are they different, i.e one relative and the other absolute, if so this could be your problem, its reccomended that they are all the same, ie all relative

Categories

Resources