css筆記 – Max的程式語言筆記

How to Use the :has() Selector in CSS

max-stackoverflow — Thu, 05 Dec 2024 01:41:05 +0000

之前使用過 :not() 覺得超級的實用，例如：選取所有checkbox 狀態是沒被打勾的。今天要來學習使用 :has().

:has()
https://developer.mozilla.org/zh-CN/docs/Web/CSS/:has
CSS :has() Pseudo-class
https://www.w3schools.com/cssref/sel_has.php
:has() 個案研究
https://developer.chrome.com/blog/css-ui-ecommerce-has?hl=zh-tw
How to Use the :has() Selector in CSS
https://www.freecodecamp.org/news/how-to-use-the-has-selector-in-css/

影片：Learn CSS :not() and :has() selector in 6 Minutes
https://www.youtube.com/watch?v=-pQZLQakz-c

滿神奇的，居然完全沒使用 javascript 就到過 filter 功能。

左側分類欄位組合右側收合

max-stackoverflow — Tue, 07 May 2024 07:33:30 +0000

在使用 clipchamp 時看到這一個功能，覺得很有趣。

比較簡單的解法，是使用 sidebar + collapse 就可以做到，範例程式：
https://getbootstrap.com/docs/5.3/examples/sidebars/

clipchame 的這個做法的優點是讓分類可以保持在左側sidebar 裡。

實作的方式是，sidebar 使用 tab 來實作，收合使用。 collapse, 參考看看 bootstrap 範例：
https://getbootstrap.com/docs/5.3/components/collapse/

一般 collapse 是上下收合，這個是左右收。

一般 tab 是上下的版面，這個是左右版面。

實際上用的到html程式碼：

css:

div.ifilter_chart {
    display: flex;
    height: 100%;	
}

.ifitler_chart_left_side_bar{
    display: flex;
    /*
    // why remark this become height: 100% 
    height: 100%; */
    position: relative;
    z-index: 5;	
}

.ifilter_chart_left_nav {
    background-color: rgb(255, 255, 255);
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 64px;
    border-inline-end: 1px solid rgb(230, 230, 230);
}

.ifilter_chart_left_nav_grid {
    flex-grow: 1;
    align-self: stretch;
    position: relative;
    overflow: hidden;
}

.ifilter_chart_left_nav_item {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 0px;
    /* overflow-y: scroll; */
}

.ifilter_chart_left_nav_btn.active {
    opacity: 1;
    color: var(--primary) !important;
    background: var(--rgba-primary-1);
    font-weight: 600;
    box-shadow: none;    
}
.ifilter_chart_left_nav_btn {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: none;
    border: none;
    color: #737B8B;
    line-height: 1.1;
    padding: 4px;
    width: 64px;
    height: 64px;
    font-weight: 400;
    cursor: pointer;
    /* transition: color 100ms ease-in-out 0s, background 100ms ease-in-out 0s; */
}

.ifilter_chart_left_nav_item_text {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}
    
.ifilter_chart_left_sidebar {
	position: relative;
    height: 100%;
}

.ifilter_chart_left_sidebar_grid {
    background-color: rgb(255, 255, 255);
    display: flex;
    flex-direction: column;
}

.ifilter_chart_left_sidebar_media {
    background-color: rgb(255, 255, 255);
    overflow: hidden overlay;
    flex-grow: 1;
}

