Category Archives: CSS

Scroll Spy (Fixed footer)

Use fixed on mobile could cause wrong position for unknown reason. Change value of “position” property should be the best solution.

<div class="quick_menu">
  <a href="#" class="checkout">Checkout</a>
</div>

<a href="#" class="checkout">Checkout</a>

</div>

.quick_menu{
    display: none;
    a{
        display: block;

    }
}

@media (max-width: 600px){
    .quick_menu{
        display: block;
        position: fixed;
        top: auto;
        bottom: 0;
        height: 50px;
        width: 100%;
        background-color: $main-color;
        color: #FFF;
        z-index: 6;
        line-height: 50px;
        text-align: center;
        font-size: 20px;
        a{
            color: #FFF;
        }
    }
}

.quick_menu{

display: none;

display: block;

}

@media (max-width: 600px){

.quick_menu{

display: block;

position: fixed;

top: auto;

bottom: 0;

height: 50px;

width: 100%;

background-color: $main-color;

color: #FFF;

z-index: 6;

line-height: 50px;

text-align: center;

font-size: 20px;

color: #FFF;

}

$(window).load(function(){
    $(window).scroll(function (event) {
        var scroll = $(window).scrollTop();
        //console.log(scroll);
        var gap = scroll - start_moving;
        if(gap > 0){
            $q_menu.css({
                'position': 'relative'
            });
        }else{
            $q_menu.css({
                'position': 'fixed'
            });
        }
    });
});

//Height of document will be changed after main products are retrived.
function refresh_scroll(){
    var w_h = $(window).height();
    var d_h = $(document).height();
    var footer_h = $('footer').outerHeight();
    $q_menu = $('.quick_menu');
    start_moving = d_h - w_h - footer_h;
}

function get_main_products(gid){
    var params = {
        gid:gid
    }
 
    $.ajax({
        type: 'get',
        url: '/menu/main_products',
        data: params,
        dataType: 'html',
        success: function(res){
            $('#main_products').html(res);

            $('.dish_wrap .img_wrap').fancybox({
                // Options will go here
            });

            refresh_scroll();
        },
        error: function(res){
            $('#iform').lalavalidate('show_errors', res);
        }
    });
}

$(window).load(function(){

$(window).scroll(function (event) {

var scroll = $(window).scrollTop();

//console.log(scroll);

var gap = scroll - start_moving;

if(gap > 0){

$q_menu.css({

'position': 'relative'

});

}else{

$q_menu.css({

'position': 'fixed'

});

}

});

//Height of document will be changed after main products are retrived.

function refresh_scroll(){

var w_h = $(window).height();

var d_h = $(document).height();

var footer_h = $('footer').outerHeight();

$q_menu = $('.quick_menu');

start_moving = d_h - w_h - footer_h;

}

function get_main_products(gid){

var params = {

gid:gid

}

$.ajax({

type: 'get',

url: '/menu/main_products',

data: params,

dataType: 'html',

success: function(res){

$('#main_products').html(res);

$('.dish_wrap .img_wrap').fancybox({

// Options will go here

});

refresh_scroll();

error: function(res){

$('#iform').lalavalidate('show_errors', res);

}

});

}

Align text to bottom of a div

Use flex:

<div class="wrap">
  <span>Align me to the bottom</span>
</div>

<span>Align me to the bottom</span>

</div>

CSS:

.wrap {
  height: 200px;
  width: 200px;
  border: 1px solid #aaa;
  margin: 10px;
  display: flex;
}

.wrap span {
  align-self: flex-end;
}

.wrap {

height: 200px;

width: 200px;

border: 1px solid #aaa;

margin: 10px;

display: flex;

}

.wrap span {

align-self: flex-end;

}

Reference:

https://stackoverflow.com/questions/17123327/align-text-to-the-bottom-of-a-div

display property of tfoot

The “display” property must be “table-footer-group”, if you use “block”, all columns in tfoot will be merged in 1 column.

Sticky (Fixed) Column of a table

#mousewheel_example{
    overflow-y:hidden;
    overflow-x:auto;
    margin-top:5px;
    padding:0;
}
#itable tr th, #itable tr td{
	width: 100px;
}
#itable{
    border-collapse: collapse;
    table-layout: fixed;
    max-width: none;
    width: max-content;
    border-collapse: separate;
}
#itable tr th{
    position: sticky;/*important*/
    left: 0;/*important*/
    top: 0;/*important*/
    z-index: 1;
    background-color: #5DCEAF;
    color: #FFFFFF;
    font-size: 16px;
    width: 180px;
    font-weight: bold;
    border: 1px solid #FFF;
    padding: 3px;
    font-weight: bold;
}
#itable tr td{
    padding: 3px;
    text-align: center;
    width: 130px;
    font-size: 15px;
    border: 1px solid #FFF;
    background-color: #DFF5EF;
}

