pens | My UI , UX and CSS playground | User Interface library

I am trying to read an excel file that has a column that consists of both numerical information and headers. Below I enclose the screenshot of this excel file:

As you can see, in the column "Specification" I have rows with numbers and rows with string "Model ...". I need to load this file and access information about every model, for example extract information about the number of sold Model 1 blue fountain pens in set of 2 (cell G13 on the screenshot).

What I tried was to load the table through pd.read_excel(path), but I have no idea how to group this data into data about particular models.

I also tried this:

I have very weird behavior that happens in both Google Chrome and Firefox.

I have a table with a gradient background that creates zebra stripes. The cells have a white background and I use mix blend mode to hide the cells that are sticky so only one sticky cell that is visible.

The problem is that when the table cell is sticky, blend mode doesn't work properly and you see multiple cells at once. But if I put div inside the cell and make the div sticky it magically works. Any idea why?

The difference between the table is this:

As the title says, I'm trying to have two elements, element A and element B. I want to have element B to only show when element A is hovered on, but I also want element B to follow the cursor without jittering.

I can get the hovering/showing part to work on it's own, and I can get the following cursor part to work on it's own, but I can't seem to put them together without using offsetX/offsetY, which causes it to jitter.

for some reason the code snippet doesn't work correctly, just copy the code into a file.

The HTML:

I have a custom made tooltip plugin which should be opened by another plugin. But the plugin opens only after the second click and I can't figure out what the problem is.

The whole thing can be tested under. You have to click on the second input Field.

I am trying to recreate this https://www.paypal.com/donate/?hosted_button_id=JA4LPSED5LVCG which is the standard hosted PayPal donation button. It has preset amounts, let the user add their intent(which program to support), and recurring monthly donations. I started out with jQuery to target elements and pass the preset amounts and that worked but since I've gone with a vanilla js approach. My question is this, am I even setting this up properly using the PP SDK? Or do I need to do a different kind of integration with the API in order to support the recurring donations.

At this point my code is more broken than when I started out with jQuery(At least I was able to pass the preset amounts, but not the donation intent). I have set up a Codepen here and would love any and all feedback. https://codepen.io/tripdog/pen/dyvNeEV

I have stored turtle-graphics functions in list and am using random functions to call it to create a random-path, however code does not work.

Can someone please have a look on this and provide suggestion.

I am trying to implement a flexbox layout that works as follows:

• A flexbox container with flex-direction: row contains two children.

• The parent should only be as big as it needs to to accommodate the children (achieved via display: inline-flex).

• The children contain text of different lengths, which does not wrap (i.e. all on one line).

• The children should be exactly the same width, which is the width of the widest of the two texts. This is very important, and precludes the usage of flex-basis: auto, because that will cause the length of the two texts to vary rather than being exactly the same.

In order to make the children the exact same width, determined by the largest of the two, I am using flex: 1 0 0px.

The layout works exactly as expected, except that the text only seems to grow to the width as if it didn't have white-space: nowrap! The following screenshot from this codepen that I've created illustrates the problem:

Is there any way to implement this exact behaviour without line wrapping? I know that I can do something like add a fixed width, but I want to know if this is possible to implement dynamically (always growing to exactly the correct width of arbitrary text) using flexbox.

Thanks

I am using the same example line chart shown here. However, I have black fill under the lines on my chart. How do I remove the black fill from under the lines. In the documentation under LineChartOptions there it only shows two configurable options, HidePoints and LinePoint. Here is my example. The same thing happens to my time series chart. Thank you.

Please, how can I add a class to each section when scrolling to it my problem is that it happens only in the first section. I am a beginner and the problem is here