#StackBounty: #javascript #html #css #reactjs #image How to load image from shared file on local server?

Bounty: 100

I am receiving data from local server backend and I want to be to load image. I am receiving array of object like this:

[ {
        "t_pdno": "SFC093989",
        "t_mitm": "SLS005251ACL-3382012763-1",
        "t_qrdr": 60,
        "Operations": "10,20,30,40,60,70",
        "path": "\\192.168.1.245\Images\ACL-3382012763-1.jpg"
    },
    {
        "t_pdno": "SFC093991",
        "t_mitm": "SLS005251ACL-3382012765-1",
        "t_qrdr": 120,
        "Operations": "10,20,30,40",
        "path": "\\192.168.1.245\Images\ACL-3382012765-1.jpg"
    },]

After I console.log(rowData.path) the path it looks like this:

\192.168.1.245ImagesACL-3382014766-1.jpg

So it is perfect to paste in browser and I get the image:

enter image description here

The problem is I cannot load it in my img tag. I tried:

<img
    src={process.env.PUBLIC_URL + rowData.path}
    alt={`${rowData.t_mitm}`}
     loading="lazy"
              />

<img
     src={rowData.path}
     alt={`${rowData.t_mitm}`}
     loading="lazy"
              />




  <img
      src={require(rowData.path)}
      alt={`${rowData.t_mitm}`}
      loading="lazy"
                  />



 <img
      src={`url(rowData.path)`}
      alt={`${rowData.t_mitm}`}
      loading="lazy"
                  />

and nothing is working. How can I load the images?

UPDATE:

If I install http-server to the \192.168.1.245 server and host the Images folder there on specific port I am able to receive the image. But this mean that I will always have to keep folder hosted.

UPDATE 2:

If I try loading the image like this:

   <img
          src={`file://192.168.1.245/Images/${rowData.t_mitm}`}
          alt={`${rowData.t_mitm}`}
          loading="lazy"
                      />

It probably works but I get:

Not allowed to load local resource:
file://192.168.1.245/Images/ACL-3382012763-1.jpg


Get this bounty!!!

#StackBounty: #html #css #flexbox #reactstrap How do I right align a ButtonDrowpdown inside a ModalHeader with reactstrap?

Bounty: 50

I am pretty happy with the Modal that I have so far, except that the dropdown is not where I want it to be. I want it farther right, just to the left of the ‘x’ button. Here is the code I have so far:

<Modal isOpen={modal} toggle={toggleModal} className="modal-lg modal-dialog-scrollable" returnFocusAfterClose={false}>
    <ModalHeader toggle={toggleModal}>
        <span className="align-middle mr-auto">Modal Title</span>
        <ButtonDropdown isOpen={dropdownOpen} toggle={toggleDropdown}>
            <DropdownToggle caret color="info" className="btn-sm">
                Dropdown
            </DropdownToggle>
            <DropdownMenu>
                <DropdownItem header>Header</DropdownItem>
                <DropdownItem disabled>Action</DropdownItem>
                <DropdownItem>Another Action</DropdownItem>
                <DropdownItem divider />
                <DropdownItem>Another Action</DropdownItem>
            </DropdownMenu>
        </ButtonDropdown>
    </ModalHeader>
    <ModalBody>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </ModalBody>
</Modal>

Where I want the dropdown

I have tried to use bootstrap classes with a flex-row div around the stuff inside the ModalHeader and ml-auto on the ButtonDropdown but that didn’t work for me.

Update 1
After some time looking into this, I still can’t figure out how to solve this. I do know that the reactstrap source code is wrapping everything in a modal-title div before wrapping the modal-header around that (I found that out by looking at ModalHeader.js). To investigate further I wrote a basic example with reactstrap:

<Modal isOpen={modal} toggle={toggleModal}>
    <ModalHeader>
        <div className="d-flex flex-row">
        <h5 className="mr-auto">Test 1</h5>
        <h5>Test 2</h5>
        </div>            
    </ModalHeader>
    <ModalBody>
        Lorem ipsum .
    </ModalBody>
</Modal>

This gets rendered to the following html and css:

<div class="modal-header">
    <h5 class="modal-title">
        <div class="d-flex flex-row">
        <h5 class="mr-auto">Test 1</h5>
        <h5>Test 2</h5>
        </div>
    </h5>
