Code showing the problem is at https://jsfiddle.net/JoeAB/3ph18xob/
Five columns will include images and will have fixed widths. Two columns (third and fourth) have minimum widths that will be calculated at run time. The remaining (second) column should occupy all of the remaining width. Up to three of the columns widths should update when the screen width changes and when song data changes.
The width of the panel seems to have a minimum size that depends of the width of the text in the second column. This is a problem. The text should use whatever width it is allocated and scroll horizontally.
The panel occupies the full width of the display, up to 1200px. Above that, it shifts 300px to allow for a menu on the left side (not shown).
How can I style the text div so that it does not affect the column width? Is there a way to debug how Bootstrap is doing is calculations?
I had previously used col-1, col-2, col-3, etc but did not like the result.
index.html
<html lang="en">
<head>
<title>Bug</title>
<meta charset="utf-8">
<meta name="author" content="Bug Company">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap.min.css" media="screen">
<link rel="stylesheet" href="merged.min.css" media="screen">
</head>
<body>
<canvas id="canfit"></canvas>
<div><button id="tick">Next Second</button></div>
<div>Duration <input id="enterdur" /><button id="newdur">Set</button></div>
<div id="content_view">
<!-- small now playing panel -->
<div id="small_now_panel" style="display: block">
<div class="row m-1 m-sm-2 m-xl-3 progrow">
<div class="pic pl-0 mr-3">
<img id="snpp_art" src="placeholder.png" alt="album art"/>
</div>
<div id="vary_sp" class="col">
<div class="row mx-0 mt-0 progrow">
<div class="col-12 px-0 scrolabel">
<label id="snpp_title_l">now playing title</label>
</div>
</div>
<div class="row mx-0 mt-0 progrow">
<div class="col-12 px-0 progress">
<div id="snpp_played" class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%">
<span class="sr-only">played</span>
</div>
<div id="snpp_playing" class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%">
<span class="sr-only">playing</span>
</div>
<div id="snpp_to_play" class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%">
<span class="sr-only">to play</span>
</div>
</div>
</div>
</div>
<div class="ml-3" display="inline-block">
<label id="snpp_time_l" class="text-right mb-0"></label>
</div>
<div class="ml-3" display="inline-block">
<select id="snpp_sr_mode_s">
<option value="normal">Normal</option>
<option value="shuffle">Shuffle</option>
<option value="repeatOne">Repeat One</option>
<option value="shuffleRepeatOne">Shuffle Repeat One</option>
<option value="repeatAll">Repeat All</option>
<option value="shuffleRepeatAll">Shuffle Repeat All</option>
</select>
</div>
<div class="pic ml-3">
<img id="snpp_stop_b" src="stop-active.png" alt="Play stop audio button" />
</div>
<div class="pic ml-3">
<img id="snpp_previous_b" src="stop-active.png" alt="Play previous audio button" />
</div>
<div class="pic ml-3">
<img id="snpp_play_b" src="stop-active.png" alt="Play audio button" />
</div>
<div class="pic ml-3 pr-0">
<img id="snpp_next_b" src="stop-active.png" alt="Play next audio button" />
</div>
</div>
</div>
</div>
<script src="jquery-3.6.0.min.js"></script>
<script src="jquery.mask.min.js"></script>
<script src="bootstrap.bundle.min.js"></script>
<script src="merged.min.js"></script>
</body>
</html>
merged.min.css
::-webkit-input-placeholder {
font-size: 14px;
color: #d0cdfa;
}
:-moz-placeholder { /* older Firefox*/
font-size:14px;
color: #d0cdfa;
}
::-moz-placeholder { /* Firefox 19+ */
font-size: 14px;
color: #d0cdfa;
}
:-ms-input-placeholder {
font-size: 14px;
color: #d0cdfa;
}
select {
background-color: #fff;
color: #000;
background: #fff;
background-size: 8px 10px;
display: inline-block;
width: 100%;
height: calc(2.25rem + 2px);
padding: .375rem 1.75rem .375rem .75rem;
line-height: 1.5;
vertical-align: middle;
border: 1px solid #ced4da;
border-radius: .25rem;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
cursor: pointer;
}
.row{
min-height: 52px;
}
/* chrome */
@media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) { /* chrome */
input[type=range] {
margin-top: 21px;
height: 2px;
background: #077bff;
}
html {
height: 100%;
overflow-x: hidden;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
body{
font-family: Arial, sans-serif;
min-width: 350px;
overflow: hidden;
height: 100%;
background: #f3f4f5;
background-image: linear-gradient(to bottom, #fff, #f3f4f5);
overflow-x: hidden;
}
#content_view {
overflow-x: hidden;
}
@media (max-width: 1199px) { /*mobile mode*/
#small_now_panel {
width: 100%;
}
}
@media (min-width: 1200px) {
#small_now_panel {
width: calc(100% - 300px);
}
}
#small_now_panel {
display: none;
position: fixed;
bottom: 0;
right: 0;
min-width: 640px;
z-index: 5;
background-color: White;
box-shadow: 0 -6px 6px 0 Grey;
}
#small_now_panel .row {
flex-wrap: nowrap;
}
.scrolabel {
overflow-x: scroll;
overflow-y: hidden;
-ms-overflow-style: none; /* Hide scrollbar for IE and Edge */
scrollbar-width: none; /* Hide scrollbar for Firefox */
}
.scrolabel::-webkit-scrollbar {
display: none;/* Hide scrollbar for Chrome, Safari and Opera */
}
#snpp_title_l {
overflow: hidden;
white-space: nowrap;
}
#snpp_time_l {
width: 100%;
overflow: hidden;
white-space: normal;
text-overflow: clip;
}
#small_now_panel .pic {
display: inline-block;
}
#small_now_panel img {
width: 48px;
height: 48px;
}
.progrow {
min-height: 16px;
}
/*
#vary_sp div {
display: block;
}
*/
.progress {
border-radius: 8px;
}
.progress-bar-success {
height: 2px;
margin-top: 7px;
background-color: #5cb85c;
}
.progress-bar-info {
height: 2px;
margin-top: 7px;
background-color: #5bc0de;
}
.progress-bar-warning {
background-color: #f0ad4e;
}
.progress-bar-danger {
background-color: grey;
border-radius: 8px;
}
merged.min.js
function log(msg){
console.log(msg);
}
// From seconds
Number.prototype.tohmMSS = function() {
var seconds = Math.floor(this), hours = Math.floor(seconds / 3600);
seconds -= hours * 3600;
var minutes = Math.floor(seconds / 60);
seconds -= minutes * 60;
if (hours > 0) {
if (minutes < 10) {minutes = "0" + minutes;}
if (seconds < 10) {seconds = "0" + seconds;}
return hours + ":" + minutes + ":" + seconds;
} else {
if (seconds < 10) {seconds = "0" + seconds;}
return minutes + ":" + seconds;
}
}
var streaming_plate = {}
streaming_plate.data = {
loaded: false,
sr_mode: {
shuffle: true,
repeatOne: true,
shrepOne: true,
repeatAll: true,
shrepAll: true
},
play_mode: "normal",
service_id: "",
now_artist: "",
now_album: "",
now_title: "",
previous_aat: "",
now_icon: "",
duration_s: 227,
duration_ms: 0,
playtime_s: 42,
playtime_ms: 0,
playstate: 0,
showaatTO: 0,
last_dur_wide: 0,
last_mode_wide: 0
};
streaming_plate.load_plate = function() {
streaming_plate.data.last_dur_wide = 0;
streaming_plate.data.last_mode_wide = 0;
$("#small_now_panel").show();
streaming_plate.data.loaded = true;
streaming_plate.initNowPlaying();
streaming_plate.clearProgress();
streaming_plate.update_UI_play_mode();
streaming_plate.update_duration(streaming_plate.data.duration_s);
streaming_plate.update_playtime(streaming_plate.data.playtime_s);
streaming_plate.showNowPlaying();
$("#tick").on("click", function() {
if (streaming_plate.data.playtime_s < streaming_plate.data.duration_s) {
streaming_plate.data.playtime_s += 1;
streaming_plate.update_playtime(streaming_plate.data.playtime_s);
}
});
$("#newdur").on("click", function() {
streaming_plate.data.duration_s = parseInt($("#enterdur").val());
streaming_plate.update_duration(streaming_plate.data.duration_s);
});
$(window).on("resize", function(e) {
//range_control_page.set_size();
if (streaming_plate.data.loaded) {
log("plate " + $("#small_now_panel").width() + ", " + $("#vary_sp").width());
}
});
setTimeout(streaming_plate.update_song, 500);
}
streaming_plate.update_UI_play_mode = function() {
if (streaming_plate.data.loaded) {
$("#snpp_sr_mode_s").parent().show();
var cur_mode = streaming_plate.data.sr_mode;
var label_fsize = $("#snpp_sr_mode_s").css("font-size");
var label_fpx = parseInt(label_fsize);
var label_ffamily = $("#snpp_sr_mode_s").css("font-family");
var c = document.getElementById("canfit");
var ctx = c.getContext("2d");
ctx.font = label_fpx + "px " + label_ffamily;
var label_wide = ctx.measureText("Normal").width;
var other_wide = $("#snpp_sr_mode_s").outerWidth() - $("#snpp_sr_mode_s").width();
var mode_wide = Math.ceil(label_wide + other_wide);
if (mode_wide != streaming_plate.data.last_mode_wide) {
$("#snpp_sr_mode_s").parent().attr("style", "min-width: " + mode_wide + "px");
streaming_plate.data.last_mode_wide = mode_wide;
log("mode width " + mode_wide);
}
}
}
streaming_plate.fit_time = function(dttext) {
var alleights = dttext.replace(/[0-7,9]/g, "8");;
var label_fsize = $("#snpp_time_l").css("font-size");
var label_fpx = parseInt(label_fsize);
var label_ffamily = $("#snpp_time_l").css("font-family");
var c = document.getElementById("canfit");
var ctx = c.getContext("2d");
ctx.font = label_fpx + "px " + label_ffamily;
var dur_wide = Math.ceil(ctx.measureText(alleights).width);
if (dur_wide != streaming_plate.data.last_dur_wide) {
$("#snpp_time_l").parent().attr("style", "min-width: " + dur_wide + "px");
streaming_plate.data.last_dur_wide = dur_wide;
log("duration width " + dur_wide);
}
}
streaming_plate.update_duration = function(ivalue) {
// Received in seconds, use ms
streaming_plate.data.duration_ms = ivalue * 1000;
if (ivalue > 0) {
var maxdursec = ivalue;
$("#snpp_played").attr("aria-valuemax", maxdursec);
$("#snpp_playing").attr("aria-valuemax", maxdursec);
$("#snpp_to_play").attr("aria-valuemax", maxdursec);
streaming_plate.fit_time(ivalue.tohmMSS() + " /" + ivalue.tohmMSS())
}
streaming_plate.updateProgress();
}
streaming_plate.update_playtime = function(ivalue) {
// Received in seconds, use ms
streaming_plate.data.playtime_ms = ivalue * 1000;
streaming_plate.updateProgress();
}
streaming_plate.initNowPlaying = function() {
var stdata = streaming_plate.data;
stdata.service_id = "No Service";
stdata.now_artist = "";
stdata.now_album = "";
stdata.now_title = "";
stdata.duration_ms = 0;
$("#snpp_title_l").text("");
$("#snpp_time_l").text("");
$("#snpp_sr_mode_s").attr("disabled", false);
}
streaming_plate.clearProgress = function() {
$("#snpp_played").attr("aria-valuenow", 0);
$("#snpp_played").attr("aria-valuemax", 0);
$("#snpp_played").attr("style", "width:0");
$("#snpp_playing").attr("aria-valuenow", 0);
$("#snpp_playing").attr("aria-valuemax", 0);
$("#snpp_playing").attr("style", "width:0");
$("#snpp_to_play").attr("aria-valuenow", 0);
$("#snpp_to_play").attr("aria-valuemax", 0);
$("#snpp_to_play").attr("style", "width:0");
}
streaming_plate.update_song = function() {
var stdata = streaming_plate.data;
stdata.service_id = "MyMusic";
stdata.now_artist = "The Oldye Band";
stdata.now_album = "Really Oldye";
stdata.now_title = "Another Glove Song";
streaming_plate.showNowPlaying();
}
streaming_plate.showNowPlaying = function() {
var box_wide = Math.ceil($("#snpp_title_l").parent().width());
if (box_wide < 1) {
return;
}
var stdata = streaming_plate.data;
var aralt = "";
if (stdata.service_id.length > 0) {
aralt = "[" + stdata.service_id + "] ";
}
if (stdata.now_artist.length > 0) {
aralt += stdata.now_artist;
}
if ((stdata.now_album.length > 0) && (stdata.now_artist != stdata.now_album)) {
if (stdata.now_artist.length > 0) {
aralt += " \u2022 ";
}
aralt += stdata.now_album;
}
if ((stdata.now_title.length > 0) && (stdata.now_album != stdata.now_title)) {
if ((stdata.now_artist.length > 0) || (stdata.now_album.length)) {
aralt += " \u2022 ";
}
aralt += stdata.now_title;
}
if (aralt != stdata.previous_aat) {
$("#snpp_title_l").parent().stop(true);
clearTimeout(stdata.showaatTO);
stdata.showaatTO = 0;
$("#snpp_title_l").text(aralt);
stdata.previous_aat = aralt;
var outer_wide = $("#snpp_title_l").parent().width();
var inner_wide = $("#snpp_title_l").width();
$("#snpp_title_l").parent().scrollLeft(0); // always reset when changed
if (inner_wide > outer_wide) {
var diff = inner_wide - outer_wide;
var ratio = inner_wide / outer_wide;
stdata.showaatTO = setTimeout(runAnimation, 500, diff, ratio);
}
}
}
streaming_plate.updateProgress = function(ms) {
if (ms != undefined) {
var msplayed = ms;
} else {
msplayed = streaming_plate.data.playtime_ms;
}
var currentsec = Math.floor(msplayed / 1000);
if (streaming_plate.data.duration_ms > 0) {
// defined duration
var dursec = Math.ceil(streaming_plate.data.duration_ms / 1000);
$("#snpp_time_l").text(currentsec.tohmMSS() + " /" + dursec.tohmMSS());
streaming_plate.visual_progress(currentsec, dursec);
} else {
// no defined duration, adapt to play time
$("#snpp_time_l").text(currentsec.tohmMSS());
var maxsec = 600; // 10 minutes
if (currentsec > maxsec) {
maxsec = 1800; // 30 minutes
if (currentsec > maxsec) {
maxsec = 3600; // 1 hour
if (currentsec > maxsec) {
maxsec = 28800; // 8 hours
if (currentsec > maxsec) {
maxsec = 86400; // 1 day
if (currentsec > maxsec) {
maxsec = 604800; // 7 days
if (currentsec > maxsec) {
currentsec = maxsec; // maximum
}
}
}
}
}
}
streaming_plate.visual_progress(currentsec, maxsec);
}
}
streaming_plate.visual_progress = function(cursec, maxsec) {
var radius = Math.floor($("#snpp_playing").parent().height() / 2);
var fullwide = Math.floor($("#snpp_playing").parent().width());
var leftwide = Math.floor(fullwide * cursec / maxsec);
$("#snpp_played").attr("aria-valuenow", cursec);
$("#snpp_playing").attr("aria-valuenow", 1);
$("#snpp_to_play").attr("aria-valuenow", maxsec - 1 - cursec);
$("#snpp_played").attr("style", "width:" + (leftwide - radius) + "px");
$("#snpp_playing").attr("style", "width:" + (2 * radius) + "px");
$("#snpp_to_play").attr("style", "width:" + (fullwide - leftwide - radius) + "px");
}
function diag_time_ms() {
var date = new Date();
var fseconds = date.getTime() / 1000;
return "time=" + fseconds.toFixed(3);
}
var streamer = {}
streamer.data = {
first_run: true,
shared_poll_id: "",
monrequest: null,
monitorTO: null
};
streamer.fixed = {
cnext: '{"control":"next"}',
cstop: '{"control":"stop"}',
cpause: '{"control":"pause"}',
cprevious: '{"control":"previous"}',
allscribed: ""
};
$(document).ready(function(){
streaming_plate.load_plate();
});