語義UI - 調整製表符/ div以適合動態表

我正在使用語義UI，但這可能是一個更一般的問題。我創建了一組選項卡（見下文）。然後我動態地加載一個表格的標籤。表格比標籤寬（見下文） - 有沒有辦法讓標籤調整到表格？這只是小型（移動）設備的一個問題。我想也許可以使用jQuery，但似乎無法獲得任何工作。語義UI - 調整製表符/ div以適合動態表

編輯：添加片段，但不知道它的可以看到這個問題的片段工具

EDIT2：增加了前，後的jQuery .WIDTH（）控制檯日誌片段。寬度馬克塞斯480無論我把什麼價值。

<div class="ui top attached tabular menu"> 
    <a class="active item" data-tab="Fixtures" data-vivaldi-spatnav-clickable="1">Fixtures</a> 
    <a class="item" data-tab="Standings" data-vivaldi-spatnav-clickable="1">Standings</a> 
    <a class="item" data-tab="Stats" data-vivaldi-spatnav-clickable="1">Stats</a> 
</div> 
<div class="ui bottom attached active tab segment" data-tab="Fixtures"> 
    <div id="showFixtures"></div> 
</div> 
<div class="ui bottom attached tab segment" data-tab="Standings"> 
    <div id="showStandings"></div> 
</div> 
<div class="ui bottom attached tab segment" data-tab="Stats"> 
    Stats 
</div>

var jData = [{ 
 
    "name": "John", 
 
    "age": 30, 
 
    "cars": "Ford", 
 
    "Longer Title": "Longer text", 
 
    "Longer Title2": "Longer text", 
 
    "Longer Title3": "Longer text", 
 
    "Longer Title2a": "Longer text" 
 
}]; 
 

 
console.log("Before: " + $('.ui.menu').width()); 
 

 
$('.ui.menu').width(800); 
 

 

 
console.log("After: " + $('.ui.menu').width()); 
 

 
$('.menu .item') 
 
    .tab(); 
 
div_id = "showFixtures"; 
 
CreateTableFromJSON(jData, div_id) 
 

 
function CreateTableFromJSON(jData, div_id) { 
 
    // EXTRACT VALUE FOR HTML HEADER. 
 
    var col = []; 
 
    for (var i = 0; i < jData.length; i++) { 
 
    for (var key in jData[i]) { 
 
     if (col.indexOf(key) === -1) { 
 
     col.push(key); 
 
     } 
 
    } 
 
    } 
 

 
    // CREATE DYNAMIC TABLE. 
 
    var table = document.createElement("table"); 
 
    table.id = "dp"; 
 
    table.className = "ui collapsing striped blue table unstackable"; 
 

 
    var thead = table.appendChild(document.createElement("thead")); 
 

 
    var tbody = table.appendChild(document.createElement("tbody")); 
 

 
    var thr = thead.insertRow(-1); // TABLE ROW. 
 

 
    for (var i = 0; i < col.length; i++) { 
 
    var th = document.createElement("th"); // TABLE HEADER. 
 
    th.className = "collapsing"; 
 
    th.innerHTML = col[i]; 
 
    thr.appendChild(th); 
 
    } 
 

 
    // ADD JSON DATA TO THE TABLE AS ROWS. 
 
    for (var i = 0; i < jData.length; i++) { 
 

 
    var tr = tbody.insertRow(-1); 
 

 
    for (var j = 0; j < col.length; j++) { 
 
     var tabCell = tr.insertCell(-1); 
 
     tabCell.className = "collapsing"; 
 
     tabCell.innerHTML = jData[i][col[j]]; 
 
    } 
 
    } 
 

 
    // FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER. 
 
    var divContainer = document.getElementById(div_id); 
 
    divContainer.innerHTML = ""; 
 
    divContainer.appendChild(table); 
 

 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.10/semantic.min.js"></script> 
 
<link href="https://cdn.jsdelivr.net/semantic-ui/2.2.10/semantic.min.css" rel="stylesheet" /> 
 
<!DOCTYPE html> 
 

 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 

 
</head> 
 

 
<body> 
 

 
    <div class="ui top attached tabular menu"> 
 
    <a class="active item" data-tab="Fixtures" data-vivaldi-spatnav-clickable="1">Fixtures</a> 
 
    <a class="item" data-tab="Standings" data-vivaldi-spatnav-clickable="1">Standings</a> 
 
    <a class="item" data-tab="Stats" data-vivaldi-spatnav-clickable="1">Stats</a> 
 
    </div> 
 
    <div class="ui bottom attached active tab segment" data-tab="Fixtures"> 
 
    <div id="showFixtures"></div> 
 
    </div> 
 
    <div class="ui bottom attached tab segment" data-tab="Standings"> 
 
    <div id="showStandings"></div> 
 
    </div> 
 
    <div class="ui bottom attached tab segment" data-tab="Stats"> 
 
    Stats 
 
    </div> 
 

 
</body>

來源

2017-05-08 SimpleOne

嘗試添加你的一切都在這裏的代碼，使一個可運行的代碼片斷？ –

你應該能夠做這與jQuery使用width()。例如，如果你想調整選項卡中點擊「日程」選項卡時，你可以這樣做：

$('.item[data-tab="Fixtures"]').click(function() { 
    $('.ui.menu').width($('#showFixtures').width()); 
}

來源

2017-05-08 20:14:53 slander

我試過，但是當我登錄到控制檯它說ui.menu寬度未定義 – SimpleOne

我已經添加了一個id到各種類，然後只是改變寬度，但沒有效果。 Chrome檢查員告訴我這個班級是「ui底部附加的活動標籤段」，但是改變這個不會「粘住」。 – SimpleOne

語義UI - 調整製表符/ div以適合動態表

回答

相關問題