.ifilter_chart_left_sidebar_section {
    position: relative;
    width: 100%;
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

.ifilter_chart_left_sidebar_grid_container {
    padding: 16px;
    display: flex;
    flex-direction: column;
}

.ifilter_chart_collapse_icon {
    position: absolute;
    top: calc(50% - 38px);
    height: 76px;
    width: 16px;
    color: rgb(39, 40, 54);
    transition: color 150ms ease-out 0s;
}
.ifilter_sidebar_button {
    position: absolute;
    top: calc(50% - 38px);
    transition: color 150ms ease-out 0s;	
}

.ifilter_chart_collapse_icon {
    left: 100%;
}
.ifilter_chart_collapse_icon_svg:not(.collapsed) {
    transform: rotate(90deg);
}
.ifilter_chart_collapse_icon_svg.collapsed {
    transform: rotate(270deg);
}

.ifilter_chart_collapse_icon_svg {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -6px;
    margin-top: -6px;
}

.ifilter_chart_collapse_button {
    text-align: inherit;
    padding: 0px;
    border: none;
    font: inherit;
    color: inherit;
    cursor: pointer;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
}

.ifilter_chart_canvas {
	width: 100%;
	text-align: -webkit-center;
	padding-top: 3rem;
    margin-left: 20px;
}

javascript:

var collapseElementList = [].slice.call(document.querySelectorAll('.ifilter_chart_left_nav_btn'));
collapseElementList.map(function (collapseEl) {
	collapseEl.addEventListener("click", function(event){
        let targetElement = event.target || event.srcElement;
        //console.log(targetElement);
        if(targetElement.tagName=="I" || targetElement.tagName=="DIV") {
        	targetElement = targetElement.parentNode;
            //console.log(targetElement);
        }
    	
        let btn_href = targetElement.getAttribute("href");
    	let btn_selector = "";
    	let collapse_id = "";
    	if(btn_href=="#ifilter_tab_bar_config" || btn_href=="#ifilter_tab_bar_filter") {
    		collapse_id = "collapse_bar_sidebar";
    		btn_selector = 'button[data-bs-target="#'+ collapse_id +'"]';
    	}
    	const sidebar_btn = document.querySelector(btn_selector);
    	if(sidebar_btn) {
    		//console.log(sidebar_btn.getAttribute("class"));
    		if(sidebar_btn.getAttribute("class").indexOf("collapsed") > -1) {
    			const bsCollapse = new bootstrap.Collapse(document.querySelector('#'+collapse_id));
    			bsCollapse.toggle();
    		}
    	}
    });
});


var collapseElementList = [].slice.call(document.querySelectorAll('.ifilter_chart_left_sidebar_grid'));
collapseElementList.map(function (collapseEl) {
	// hide.bs.collapse
	const element_selector = "button[data-bs-target=\"#"+ collapseEl.getAttribute("id") +"\"] svg.ifilter_chart_collapse_icon_svg";
	collapseEl.addEventListener("hidden.bs.collapse", function(event){
		$(element_selector).addClass("collapsed");
	});

	// show.bs.collapse
	collapseEl.addEventListener("shown.bs.collapse", function(event){
		$(element_selector).removeClass("collapsed");
	});
});

說明：你的使用情況可能比我簡單很多，我因為有多個圖表要共用 css, 所以程式碼會複雜一點點。

讓三欄式網格式的圖片自動縮小

max-stackoverflow — Mon, 05 Feb 2024 02:24:52 +0000

在套用bootstrap 時, 不小心把 img tag 放到 card 裡, 大多數的情況下, image 是以原圖方式顯示, 縮小的話, 需要自定寬度, 如果設定絕對的寬度, 就需要自義左右造成的空白間隙.

比較方便的做法, 是直接填滿某一個網格, 然後再格子裡設定間距, 做出來的執行效果:

中間神奇的關鍵是 row-cols-md-3, 滿神奇的, 加了這個class , 圖片就自動縮到格子裡, 後面加 g-3 是要讓邊邊不要直接摸到圖片的線條。

bootstrape validation 使用心得

max-stackoverflow — Tue, 26 Sep 2023 09:23:59 +0000

為什麼要使用 validation, 因為這個使用上很直覺, 可以直接跟user講那一個欄位分別是合法,還有各自的錯誤訊息, 也不會因讓畫面有奇怪的彈跳, 使用的效果相較於彈出式的alert/dialog/modal 而言, 比較推薦使用.

在 input tag, 並不是使用 onchange 來觸發每一個輸入的字元, onchange 是在離開input 輸入框時, 才會觸發, 每打一個字, 使用的是事件是 oninput.

在 input 的 parent 加入 .was-validated 就可以觸發讓輸入框有打勾與”必填”的視覺上的效果. 如果是要類似的 ajax 的使用方法, 必需在”完成檢查” 並且沒有錯誤, 才 addClass, 反之要 removeClasss, 就可以有上面的效果.

但是, 如果是要在輸入框有值, 且要顯示為錯誤, 請手動讓正確的 form-control 加入 class .is-valid 有錯的 form-control 加入 .is-invalid .

官方的說明:
https://getbootstrap.com/docs/5.3/forms/validation/

tabulator 的寬度無法overflow:hidden

max-stackoverflow — Fri, 04 Aug 2023 10:33:26 +0000

正常情況下, overflow 的部分被隱藏, 並在內部元件產生橫向的scroll bar.

異常情況, 是無法產生 scrollbar, 畫面變超大,

努力地研究 tabulator 官方文件, 也看不出所以然:
https://tabulator.info/docs/5.5/layout#fittowidth

手動調整 tabulator 的 table width:100% 也無解.

產成的原因:

某一個爸爸 div 讓 tabulator 繼承到 display: grid; 而且上層又是用 flex, 交叉使用就掛掉.

解法1: 避開 grid 就OK了.

解法2: 在 tabulator 的上層設成 display: grid 居然也行, 真太神奇了, 呵呵.

Left align and right align within div in Bootstrap

max-stackoverflow — Tue, 18 Jul 2023 10:04:52 +0000

想把下面的按鈕們搬到右邊, 但都失敗, 成功後的執行畫面:

解法:
https://getbootstrap.com/docs/5.0/utilities/flex/


  Flex item
  Flex item
  Flex item

直接下 justify-content-end , 沒有效果,

使用 text-right 也失敗:
https://getbootstrap.com/docs/4.0/utilities/text/

Right aligned text on all viewport sizes.

css selector tester online: jsoup

max-stackoverflow — Fri, 14 Jul 2023 18:10:17 +0000

今天要分享一個跟css selector 有關的網站:
https://try.jsoup.org/

我實際執行畫面：

原本的 css selector 是寫 tr.status_tr 但是，會連 Soldout 也一起被選到，改用 tr[class=’status_tr’] 就解決了，沒有使用到 :NOT().

在網路上學習 css selector 的語法，想套用看看，例如我想試的是NOT 的用法：
https://www.geeksforgeeks.org/how-to-use-a-not-equal-css-attribute-selector/

相關討論：Can’t find a “not equal” css attribute selector
https://stackoverflow.com/questions/25287229/cant-find-a-not-equal-css-attribute-selector

One problem with the accepted answer is that it will also select elements that do not have a foo attribute at all. Consider:

No foo
Empty foo
XXX
YYY
ZZZ

div:not([foo='']) will select both the first and second div elements. If you only want div elements that have an attribute foo that is set to an empty string, you should use:

div[foo]:not([foo=''])

If you want all elements with attribute foo that is neither y nor z, you should use:

div[foo]:not([foo='y']):not([foo='z'])

Bootstrap Tabs Example

max-stackoverflow — Tue, 18 Apr 2023 07:41:44 +0000

最近有一個需求, 想做成 wizard 風格的操作界面, 首先是在 google 下 keyword:

bootstrap tabs template

使用下面的範例來修改:
https://colorlib.com/etc/bwiz/colorlib-wizard-30/index.html

實做的結果:

Step 1:

Step 2:

Step 3:

使用的 html:

下方的按鈕們:

使用的 css:

 .form-register .steps {
    margin-bottom: 33px;
    margin-top: 40px
}

.form-register .steps ul {
    display: flex;
    display: -webkit-flex;
    list-style: none;
    padding-left: 0;
    justify-content: center;
    -o-justify-content: center;
    -ms-justify-content: center;
    -moz-justify-content: center;
    -webkit-justify-content: center
}

.form-register .steps li,.form-register .steps li.current {
    outline: none;
    -o-outline: none;
    -ms-outline: none;
    -moz-outline: none;
    -webkit-outline: none
}

.form-register .steps li div {
    display: inline-block;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    -o-border-radius: 50%;
    -ms-border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    background: #ccc;
    margin-right: 143px;
    position: relative;
    outline: none
}

.form-register .steps li div::before {
    position: absolute;
    content: "";
    background: #e5e5e5;
    width: 143px;
    height: 2px;
    top: 50%;
    transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    left: 100%
}

.form-register .steps li.last div {
    margin-right: 0
}

.form-register .steps li.last div::before {
    content: none
}

.form-register .steps li.current div
,.form-register .steps li.current div:active
,.form-register .steps li.done div::before
,.form-register .steps li.done div
,.form-register .steps li.done div:active {
    background: #3760e5
}

.form-register .steps li .current-info {
    display: none
}

.form-register .steps li .title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    color: #fff;
    font-size: 24px;
    font-weight: 600;
    font-family: montserrat,sans-serif
}