#mousewheel_example{

overflow-y:hidden;

overflow-x:auto;

margin-top:5px;

padding:0;

}

#itable tr th, #itable tr td{

width: 100px;

}

#itable{

border-collapse: collapse;

table-layout: fixed;

max-width: none;

width: max-content;

border-collapse: separate;

}

#itable tr th{

position: sticky;/*important*/

left: 0;/*important*/

top: 0;/*important*/

z-index: 1;

background-color: #5DCEAF;

color: #FFFFFF;

font-size: 16px;

width: 180px;

font-weight: bold;

border: 1px solid #FFF;

padding: 3px;

font-weight: bold;

}

#itable tr td{

padding: 3px;

text-align: center;

width: 130px;

font-size: 15px;

border: 1px solid #FFF;

background-color: #DFF5EF;

}

CSS Flex

Vertical Center

.search-wrap{
	display: flex;
	align-items: center;
	margin-bottom: 10px;
}

.search-wrap{

display: flex;

align-items: center;

margin-bottom: 10px;

}

https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/

Extra Blank Pages when Printing Page

html, body { height: auto; }

1	html, body { height: auto; }

Reference:

https://stackoverflow.com/questions/17145413/extra-blank-page-when-i-print-except-in-ie-is-it-my-print-css

Bootstrap Modal Issues

Width:

If the width of modal is too wide, check the following possible reasons:

If there is any long text string is not broken to new line.
Image width without max-width
iframe (e.g. embeded youtube video)

CSS Issues in iphone

如果不是RWD，Fixed Menu會沒辦法完整顯示

Solution: 用JS判斷window寬度，把fixed改成static

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
<meta name="viewport" content="width=1080">

<style>
body.mobile{
	padding-top:0;
}
	body.mobile header{
		position: static;
		min-width: 980px;
	}
</style>

<script>
$(document).ready(function(){
	$(window).resize(function(){
		var w = $(window).width();
		//console.log(w);
		if(w <= 1080){
			$('body').addClass('mobile');
		}else{
			$('body').removeClass('mobile');
		}
	});
});
</script>

<style>

body.mobile{

padding-top:0;

}

body.mobile header{

position: static;

min-width: 980px;

}

</style>

$(document).ready(function(){

$(window).resize(function(){

var w = $(window).width();

//console.log(w);

if(w <= 1080){

$('body').addClass('mobile');

}else{

$('body').removeClass('mobile');

}

});

</script>

iPhone會自動調整文字的大小，有時候內文的字型會比標題還大

Solution:

body{
	-webkit-text-size-adjust: 100%;
}

body{

-webkit-text-size-adjust: 100%;

}

table-cell will cause weird padding of a td

In table, if the CSS value of “display” is “table-cell”, and a image within, there will be a weird padding under the image. Refer to the green lines:

https://jsfiddle.net/RexLo/1hdxob6s/1/

Solution:

Set the display value of the image to “block”:

display: block;

1	display: block;

Reference:

DOCTYPE is causing the image to display as an inline element.
http://stackoverflow.com/questions/8479090/remove-spacing-between-table-cells-and-rows

body overflow issue

body overflow hidden, 要附加 -webkit-overflow-scrolling: touch, 不然手機看會以為壞掉了，卡卡的

figure 不是取代 image tag，在這裡使用image就好

Rex's Personal Site

This site is built on WordPress and contains personal notes, photos and videos

Category Archives: CSS

Scroll Spy (Fixed footer)

Align text to bottom of a div

display property of tfoot

Sticky (Fixed) Column of a table

CSS Flex

Extra Blank Pages when Printing Page

Bootstrap Modal Issues

Width:

CSS Issues in iphone

如果不是RWD，Fixed Menu會沒辦法完整顯示

iPhone會自動調整文字的大小，有時候內文的字型會比標題還大

table-cell will cause weird padding of a td

Solution:

body overflow issue

July 2020
M	T	W	T	F	S	S
« Jun
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31