I realize that hard to envision without the code etc.
Basically, with SlidesPerView set explicitly (say to 2 or 3), each slide locks to left edge just fine after swiping, and right edge also lines up. Note that SOME of the slides have 'Scroll-Y : Scroll' via an extra class.
As soon as I change SlidesPerView to 'auto' and try to set one slide in the middle wider, all the 'sliding/locking' gets progressively offset from the left edge, now cutting off more and more of the right-most slide!
I have worked hard and confirmed that REMOVING that scroll class fixes the problem.
Tried setting the scroll via 'swiper-slide' class. Tried '!important'. Tried messing with the width of the other slides. No dice.
Seems that with 'SlidesPerView' at auto, SwiperJS does not account for system scrollbar width?
Related
I'm using Angular UI Grid in a project. The grid sizes itself so that all the columns fit horizontally in a div.
This works great, until there are more rows than fit on one screen. Then, a vertical scroll bar comes up (good), which covers part of the last column (bad). Horizontal scroll bars can be enabled to reach those last 20 or so px, but when you scroll horizontally, the header cells don't scroll. This throws everything out of alignment.
Since the grid was perfectly sized before the scroll bar, there should not be a need for the horizontal scroll bar. But the way the scroll bar covers the content means that without it, you can't see anything that might be in the right 20 or so px.
I need to fix this. Here are some solutions I have looked into implementing, unsuccessfully:
Find some way to know if there is a vertical scroll bar and add padding or margin somewhere to push in the content of both the header cell and the data cell, to keep things in alignment. I haven't found an easy way to grab the container who may or may not have a scroll bar and then I think the logic to ask it if it has a scroll bar would be brittle. Plus, just playing around with adding padding where I think it should go did not effectively push over the content.
Find a way to let the container with the scroll bar push outside of the grid when it has a scroll bar. This has basically the same issue as #1 in that that guy is pretty slippery.
Find a way to replace the scroll bar with my own. It seems that there is someone who did a branch that lets you do this with a specific library, but we are tied to a specific commit of UI Grid and adding libraries takes an act of congress.
Thoughts?
How you can know if there is a vertical scrollbar :
If you haven't customized the rows with a rowTemplate, then you might be having a rowHeight of 30px (if not please inspect).
var dataRowHeight = (numberOfRows * 30) + padding (if you have);
var gridElementHeight = angular.element("#my-ui-grid-div-id")[0].offsetHeight;
if (dataRowHeight > gridElementHeight) {
// you have a verticalscrollbar
}
Safe side : specify width for all columns by % and leave 1% behind for the scrollbar.
Ugly side : Get the width of the 'viewport', loop through and calculate the actual pixels from your provided percentage for all columns, if you detect a vertical scrollbar using the technique above, leave 15px behind.
I've got a viewport fixed in size (blue rectangle in illustration). Within this viewport I've got my content. Whenever the content is greater in size than the surrounding viewport, I want to be able to scroll. This so far works just fine.
The problem I'm experiencing comes into play as soon as I transform my content. Let's say I want to scale and translate it in order to show a certain area in higher detail.
After this transformation I still want to be able to reach every corner of my content with the scrollbars of the viewport (green in illustration). But I can only croll right and down. Everything above and left of my translation can't be reached with the scrollbars.
Is this just how things are, or am I missing something? Is there a good solution to this?
I am making a website currently, and when I created a row of buttons a few of them were slightly shifted from the line.
My website: (unfortunately just a template so I can't really send you the link)
Code:(HTML)
Code:(CSS)
It seems weird to me as the buttons are set 100% of the height of their container, so technically they aren't suppose to get out of it anyway. I tried messing with the width and height of the container, but nothing seems to work. Perhaps I am missing something simple.
If any other parts of the stylesheet needed I can post it.
I'm not sure if everyone got my problem. I'm saying that it's pretty weird that while the button's height is set 100%, a few of the buttons still manage to move slightly down from the majority of buttons.
I believe the issue is your margin.
The GameBtn puts a margin on all sides, whereas the MenuBtn sets a margin to the left only. This will jack things up.
Not sure, however, why you position the container element absolute. But, that may be another discussion. Also, you have a top AND a margin-top property set in the container element. You can remove one of those. If you meant to center the container element, you can just position it relative and set the margin to margin: 65px auto 0;
So basically the website I'm designing has 3 divs inside a container div. One floating to the left. Two to the right one above and one below. They work fine when the browser is maximized. Problem is, when the browser is resized, the right divs wrap below the left div even though I've set min-widths. I want the divs to remain where they are and a scroll bar to appear instead. I did try overflow, no luck. Any solutions?
PS- Initially I had added min-width for the inner divs too. They didn't seem to solve the problem, so I removed them.
A solution or a nudge in the right direction would be really appreciated.
Here's a link to the jsFiddle - http://jsfiddle.net/R62w4/3/
Thank you, Matthew. Although that fixed the wrapping issue, my site now has a thin line of pixels on the right hand side. Any idea how I remove it? It continues from the header till the footer. It isn't affected by any changes to the CSS elements pertaining to the header or navigation bar or footer.
Okay, I found the reason to the extra space on the right side. If I increase my margins for the outer div, the space increases. Is there a way to increase the margins without getting a space?
You might be able to wrap them in this:
<div style="white-space:nowrap;">
</div>
... to prevent that from happening.
It's hard to know exactly where the problem is, could you post some code or make a JSFiddle?
Update:
I believe the problem is that you are using % based widths and px for margins - it's easy to lose track of how much available space you have and subsequently your layout falls apart. Consider that two left floated DIVs of 50% width with 1px of margin each will break on to two lines every time because that's more than 100%.
I changed your fiddle a bit: http://jsfiddle.net/R62w4/5/
... just by moving the left margin from your first DIV and right margin from your other two to the parent container seems to give enough room for everything.
P.S. You can use % based margins and just make sure everything you want to be on one line stays <= 100%.
the simpl css framework shows you how to do percentage based columns with pixel based margins which is what you want.
Check out my site http://hiox.org . How to get rid of horizontal scroll bar?
Well, i did not see the horizontal scroll bar on that site. This is most likely because of resolution. Use this css style however.
scroll-x:hidden;
Buy a wider monitor (I see no horizontal scroll bars)?
Actually Sarfraz's suggestion is good, but something secondary to bear in mind is the wide range of users on your site (some using 1024x768, and still others using 1920x1200) and how to give equal usability to as many as possible.
Is it possible you could reduce the width of a few columns? "Title" and "By" look like they could be a bit smaller... then it won't force the table to be wider than neccessary, thus removing your horizontal scroll bars.
Rekha, I was having the same issues with a page I was working on.
It could be that one or more of your elements widths/margins/padding/border are too wide, creating a invisible extra space in the browser.
A fix that may work is setting the html and body padding/margin to 0 and then changing other elements margin to 0 (i.e. change a header section that spans 100% of the width of the browser, change margin to 0).
Try looking at your page with the Firefox add-on, "Firebug" (link http://getfirebug.com/downloads), to see if there is an element's padding/margin is acting unexpectedly.