使用到的 javascript:

這段用來控制按鍵和區塊在切換時的顯示.

function switch_tab_step(table_name, active_at, tab_count) {
	for(let i=1; i<=tab_count; i++){
		$("#"+ table_name +"_nav_"+i).removeClass("current");
		$("#"+ table_name +"_nav_"+i).removeClass("done");
		
		if(i





next 與 previous 的控制:



function your_table_next_1() {
	switch_tab_step('your_table',2,3);
}

function your_table_previous_1() {
	switch_tab_step('your_table',1,3);
}

function your_table_next_2() {
	switch_tab_step('your_table',3,3);
	
	// final step
    // your code here...
}

function your_table_previous_2() {
	switch_tab_step('your_table',2,3);
}







大致上, 這樣就可以做出 wizard 效果.



Javascript – element.style.left returning blank
max-stackoverflow — Mon, 13 Mar 2023 06:29:49 +0000

when I try to check what the value of left is using javascript, it shows to be "". The following JS is used to check the value:



var menuElement = document.getElementById('menu');
console.log(menuElement.style.left);



You have to use getComputedStyle() to get the rules declared via stylesheet.



var menuElement = document.getElementById('menu');
console.log(getComputedStyle(menuElement).left);
console.log(getComputedStyle(menuElement));



結論: 無效, 但直接使用jQuery 的 attr 屬性, assisn 進 element 的 style 裡, 是可以的, 例如:



div.attr("style","left:100px;top:100px;");



如果是使用javascript 可以使用 Element.setAttribute()



Sets the value of an attribute on the specified element. If the attribute already exists, the value is updated; otherwise a new attribute is added with the specified name and value.



To get the current value of an attribute, use getAttribute(); to remove an attribute, call removeAttribute().



setAttribute(name, value)



bootstrap sidebar menut items too long to wrap
max-stackoverflow — Wed, 08 Mar 2023 09:09:15 +0000

如果是選有 icon 的顯示方式, 預設會 wrap 到 icon 下方, 例如:











解法:







.nav-item .nav-link { 
     display: flex;
 }



完整範例:




  
    After school program
    337
  








資料來源:
https://github.com/coreui/coreui-free-bootstrap-admin-template/issues/478