PDA

View Full Version : Content disappearing on android device when using float.



nealrm
03-14-2014, 05:09 PM
I'm trying to align some button above an image. This works great for most browsers except android. For some reason, when I use float the buttons disappear. Take out the float statement, the buttons are there. Put it in, they are gone. Here is the CSS:


.PhotoButtons{ width:100%;
float:Left;
padding-bottom:2px;
display:-webkit-box;
display:flex;
}
.PhotoButtons button {
-webkit-box-flex:2;
-webkit-box-direction:row;
flex:1;
display:inline-block;
font-size:.65em;
margin-left:0px;
margin-right:0px;
padding:2px;
height:auto;
word-wrap:normal;
border:1px solid darkgray;
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(bottom, #ABABAB 0%, #F5F5F5 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(bottom, #ABABAB 0%, #F5F5F5 100%);
/* Opera */
background-image: -o-linear-gradient(bottom, #ABABAB 0%, #F5F5F5 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #ABABAB), color-stop(1, #F5F5F5));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(bottom, #ABABAB 0%, #F5F5F5 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to top, #ABABAB 0%, #F5F5F5 100%);
}
.no-flexbox .PhotoButtons {
overflow:visible;
background-color:blue;
}
.no-flexbox .PhotoButtons button {
float:left;
width:14.2857%;
vertical-align:top;
}

vangogh
03-14-2014, 07:58 PM
If this is online feel free to post a link. You can also send me one via PM in case you don't want to post it. Things like this are much easier to figure out when you can see a live example.

Just looking quickly at your code I notice you're trying to use flexbox and floats. It's one or the other. With flexbox there are specific properties for aligning the element. There's align-items and justify-content. An auto margin might also accomplish what you want. Here's an article I wrote for Adobe (http://www.adobe.com/devnet/html5/articles/working-with-flexbox-the-new-spec.html) about working with flexbox. It covers all the alignment properties.

If the alignment properties of flexbox don't help you can try wrapping a container around PhotoButtons and try to float the container while leaving PhotoButtons as the flexbox.

nealrm
03-14-2014, 08:12 PM
Thank Vangogh, I was able to figure out a solution. Instead of using floats I went with Display:table for the main container and Display:table-cell for the button.



.no-flexbox .PhotoButtons {
overflow:visible;
display:table;
}
.no-flexbox .PhotoButtons button {
width:14.2857%;
vertical-align:top;
display:table-cell;
}






I also left out some information. I'm using Modernizr to help with formatting on older browsers. The .no-flexbox css statements only come into effect on browsers that do not support flexboxes. In this case IE8 & 9 and Android browsers. The .PhotoButtons and .PhotoButtons button CSS work just like they should on new browsers.