</div>
.modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 1rem 1rem;
    border-bottom: 1px solid #dee2e6;
    border-top-left-radius: calc(.3rem - 1px);
    border-top-right-radius: calc(.3rem - 1px);
}

.modal-title {
    margin-bottom: 0;
    line-height: 1.5;
}

This still doesn’t work, though: "Test 1" and "Test 2" are right next to each other as opposed to 1 on the left and 2 on the right. I know that if I remove the modal header display:flex that it looks like it’s fixed but I’m not really sure why. I don’t think the modal-title is the issue.


Get this bounty!!!

#StackBounty: #html #css #cross-browser #w3c #browser-bugs Is the change of outline-offset, on pressing any keyboard key on anchor tag,…

Bounty: 50

In the following demo, click and hold the mousedown on the anchor tag, then drag your cursor away, while holding mousedown, and then finally let go of the click. You will see a red dotted outline around the anchor tag. Now if you press shift key the outline will get offset by a few pixels.

a:focus {
  outline: 1px dotted red;
}
<a href="#">Click+hold, then release, then press shift key</a>

The behaviour doesn’t occur on pressing ctrl or fn keys etc, but does happen for most keys. This behaviour seems to be cross browser compatible, which leads me to ponder:

  • Is it a bug in the implementation of html by the broswers?
  • Or, is it the expected behaviour suggested by w3.org for some user experience issues?


Get this bounty!!!

#StackBounty: #javascript #css #reactjs #performance #sass Evaluate component-scoped scss styles after global min.css in React

Bounty: 100

PROBLEM

Let’s say we have a min.css file that needs to be imported globally:

index.js

import ReactDOM from "react-dom";

import App from "src/App";

import "library/library.min.css";

ReactDOM.render(<App />, document.getElementById("root"));

And some scss styles applied on a component level:

App.js

import "./styles.scss"

const App = () => (
    <div>
        {/* .. */}
    </div>
);

If the scss styles have the same level of specificity as the ones in the min.css, then the ones in the min.css will be overriding the ones coming from scss.

FURTHER INFO

For adopting scss, I’m using the sass library (v1.38.2).

For comparison, you can see below how the styles are evaluated (notice the behaviour of the background properties between scss and min.css):

scss files

Above you can see the min.css overrides the scss styles; Below, I compiled all scss before runtime and in this case, the scss files will be overriding the min.css ones properly (background-color will override background):

compiled css

CAUSE

I’d think the problem is caused because the scss styles are being processed first, so they get overridden by the styles on the min.css, even though the min.css is imported on index.js while the other scss are imported down the tree on the component level.

SOLUTION

Given such supposition, I created an index.scss (imported on index.js) which contains all the app styles:

@import 'library/library.min';

@import 'styles/componentStyles1';
@import 'styles/componentStyles2';
@import 'styles/componentStyles3';
..

And that will work, as the component styles will be overriding the minified ones.

A problem I would think of this though, is that we would be importing all styles even if we won’t require them all straight up, so I’d suppose that could degrade performances (please correct me if I’m wrong).

CONCLUSIONS

Given the above, is there any suggestion on how this could be approached in a better way? Any opinion in merit is highly welcomed, thank you in advance!


Get this bounty!!!

#StackBounty: #javascript #html #jquery #css #html2canvas How to download customisable color change box as image with the background im…

Bounty: 50

I have a box that can change color once you select the box and then select the color.

However, there is also a background image that shows the outline of the box. I have used HTML2canvas and jquery as libraries so I can download the customise color change box as an image, but it could only be downloaded locally if the image is hidden – as shown on the CSS.

My question is, how do I download the customisable color change box with the background outline box image? – or – Is there an alternative way to save the background image and the SVG locally with download button?

//////// carousel ////////

let sliderImages = document.querySelectorAll('.slide'),
  arrowLeft = document.querySelector('#arrow-left'),
  arrowRight = document.querySelector('#arrow-right'),
  current = 0;

//Clear all images
function reset() {
  for (let i = 0; i < sliderImages.length; i++) {
    sliderImages[i].style.display = 'none';
  }
}
// initialize slider
function startSlide() {
  reset();
  sliderImages[0].style.display = "block";
}

//show previous
function slideLeft() {
  reset();
  sliderImages[current - 1].style.display = "block";
  current--;
}

//show next
function slideRight() {
  reset();
  sliderImages[current + 1].style.display = "block";
  current++;
}

//left arrow click
arrowLeft.addEventListener('click', function() {
  if (current === 0) {
    current = sliderImages.length;
  }
  slideLeft();
});

