Have seen that this piece of code could solve my problems but I don't know how or where to apply it to make it work correctly
JScrollPane.setVerticalScrollBarPolicy(VERTICAL_SCROLLBAR_NEVER);
If your aim is to hide the vertical scroll bar then use the following CSS property...
overflow-y: hidden;
In your CSS (RRD.css), you have...
.scroll-pane
{
width: 100%;
height: 670px;
overflow: hidden;
}
Try changing it to...
.scroll-pane
{
width: 100%;
height: 670px;
overflow-y: hidden;
}
More changes
And in your includes/jquery.jscrollpane.css change...
.jspPane
{
position: absolute;
width: 9660px;
}
to...
.jspPane
{
position: absolute;
width: 5880px;
}
This will remove the extended scrolling that is happening. And make sure your content-holder width is 5880px to match the jspPane scrolling ...
<div id="content-holder" style="width:5880px;">
The vertical scrollbar will not appear as long the content-holder div width is not less than the width of the content inside it. Think all your images in the content-holder div adds up to 5680px + you need to add the padding you apply as well.
Related
QUESTION:
Using the Gamepad API, i am having a problem when re-sizing the window; namely, a finite padding-bottom appears between the bottom of the #gameBoard and the bottom edge of the Browser window -- which I do not want:
Please note that I have tried a Sticky Footer which depends on position: absolute; which I would prefer to avoid.
EG,
with a padding-bottom > 0
I am looking for this with each window re-size:
padding-bottom = 0
HTML:
<div id="gameEnclosure">
<div id="header">
stuff here
</div>
<div id="gameBoard">
<canvas id="game">
game piece img's here
</canvas>
</div>
</div> <!-- gameEnclosure -->
CSS
/* COMMON RESET */
html, body {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
}
body {
background-color: blue;
}
#gameBoard {
display: block;
position: relative;
width: 100%;
height: auto;
background-color: #fff;
background-image: url("../images/room.gif");
background-size: cover;
}
As already stated, I have tried using a Sticky Footer and I just do not like using position: absolute. Also, the individual game piece images do not maintain their proper aspect ratio with window re-sizing = another no-no.
JS
function doBodyOnResize() {
let gameHeight = $('#gameBoard').outerHeight();
$('body').css('padding-bottom', gameHeight);
$('#gameBoard').css('height', gameHeight);
}
This is the onresize function I used to have with the Sticky Footer.
Without a Sticky Footer, game pieces zoom in and zoom out just great -- if I could just get keep padding-bottom = 0 upon window resizing.
How could create a div sticky in the dojotoolkit?
Some scroll function?
http://dojotoolkit.org/reference-guide/1.8/dojo/dom-geometry/position.html#dojo-dom-geometry-position
You could indeed create an event handler to the scroll event and continuously reposition the div, or you simply use CSS and add position: fixed to the div.
For example:
body {
min-height: 9000px;
}
.box {
position: fixed;
width: 100px;
height: 100px;
left: calc(50% - 50px);
top: calc(50% - 50px);
background: yellow;
}
<div class="box">Even when you scroll this box stays centered</div>
I'm trying to make the following div flexible
div {
min-width: 500px;
max-width: 1000px;
width:100%;
height: 400px;
margin-left:100px
}
If I remove the margin left everything works fine, but with the margin, when I start resizing the browser window, the box goes behind the browser window and only then starts being resized. How do I solve this issue? I tried a wrapper, tried resetting box-sizing, tried with different positionings but nothing seems to work, what am I missing?
Try adding width: calc(100vw-100px); or calc(100% - 100px). This sets the width of the div to Veiwport width - Margin
Also remove max-width: 1000px; and min-width: 500px;
div {
width: calc(100%-100px);
height: 400px;
margin-left:100px
}
div {
width: calc(100%-100px); /*or `width: calc(100vw-100px);`*/
height: 400px;
margin-left:100px;
background-color:pink;
}
<div></div>
I am currently building a standard html web page. I have a logo in the top right corner. When I resize my browser the logo disappears. It works like it should in all other browsers.
It seems to disappear when my browser is small enough to convey mobile versions and navigation stops being inline and is displayed block
i dont think its an html problem, as it works in other browsers so here is my css for the image.
img#logo {
margin-bottom: 10px;
color: #111111;
max-width: 100%;
width: auto;
height: auto;
}
Try adding a min-width. Change 300 to whatever works best. You can also use a min-width %. Like, 20%.
img#logo {
min-width: 300px;
}
edit:
Ok, now I see the real problem, its this
img#logo {
margin-bottom: 10px;
color: #111111;
max-width: 100%;
width: auto; // width auto...
height: auto; // height auto..
}
please change those to an actual value so you don't rely on varying browser defaults.
img#logo {
margin-bottom: 10px;
color: #111111;
max-width: 100%; // and you can remove this line
width: 100%;
height: 100%;
}
If that still does not work for you. Try removing the height line all together.
I have created a custom drop-down element, which is listed on this page:
http://jsfiddle.net/spryno724/2snUH/3/
Click on the drop-down menu in the "Result" secion, and you will see the problem. By rolling over the choices in the expanded drop-down list, you notice the roll-over indicators don't stretch to the available width.
While still maintaining the width of the menu when it was collapsed, how can I stretch the background color of each menu item? I'd also like each of the menu items to remain on their own line. A couple of adjustments that I made the CSS caused some of the list items to wrap their own text.
Thank you for your time.
Use negative margins with width: auto instead of width: 100% for items:
UL.dropdown.open LI {
margin: 0 -23px 0 -10px;
padding-right: 23px;
padding-left: 10px;
position: relative;
width: auto;
}
See http://jsfiddle.net/2snUH/4/ .
Or get rid of horizontal padding for UL (and specify horizontal padding for LI instead), and then you will not need negative margins for LI items.
To fix the width of the li elements use:
ul.dropdown.open {
padding: 5px 0;
}
ul.dropdown.open li {
display: block;
padding: 5px;
text-wrap: none;
width: 100%;
box-sizing: border-box;
}