My goal is to have the slider 1280px wide and centered on the page. I would like the edges of the content to have hidden overflow on both sides. For example I want the center of content to always stay in the center of the page with each side being cut off as the browser is resized, with no horizontal scroll bar appearing.
Is there a straightforward way to accomplish this?
I ended up with a somewhat interesting solution that worked for me in (at least) Chrome, Firefox, and Safari where I tested it. It may be slightly hacky, but the result was cool.
So here's what I did: I put a .wrapper with a width of 1280px. The margin is 0 auto except the left margin which is where it all happens. The left margin needs to be set to half of the div width. In this case that would be 640px. However, because it must overflow outside of the left screen it must be set to a negative number (i.e. -640px). Then in order to reverse that effect when the screen is larger then screen a left:50% pushed it over the correct amount. Obviously in order for the margin:0 auto to actually work, the position must be set to relative (or absolute if you would like).
.wrapper { width:1280px;
margin:0 auto 0 -640px;
position:relative;
left:50%
}
the one problem
I found one problem with it, though. Because we are using negative margin, it pushes the div to the left to where one can not see if their screen or browser window is too small. Let me know if this is a problem and makes it to where it doesn't work for you.
Add this css class
.overflowbothsides{
vertical-align: middle;
margin: 0 auto;
position: relative;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
}
solution with code and example
enter link description here
Related
My Recaptcha challenge popup overflows the viewport on mobile and I'm also unable to scroll the page.
I need to always show challenge popup in the center of the viewport (horizontally and vertically). I've looked at Recaptcha API and didn't found how to execute code after challenge popup was rendered. It's rendered with Explicit not automatically.
I've tried:
To change the first parent of the iframe CSS class by adding code after .render function, but the iframe was null.
I tried to detect the click on the Recaptcha checkbox inside iframe in a recursive function (nonblocking loop) and then to change the popup CSS class, but the checkbox is always null, until I go with the chrome inspector to the checkbox, then trying to get the checkbox in the console works.
ReCaptcha v2 causes the issue on smaller (mobile) screens. I managed to work around the issue using CSS.
First scales down the recaptcha container (g-recaptcha in some examples) to take less screen space (optional).
#recaptcha-container
{
transform: scale(0.77);
-webkit-transform: scale(0.77);
transform-origin: 0 0;
-webkit-transform-origin: 0 0;
}
Hide the bubble arrow pointing from the checkbox to the challenge bubble (also optional, but looks nicer IMHO).
.g-recaptcha-bubble-arrow
{
display: none;
}
I believe you're looking for something like the following to find the bubble arrow's sibling div element which contains the iFrame with the challenge and center it on the screen (whatever the size is).
.g-recaptcha-bubble-arrow + div
{
position: fixed !important;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
}
Note that I'm using CSS transform, so check the browser support for your target browser and version. Also note that this works for the current implementation of ReCaptcha, if the HTML output changes in the future a different solution may be necessary.
My dear community. I just got back to some html / css coding after a pause of several years (10 to be precise). Actually, my main focus was always on php these times, wherefore I had never been a markup pro. Long story short: I'm rebuilding my parent's website, for what I used a themeforest HTML template to adapt it (no WP! It's called "Porto" by Themeforest). And I'm really seeking for some help...
I'm not able to get the following fixed:
The goal: If a user visits our site via his mobile phone, there should be permanently shown a "Call Us Now" bar full width on the bottom of the screen. There shall be two links in it, one linking to the phone no and the second one to an "Callback-Option".
It is as simple as that. A permanently fixed div shown on the bottom of the screen (like the well-known cookie warning by the GDPR). But, unfortunately, it doesn't work.
I created two divs with "position:fixed;" and "bottom:0;", one for each link and each width 50% of the screen.
.mobileShow1 {
display: none;
}
.mobileShow2 {
display: none;
}
#media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
.mobileShow1 {
display: block;
width: 50%;
position: fixed;
bottom:0;
left: 0;
min-height:50px;
margin: 0 0 0 0;
background-color:#47648B;
font-size:20px;
}
.mobileShow2 {
display: block;
width: 50%;
position: fixed;
bottom:0;
left: 50%;
min-height:50px;
margin: 0 0 0 0;
background-color:#47648B;
font-size:20px;
}
}
And the divs are:
<div class="mobileShow1"><div style="margin-left:15%; padding-top:5%;"><i class="icon-phone icons"></i> Call Us</div></div><div class="mobileShow2"><div style="margin-left:3%; padding-top:5%;"><i class="icon-call-in icons"></i> Callback-Service</div></div>
Basically, this does work perfect. I tried it out with my iPhone X and it worked smoothly. Nevertheless, on "older" iPhones (iPhone 8, iPhone SE), the bottom bar flickers horribly. I made over 6 hours of debugging but I cannot get it fixed. It is definitely due to the "bottom:0;" value. If it is changed to "top:0;" it works fine; but - you will imagine - the bar is on top. There was no way for me to get the bar on the bottom permanently without any flickering.
I found out that there could GPU issues / GPU performance be one reason for the flickering issue. As the website template uses quite a lot of Javascript, and the flickering is happening more on sites with some pictures and sliders, this sounds quite likely. But I cannot (and will not) accept that there is no way to bring down a div bar on the bottom of an iPhone screen just because some Javascript is loaded.... I hardly cannot understand why it works perfectly with the value "top:0;" set, but if it changes to "bottom:0;" the flickering starts again. Why is there such a huge difference for the GPU?
I tried everything I found on the web, to modify the attributes as follows, to get the GPU "quicker", for example:
-webkit-transform-style: preserve-3d;
-webkit-transform: translateZ(0) ;
transform-style:preserve-3d;
-webkit-transition: none !important;
-moz-transition: none !important;
-o-transition : none !important;
-ms-transition: none !important;
transition: none !important;
-webkit-overflow-scrolling:touch;
z-index:9990;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
Nothing worked. The flickering does not stop or get any better. My dear community - I know I'm new here but as I have seen you always found a solution. It is really absurd that I cannot get a div bar fixed on the bottom line without any flickering....
The HTML5 template I use is "Porto Theme" by Themeforest. The theme uses the typical Javascript Packages (jQuery, some Sliders, etc).
Please, is there anyone that could help me? I would implement anything to get this done. I cannot believe I am the only one who wants that... Thank you so much in advance. Please let me know if you need any further informations.
All the best from Vienna.
PS: Please forgive me my poor HTML/CSS markup skills...
The Code is here: http://www.proganize.org,
A Video of the flickering can be found here: http://file.io/5YVFjg
I am tryng to fix a css bug for mobile screens
when I click section 1 content opens and if i move till the bottom of the section one content and after that if I click section 1 content closes.
but I dont see section 2 after that I see section 3 since the screen moves upwards.
how to retain the section 2 in our screen.
am I doing anything wrong with the scaleY property.
providing the related code below
I used scrollIntoView but still not point to second one any idea???
I used window.scrollTo(0, 0) but still not point to second one any idea???
.television .chromecast .sun .sunItem > .bulb {
overflow: hidden;
transition: transform .5s, max-height .5s;
transform: scaleY(0);
box-sizing: border-box;
max-height: 0;
transform-origin: center top;
}
.television .chromecast .sun .sunItem.selected > .bulb {
transform: scaleY(1);
max-height: 100%;
}
We need to invoke properly on the select function
onSelect() {
this.props.onSelect(this.props.id);
this.focusDiv();
}
That's the expected behaviour. The scroll position is retained but you remove content from the top of the screen so you end up further down in the page.
It's always a bad idea to collapse the previous elements when expanding a new one, especially on mobile.
To fix that, you will need to script a scrolling to the top of the open section. That could easily be achieved using jQuery.ScrollTo() or something similar, but to be honest, I would just leave the previous sections open, unless the users have a tendency to scroll back up and that would require to much scrolling to get back to the top of the page. Other UX solutions like a scroll to top link might come in handy to solve that.
I am after some general pointers on how to go about the following.
I am trying to position some elements (divs) in a web page by absolute position, relative to the element in which they live.
The idea being that the containing element top/left should be exactly where it would be in the normal document flow, the width should be set such that it fills <body> up to the RHS, less a small margin, and height such that it fills the remainder of the display window, less the space taken up by a footer (also a div).
Having done that, I can then absolutely position sub-elements inside it. The problem is setting the width/height of the containing element.
I have tried various combination of position properties and javascript executed onload(), without success. I clearly am not taking the right approach.
What I am really after are some pointers from someone who knows how to do this as to the approach to be taken. The bottom line is that I need that containing element to expand to be as big as it can, given the constraints of the browser window and the space taken by the footer element.
.... More info following comments.
Basically, I am trying to display a schedule, not unlike a TV/radio schedule. I.e. a line per event class, then within each line lots of individual events displayed in boxes, with the 'box width/position' scaled to the start/end of the actual event on a timeline.
I've seen this done simply using HTML tables and lots of columns to get
the necessary granularity, then using colspan to vary the widths. However I thought I'd try to do it with absolute positioning of elements. The first problem being that the containing element then has no idea how big this thing is, because using position:absolute takes each element out of the document flow. Therefore, no scroll bars either, even with overflow-x:auto on the containing element.
I am getting nowhere fast with css/javascript (well, certainly nowhere, but not even very fast, actually), and I am starting to wonder of the only real way to control the UI closely is by writing a java applet to contain it all?
Hence my question: conceptually, what would be a good way of going about this?
for the container to contain an absolute element, the height must be set to a fixed height or dynamically set the height using Javascript.
See Example https://codepen.io/jacobgoh101/pen/kkWJaL
HTML
<div class="container">
<img src="https://s21.postimg.org/c1m6ky7dz/kingston_creative_market_cover_small_f.jpg">
</div>
CSS
.container {
position: relative;
width: 90%;
border: 1px solid #000;
}
.container > img {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
Javascript with jQuery
window.onload = function() {
var imgHeight = $('.container img').height();
var targetHeight = imgHeight * 1.2;
$('.container').height(targetHeight);
};
I've found that the contact section of the following site keeps spilling over at the bottom, especially when the window width is reduced to mobile size:
http://phixhut.com/test/1page/onepage.html#contact
The CSS I have for the overlay section is:
-webkit-transition: all 500ms ease;
transition: all 500ms ease;
padding: 55px 0 15px 0;
width: 100%;
background-color: #83aa30;
background-color: rgba(131, 170, 48, 0.6);
background-image: url("../images/GPlay.svg");
position: absolute;
bottom: 0px;
top: 0px;
The spill at the bottom disappears if I remove the "top: 0px" but then it appears to spill over at the top.
Not sure how to go about getting the contact section to resize pefectly to stop these spills. Any help would be greatly appreciated!
The solution, albeit inefficient, would be overflow: hidden
You shouldn't use that, however, because the majority of the time the use of that is to basically hide unwanted code. Rather, try to fix the issue in CSS without using the overflow: hidden, so that when you resize nothing overflows.
You could do that by making sure certain items aren't set to a fixed width or height, because if a screen resolution is smaller than that, it will overflow.
Hope that helps.
There is a few thing's causing your problem but the easiest way to sort it would be to remove the current height you have for class="contact" and set it to the height of your overlay container.
Personally I would re write your code.
It would make more sense to have your map and overlay as one background image and remove your absolute positioning and the extra div's you have in there.
It would A. Streamline your code and B. Reduce the amount of HTTP request's & C. your site would act in the fluid nature you are after.