git ssb


10+

Dominic / patchbay



lightbox overflows screen on mobile

%uPVGaTJE3tdOq6C0twRJPYM53FaNiC8hfRtmttxL91Y=.sha256
Opencryptix opened this issue on 1/21/2017, 12:38:18 PM

lightbox overflows screen on mobile

mobile-lightbox-overflow.png

you can also trigger this in electron through the dev tools

trying this fix now: adding max-width:100% to the css of .lightbox

%gOgqiXAlr/ngJukgagJs8DKiPTKGUVlOFpjXZEsqxmI=.sha256 cryphone2 · 1/21/2017, 12:46:10 PM

Okay. This works for me.. :)

cryptix mentioned this issue in fix lightbox overflow described in %uPVG…
cryptix mentioned this issue in whops.. the 2nd image is misleading.. wanted to add it to %uPVGaTJE3tdOq6C0twRJPYM53FaNiC8hfRtmttxL91Y=.sha256. (lightboxes can also be do l
%MZVXdZH/YQ19N1+Eqk/UfH7i4VgkpL98F4BajjTXP2A=.sha256 cryptix · 1/21/2017, 1:06:35 PM

also: lightboxes can be too long, even in electron:

lightbox_to_long.PNG

screenToSmall.png

%Uz7UdBIynw0wgTHCBY7jEU7GelE9dJusl44uSlF/wiI=.sha256 mix · 1/21/2017, 3:49:11 PM

Yeah I've def experienced that vertical overflow not being scrollable

%4ukQfZ33QvFQpGs0WrbNnU53u/+iRdlqMlXevV93q0s=.sha256 mix · 1/21/2017, 4:31:48 PM

I honestly couldn't simulate this, but trust what you're saying. I get the feeling a bunch of this is going to need dedicated attention and deeper problem-solving at some stage. It could be that the mcss gives gets split into mcss and mcss_mobile at some stage in the future...

%12yjsADMHxdaNsL65FwU4LkSUm15YIrAaHXD4994k+c=.sha256 Dominic · 1/21/2017, 5:32:34 PM

on the dev tools there is a button to simulate different sized displays. it looks like a piece of paper with a phone next to it.

%fDyKZn1lVUhpA783JpNGEb+Vq4ww0Pzx/HPVLMfs48c=.sha256 mix · 1/21/2017, 5:48:00 PM

yeah I know where that is, but when I use it I'm not seeing what cryptix posted

%Kg7M1Mf2TRh3THh0hp8DBaJukTE9kLL5RKoQGrsNH1I=.sha256 cryphone2 · 1/21/2017, 5:59:20 PM

Switch the "reaponsive" Dropdown above the page to one of the presets of phone sizes.

%PHH2xvSnLclV0uwRRQBvrqdbL5VqIaJfv8POiN8iQvg=.sha256 mix · 1/21/2017, 6:11:23 PM

yep done that

%Uzy/oo7SxMln/TTP6MN1vLSgaIMFau5fQ8Fb1b8M8Vc=.sha256 Dominic · 1/21/2017, 6:13:42 PM

@mixmix you probably need a longer message - lots of text or a photo.

%Fn28dBHXydcJObg9HKoqcKW5frjnRkaAGZrEOd5hFS8=.sha256 mix · 1/21/2017, 6:59:56 PM

sorry I should have lead with what I did - for future context, I try not to fobb people off with shallow "well it didn't work for me" type comments. I put 5-10 mins into this.

What I did in electron:

  1. copy and past a crap-load of content into the comment box and click publish to activate the lightbox
  2. open dev tools, enable device toolbar
  3. try galaxy s5, iphone 5, some custom sizes, change the zoom to 150% (as pictured)

It looks like this with or without width: 100% on .lightbox

Selection_170.png

Aside : adding position: absolute makes something vertically over-flowing scrollable !

%DgWWGvKuTDQhB1LT13K0tYYaO5hoLleuyhOw69/GHtQ=.sha256 cryptix · 1/25/2017, 3:08:05 PM

Hrm... yea.. reproducing this is a liiittle biiiit weird.

I only was able to trigger it after trying a couple of permutations of steps (First switch on the emulation, that hitting publish and visa vers) to open the lightbox. Additionally, I had the benefit of knowing what I was looking for..

I will add position: absolute to my PR.

cryptix mentioned this issue in I tried this branch and partially like it but got a question and some _food for thought_. I couldn't figure out how to rename only how to p
%JQRdAd7WL1oO31YT/SEPaU8P15JXFFKDQ0ShztJ/G1k=.sha256 cryptix · 1/25/2017, 3:32:16 PM

I will add position: absolute to my PR

oh.. that is merged already, thanks!

%DjOdFN394owta5+5c+Hec4ljeXU7CvYU9MaSFgSTk/0=.sha256 mix · 2/7/2017, 2:54:54 PM

is this resolved @cryptix ?

%+pWzMgtQxgb9t89RfsaoeBgXEtlec3ZPuSHzJ1lfyaA=.sha256 cryptix · 2/9/2017, 9:22:09 AM

I think it was but currently the liteclient doesn't run at all on mobileSafari.. :-L need to backtrack when it broke or find somebody with a mac to let me use the remote webinspector on their machine...


Built with git-ssb-web