framework7

Open full view…

Button not taking up full width after CSS Position: absolute

Leslie Chan
Sun, 21 Sep 2014 11:35:11 GMT

Screenshot below show the button not taking up full width in a row. This happen after I apply the following CSS to the element. May I know why position will ruin the layout? Please advice on how to fix this. I need to position the button base on CSS bottom. Thank you. --- #welcomeButton { position: absolute; bottom: 0px; } --- [Button-width-error](//res.cloudinary.com/moot/image/upload/t_d3-gallery-s1/v1411299391/:framework7:GHuG:buttonwidtherror.png.jpg)

Vladimir Kharlampidi
Sun, 21 Sep 2014 12:06:24 GMT

That is how absolute position actually works, you need to specify its width

Leslie Chan
Sun, 21 Sep 2014 14:04:33 GMT

[Button-width-error-2](//res.cloudinary.com/moot/image/upload/t_d3-gallery-s1/v1411308354/:framework7:2N7L:buttonwidtherror2.png.jpg) After add 100% width, became like this. It has content-block, why the button over the right edge? This is the HTML: --- <div id="welcomeButton" class="content-block"> <p class="buttons-row theme-white"> <a href="#" class="button button-big">Login</a> <a href="#" class="button button-big">Register</a> </p> <p class="theme-white"> <a href="#" class="button button-big">Login with facebook</a> </p> </div>

Leslie Chan
Sun, 21 Sep 2014 14:24:44 GMT

I found a fix by manually add new class `.welcomeSet` to both button row and add the following CSS to fix it, is this correct way to fix this issue?: --- .welcomeSet { padding-right: 30px; }

Vladimir Kharlampidi
Sun, 21 Sep 2014 14:33:14 GMT

This fix is not really correct. You may just set "box-sizing:border-box" and keep 100% width on it

Leslie Chan
Sun, 21 Sep 2014 14:41:19 GMT

Ok will try, thank you.