//right arrow click
arrowRight.addEventListener('click', function() {
  if (current === sliderImages.length - 1) {
    current = -1;
  }
  slideRight();
});

startSlide();

const overlays = [];
document.querySelectorAll(".product").forEach(function(path) {
  path.onclick = chooseProduct;
})

function chooseProduct(e) {
  overlays.push(e.target);
  overlays.forEach((overlay) => overlay.classList.add('highlight'));
}

//////// remove highlight when clicking outside of image ////////
var removeHighlight = function(e) {
  var products = document.querySelectorAll('.product');

  if (!e.target.classList.contains('product') && !e.target.classList.contains('color')) {
    overlays.length = 0;
    document.querySelectorAll('.product').forEach(function(prod) {
      prod.classList.remove('highlight');
    });
  }
}
document.onclick = removeHighlight;

//////// remove highlight of a specific shape ////////
function chooseProduct(e) {
  for (let i = 0; i < overlays.length; i += 1) {
    let currentOverlay = overlays[i];
    if (currentOverlay.isSameNode(e.target)) {
      overlays.splice(i, 1);
      e.target.classList.remove('highlight')
      return;
    }
  }
  overlays.push(e.target);
  overlays.forEach((overlay) => overlay.classList.add("highlight"));
}

//////// get and set colours ////////

// Click on a color
var el = document.getElementsByClassName("color");
for (var i = 0; i < el.length; i++) {
  el[i].onclick = changeColor;
}

function changeColor(e) {
  // get the hex color
  let hex = e.target.getAttribute("data-hex");
  // set the hex color
  overlays.forEach((overlay) => overlay.style.fill = hex);
}

$(document).ready(function() {
  function saveScreenshot(canvas) {
    var downloadLink = document.createElement('a');
    downloadLink.download = 'download.jpg';
    canvas.toBlob(function(blob) {
      downloadLink.href = URL.createObjectURL(blob)
      downloadLink.click();
    });
  }

  $(".download-btn").on("click", function(e) {
    e.preventDefault();
    html2canvas(document.querySelector(".download-container"), {
      scrollX: 0,
      scrollY: 0
    }).then(function(canvas) {
      var image = canvas.toDataURL('image/jpeg');
      document.getElementById("created-element").src = image;
      $(this).attr('href', image);
      saveScreenshot(canvas);
    });
  });
});
.grid-container {
  display: grid;
  grid-template-columns: auto 5% 1fr auto 1fr;
  grid-template-rows: 128px auto 1fr auto auto auto auto 100px;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas: 
    "header . . . ." 
    "main main main color-select color-select" 
    "main main main color-select color-select" 
    "about about about about about" 
    "howto howto howto howto howto" 
    "faqs faqs faqs faqs faqs" 
    "social social social social social" 
    "footer footer footer footer footer";
}

.header {
  grid-area: header;
}

.logo {
  display: inline-block;
  padding-top: 20px;
  padding-left: 65px;
}

.navbar {
  display: inline-block;
  padding-top: 50px;
  padding-right: 20px;
  font-family: 'Roboto Condensed', sans-serif;
  line-height: 38px;
  font-weight: 400;
  font-size: 18px;
  float: right;
}

.nav-link {
  margin: 18px;
  color: #212529;
  text-decoration: none;
}

.main {
  grid-area: main;
  background-color: #f8f8f8;
  padding-top: 20px;
  padding-bottom: 50px;
  display: flex;
  text-align: center;
  position: relative;
  margin-top: 2.5px;
  margin-left: 78px;
}

#slider,
.wrap,
.slide-content {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

.slide-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.arrow {
  cursor: pointer;
  position: absolute;
  top: 101%;
  width: 60%;
  height: 0;
  z-index: 1;
  font-size: 20px;
  color: #cccccc;
}

#arrow-left {
  left: 0;
}

#arrow-right {
  right: 0;
}


/* Caption text */

.text {
  position: relative;
  color: #212529;
  font-size: 18px;
  top: 28px;
  width: 100%;
  text-align: center;
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 400;
}

.lion-number {
  color: #8f8f8f;
}

.color-select {
  display: flex;
  align-items: center;
  grid-area: color-select;
  background-color: #f8f8f8;
  margin-top: 2.5px;
  margin-right: 78px;
  padding: 10px;
}

body,
html {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

#container {
  width: 100%;
  height: auto;
}

#product-svg {
  position: absolute;
  z-index: 2;
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: 50%;
  mix-blend-mode: multiply;
  width: 85%;
  height: auto;
}

path {
  fill: #8f8f8f;
}

.background-image {
  position: relative;
  z-index: 1;
  width: 85%;
  height: auto;
}

[data-test] {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: start;
  padding-left: 15px;
  padding-right: 15px;
}

[data-test] span.color {
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 60px;
  padding-bottom: 9px;
}

[data-test] span.color span {
  height: 23px;
  width: 20px;
  background: var(--color);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  margin-bottom: -6px;
}

[data-test] span.color span:first-child {
  margin-left: 1px;
}

.highlight {
  stroke-width: 10px;
  stroke: #000;
}

img {
  visibility: hidden;
}

button {
  font-size: 1.25em;
  padding: 1em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.js" integrity="sha512-n/4gHW3atM3QqRcbCn6ewmpxcLAHGaDjpEBu4xZd47N0W2oQ+6q7oc3PXstrJYXcbNU1OHdQ1T7pAP+gi5Yu8g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.2.2/html2canvas.js" integrity="sha512-Alb3nvf6wRVUhs6H8foMA8fuWAKFFretiYkk2WbrMSbAtTtNBOjKLbDIagmFVypIi4wT1pRhHwz+R/W7nU31wg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<div class="grid-container">
  <header class="header">
  
    <img class="logo" src="logo.png" alt="">

    <nav class="navbar">
      <a href=about.html class="nav-link">About</a>
      <a href=howto.html class="nav-link">How to</a>
      <a href=faqs.html class="nav-link">FAQs</a>
      <a href=contact.html class="nav-link">Contact</a>
    </nav>

  </header>
  
  
  
</div>
</div>



  <main class="main">

    <div class="wrap">
      <div id="arrow-left" class="arrow"><span>❮</span></div>
      <div id="arrow-right" class="arrow"><span>❯</span></div>
      <div id="slider">

        <div class="slide slide1">
          <div class="slide-content">
            <div id="container">
              <div class="download-container">
                <svg id="product-svg" viewBox="0 0 256 256">
                  <path id="box1" class="product" d="M24 130.25L24 235L233 235L233 25.5L24 25.5L24 130.25Z" />
                </svg>

                <img class="background-image" src="https://images.vexels.com/media/users/3/139342/isolated/lists/61cddf9cfe50f4baaa8f472c253d1cb4-basic-square-outline.png" alt="">
              </div>
            </div>

            <div class="text">image1</div>
          </div>
        </div>

        <div class="slide slide1">
          <div class="slide-content"
            <div id="container">
              <div class="download-container">
                <svg id="product-svg" viewBox="0 0 256 256">
                  <path id="box2" class="product" d="M24 130.25L24 235L233 235L233 25.5L24 25.5L24 130.25Z" />
                </svg>

                <img class="background-image" src="https://images.vexels.com/media/users/3/139342/isolated/lists/61cddf9cfe50f4baaa8f472c253d1cb4-basic-square-outline.png" alt="">
              </div>
            </div>

            <div class="text">image2</div>
          </div>
        </div>

        <button class="download-btn">Download element!</button>
        <img src="" id="created-element" />

  </main>

  <section class="color-select">
    <div data-test>
      <span class="color red">
        <span class="color-selected" style="--color: #ff6666 " data-hex="#ff6666"></span>
      </span>
    </div>
  </section>

</div>


Get this bounty!!!

#StackBounty: #javascript #css #reactjs #apexcharts #rgba Create Pattern on RGB Colors

Bounty: 50

I’m currently using Apexcharts to display a data series. In one of the options, I can select an array of colors as defined in the documentation, which is an array of strings. Obviously, passing in hex strings works just fine.

However, what I’m trying to do now is to have my data series on my graph show with patterns. I understand that I can use the fill object as defined here, but that would define a pattern for the whole graph, whereas I would like to define it for certain data only.

Since the color array is an array of strings, is there a way where I can define something like linear-gradient or something equivalent but in string format?


Get this bounty!!!

#StackBounty: #javascript #html #css #d3.js #pointer-events Adding a link inside scrolling popup disables all click events?

Bounty: 50

I have a popup I’ve created in d3.js, where it’s basically a Div that I scale to 1 on a click-event, and scale to 0 on a second click event anywhere else (i.e. click-off event).

Without being able to post all the code in a reproducible example, here’s the relevant code.

The issue:

The popup works fine, until a link is added within the popup html (this line: "hello".link("https://www.google.com")). When a click-able link is added, you can’t scroll the popup and it appears that all pointer events are disabled. I’m not sure what about adding a link would cause it to do this.

I’ve tried to use href instead of .link and it still does not work.

javaScript:

    var LeafletDiv = d3.select("#content").append("div")   
        .attr("class", "county2014Tooltip")  
        .style("opacity", 1)
        .style("scrollTop", 0)



 var events = mapG.selectAll("circle")
        .data(eventArray)
        .enter().append("circle")
        .attr("class", 'events')
        .style("display", dateMatch)
        .style("pointer-events", "auto")
        .attr("classed", "visible")
      
        .on("click", function(d) { 
            console.log('first click!')
            $('body').css({
            overflow: 'hidden'
            });

        LeafletDiv.transition()        
            .duration(200)      
            .style("opacity", .9)
            .style("transform","scale(1)")
         
                var popInfo = '<br/>' + d.EventDate
                +  '<br/>' + "hello".link("https://www.google.com") //this causes it to break
                + '<br/>'
                             
                appendText.push(popInfo+ '<br/>' + '<br/>')
                                        
                })

            LeafletDiv
                .html( appendText.join(""))
                .style("pointer-events", 'all')

CSS:

div.county2014Tooltip { 
    word-wrap: normal;
    position: absolute;
    pointer-events:none;
    overflow-y:scroll; 
    overflow-wrap: break-word;
    word-wrap: break-word;
    display:inline-block ;
}

Thank you.


Get this bounty!!!

#StackBounty: #html #css Keep hanging characters visible in spite of `line-height: 1` and `overflow: hidden`

Bounty: 50

Target

enter image description here

<div class="Card">
  <div class="Card-FullNameLabel">Gregg Sims</div>
  <div class="Card-OrganizationNameLabel">Compubotics</div>
</div>
  1. The .Card-FullNameLabel has font-size: 16px and line-height: 1.
  2. The .Card-OrganizationNameLabel has font-size: 12px and line-height: 1.
  3. The vertical space between .Card-FullNameLabel and .Card-OrganizationNameLabel must be exactly 6px.
  4. Below CSS rule must work and must NOT be changed.
.Card-FullNameLabel + .Card-OrganizationNameLabel {
  margin-top: 6px;
}
  1. Both .Card-FullNameLabel and .Card-OrganizationNameLabel must have overflow tolerance (e. g. if this content will be
    something like ÀÇĤjgpfhjklbĜiEstosTreMalfaci and so on it must not overhang from the parrent).
  2. All letters must be fully visible despite to line-height: 1.
  3. The mental arithmetic in CSS code is not allowed.

What is O’K to do: use the functionality of Pug pre-processor for markup and CSS pre-processors for styles.

🌎 Inital fiddle does not satisfied to the condition number 5: currently the card is not overflow-tolerant.

enter image description here

About line-height: 1, the bad practice

I has been repeatedly told about I must set line-height to value more than 1.

It becomes obvious that setting line-height: 1 is a bad practice. I
remind you that unitless values are font-size relative, not
content-area relative, and dealing with a virtual-area smaller than
the content-area is the origin of many of our problems.

Deep dive CSS: font metrics, line-height and vertical-align

Well, I don’t going to dispute about it. All I want is the working solution for the reaching of my target (descripted above).
The usage of it is my responsibility and I will not reсcommend this solution if you agree that line-height must be more than 1.

But why I don’t want increase the line-height so persistently?

Reason 1: The precise defining of the vertical space between two elements will become too complicated

The rule .Card-FullNameLabel + .Card-OrganizationNameLabel { margin-top: 6px; } is clear, intuitive and expresses the guidelines (represented in the picture above) by CSS. "The .Card-OrganizationNameLabel must retire from .Card-FullNameLabel by 6 pixels", and nothing more.

But what if we need to define the same vertical space between .Card-FullNameLabel and .Card-OrganizationNameLabel when line height is more than 1 (or they have the top and bottom paddings)? The value of the margin-top (visualized by non-overlayed pink area in the picture below) of .Card-FullNameLabel + .Card-OrganizationNameLabel rule now be the difference of:

  1. The desired range (6px)
  2. The extra vertical space below .Card-FullNameLabel (designated as l_b)
  3. The extra vertical space above .Card-OrganizationNameLabel (designated as l_a)

enter image description here

As I told above, the mental arithmetic is not allowed because it devalues the programming (CSS preprocessors capabilities in CSS case) and makes flexibility/maintainability impact (if we change the line-height or font-size or desired vertical space between labels, everything need to be mentally re-computed).

Although the preprocessor’s variables (today became available in native CSS) can solve this problem, it will be too complicated to maintain it. To compute the non-intersecting red pink in the image above, we need to:

  1. Variablelize the font-size of .Card-FullNameLabel
  2. Variablelize the line-height of .Card-FullNameLabel
  3. Compute the extra space below .Card-FullNameLabel.
  4. Variablelize the font-size of .Card-OrganizationNameLabel
  5. Variablelize the line-height of .Card-OrganizationNameLabel
  6. Compute the extra space below .Card-OrganizationNameLabel
  7. Variablelize the desired range between .Card-FullNameLabel and .Card-OrganizationNameLabel (6 pixels in this example).

After this, we can finally compute the margin-top for the rule .Card-FullNameLabel + .Card-OrganizationNameLabel. And same for each pair of elements like .Card-FullNameLabel and .Card-OrganizationNameLabel!! Too poor technology for the web development in 2020s.

Reason 2: It does not require for each language

In below example, the Japanese symbols are perfectly fits to line with line-height: 1 (16px):

enter image description here

I suppose same will be for the Chinese, Korean and many other languages with non-latin characters.

But: in the small percentage of cases, there the foreign symbols could be mixed:

enter image description here

If to talk about high quality, this case must be supported.

I don’t want increase the line height just for this exception. It’s OK that the vertical space between lines actually became not 6px: the tails of j or À has a small weight and it will not break the geometric aesthetics.

My efforts

Attempt 1: usage of :before and :after

The SASS-mixin TextTruncation accepts the parameter $extraSpace which adding top and bottom paddings. The :before and :after pseudo elements compensates this paddings by negative margins.

@mixin TextTruncation($extraSpace, $displayEllipsis: false) {
  
  overflow: hidden;
  white-space: nowrap;
  
  @if ($displayEllipsis) {
    text-overflow: ellipsis;
  } @else {
    text-overflow: clip;
  }
  
  padding-top: $extraSpace;
  padding-bottom: $extraSpace;
  
  &:before,
  &:after {
    content: "";
    display: block;
  }
  
  &:before {
    margin-top: -$extraSpace;
  }
  
  &:after {
    margin-bottom: -$extraSpace;
  }
}

body {
  padding: 12px;
}

* {
  line-height: 1;
  font-family: Arial, sans-serif;
}

.Card {
  
  display: flex;
  flex-direction: column;
  align-items: center;
  
  width: 240px;
  height: 320px;
  padding: 6px 12px 12px;
  
  background: white;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
}

.Card-FullNameLabel {
  
  max-width: 100%; /* Required when the flex parent has `align-items: center` */
  @include TextTruncation($extraSpace: 2px, $displayEllipsis: true);
  
  font-size: 16px;
  color: #707070;
}

.Card-OrganizationNameLabel {
  
  max-width: 100%; /* Required when the flex parent has `align-items: center` */
  @include TextTruncation($extraSpace: 2px, $displayEllipsis: true);
  
  font-size: 12px;
  color: #A2A2A2;
}

.Card-FullNameLabel + .Card-OrganizationNameLabel {
  margin-top: 6px;
}

Unfortunately, It does not work: the effect is same as if no margins and no paddings has been defined:

enter image description here

🌎 CodePen

Attempt 2: usage of the wrapper

If the combination of overflow-x: hidden and overflow-y: visible works, it was the solution. But it does no work and this problem has been considered in the question CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue.

I want to avid the wrappers as possible, but here it looks like the wrapper will be the last resort. To avoid of writing two tags each time, I created the Pug mixin:

mixin SingleLineLabel

  span.SingleLineLabel&attributes(attributes)
    span.SingleLineLabel-Text
      block

Well, the SingleLineLabel now a component. Besides the Pug mixin it’s required to define the basic styles and SASS mixin allows to customize the label individually:

// Constant styles
.SingleLineLabel {

  overflow-y: visible;

  &:before,
  &:after {
    content: "";
    display: block;
  }


  &-Text {
    display: block;
    overflow-x: hidden;
    white-space: nowrap;
  }
}

// Variable styles
@mixin SingleLineLabel($truncatedVerticalSpaceCompensation, $displayEllipsis: false) {
  
  &:before {
    margin-top: -$truncatedVerticalSpaceCompensation
  }

  &:after {
    margin-bottom: -$truncatedVerticalSpaceCompensation
  }
  

  .SingleLineLabel-Text {
    
    padding-top: $truncatedVerticalSpaceCompensation;
    padding-bottom: $truncatedVerticalSpaceCompensation;
    
    @if ($displayEllipsis) {
      text-overflow: ellipsis;
    } @else {
      text-overflow: clip;
    }
  }
}

Now we can apply it:

.Card-FullNameLabel {
  
  max-width: 100%; /* Required when the flex parent has `align-items: center` */
  @include SingleLineLabel($truncatedVerticalSpaceCompensation: 1px, $displayEllipsis: true);
  
  font-size: 16px;
  color: #707070;
}

.Card-OrganizationNameLabel {
  
  max-width: 100%; /* Required when the flex parent has `align-items: center` */
  @include SingleLineLabel($truncatedVerticalSpaceCompensation: 2px, $displayEllipsis: true);
  
  font-size: 12px;
  color: #A2A2A2;
}

.Card-FullNameLabel + .Card-OrganizationNameLabel {
  margin-top: 6px;
}

It seems like the target has been reached:

enter image description here

🌎 CodePen

Unfortunately, it has the bug which occurrence regularity is unclear.
Sometimes the small vertical scrollbar appearing.

enter image description here

I really don’t know how to reproduce it, but in the past experiment it has occurred, for example, if to switch the browser to device simulation mode by development tools and then exit from this mode. Most likely, you will not get the same effect if repeat same experiment in fiddle.

Finally

The solution based on your great answers will be included to growing @yamato-daiwa/frontend library.

If you have the full list of the problematic symbols like g, p, À, Ĥ and so on, please share it – I’ll use it for the tests and also add them to the future pug functionality for the overflow tolerance testing.


Get this bounty!!!

#StackBounty: #firefox #browser #bookmarks #css Firefox: modify bookmark dialog

Bounty: 100

When I want to add a bookmark in Firefox, I click on the star icon in the URL bar (bookmark this page), which brings up this pathetic bookmark window:

enter image description here

The window is extremely small, which makes navigation tedious. Also, it always preselects the "Other Bookmarks" as default location to store the bookmark. And the window has no resize button. Whatever evil person designed this, clearly wanted to make the experience as unpleasant as possible.

I would like to ask, if it is possible to:

  1. make the bookmark window permanently bigger

  2. instead of "Other Bookmarks" preselected, have the "Choose" option preselected, so that I can go straigt to my bookmark hierarchy tree to save, instead of having to switch to "Choose" each time.

  3. disable/hide the "Tags" part of the bookmark. I have no idea what that is for, and I don’t use it.

Perhaps some of these changes could be achieved by editing the userChrome.css or userContent.css files in Firefox profile?

I am using Firefox ESR 78.12


Get this bounty!!!

#StackBounty: #javascript #css #reactjs #flexbox #chakra-ui Flex box of two charts is overflowing screen

Bounty: 50

I have a two charts on my page. Together, they take up the entire screen height through Flex (a css flexbox). The first chart is collapsible via an Accordion.

How we can make the first chart fill up 30% of the screen height, and the second chart fill up the remaining ~70%?

I was able to do this successfully when these two charts are the only things on the page:

enter image description here

// This works well.
<Flex direction="column" height="100vh">
  <Accordion allowToggle>
    <AccordionItem>
      <h2>
        <AccordionButton
          h={0}
          borderRadius="md"
          borderWidth="0px"
          _focus={{ boxShadow: "none" }}
        >
          <Box
            textAlign="left"
            h={3}
            _focus={{ boxShadow: "none" }}
          ></Box>
          <AccordionIcon />
        </AccordionButton>
      </h2>
      <AccordionPanel p="0">
        <Box height="30vh">
          <ThreeDataPoint />
        </Box>
      </AccordionPanel>
    </AccordionItem>
  </Accordion>
  <Box flex="1">
    <ThreeDataPoint />
  </Box>
</Flex>

However, if I combine a row and column flex box together, it doesn’t work. The second chart overflows the screen’s height.

Here’s the CODESANDBOX

And here’s a screenshot:

enter image description here


Get this bounty!!!