empty Posts - Answer Overflow

empty

•Created by empty on 11/5/2024 in #front-end

how to select the last div that has class 'visible' in a container using CSS selector?

Hi guys, i want to select the last div has class visible using css selector. Is this possible? Here is my example:

<div class="container">
  <div class="visible">Item 1</div>
  <div class="visible">Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
</div>
// => Item 2
<div class="container">
  <div class="visible">Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
</div>
// => Item 1

<div class="container">
  <div class="visible">Item 1</div>
  <div class="visible">Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
</div>
// => Item 2
<div class="container">
  <div class="visible">Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
</div>
// => Item 1

9 replies

KPCKevin Powell - Community

•Created by empty on 11/4/2024 in #front-end

How to make a div in each card item equal in height

11 replies

KPCKevin Powell - Community

•Created by empty on 10/10/2024 in #front-end

select input with empty value using css

HI guys, I want to select an input element which is empty by using css. I tried :valid and required attribute. But the field is optional, I wonder is there other ways to select the input with empty value?

div:has(input:empty) p{
// do something
}
<input required />

div:has(input:empty) p{
// do something
}
<input required />

48 replies

KPCKevin Powell - Community

•Created by empty on 9/26/2024 in #front-end

style for sub item

18 replies

KPCKevin Powell - Community

•Created by empty on 9/24/2024 in #front-end

grid item auto stretch

10 replies

KPCKevin Powell - Community

•Created by empty on 9/14/2024 in #front-end

stroke text

5 replies

KPCKevin Powell - Community

•Created by empty on 9/5/2024 in #front-end

how to center grid item horizontally

11 replies

KPCKevin Powell - Community

•Created by empty on 8/29/2024 in #front-end

how to style for long text

4 replies

KPCKevin Powell - Community

•Created by empty on 8/28/2024 in #front-end

How to set max-width to tbody or tr

Hi guys. I want to set max width to a row of a row but it does not work. Can you help me?

 .wrapper {
        width: 100%;
        table-layout: fixed;
        background-color: var(--clr-secondary);
        padding-block: 60px;
        padding-inline: 100px;
        & tr {
          max-width: 856px;
        }
        & tbody {
          max-width: 856px;
        }
      }

 <table class="wrapper">
      <tbody>
        <tr>
          <td><img src="./assets/tick.png" alt="Tick Image" /></td>
        </tr>
      </tbody>
    </table>

 .wrapper {
        width: 100%;
        table-layout: fixed;
        background-color: var(--clr-secondary);
        padding-block: 60px;
        padding-inline: 100px;
        & tr {
          max-width: 856px;
        }
        & tbody {
          max-width: 856px;
        }
      }

 <table class="wrapper">
      <tbody>
        <tr>
          <td><img src="./assets/tick.png" alt="Tick Image" /></td>
        </tr>
      </tbody>
    </table>

15 replies

KPCKevin Powell - Community

•Created by empty on 8/12/2024 in #front-end

infite scroll text animation

Hi guys, I want to create a infite scroll text animation. But it does not work as I expect. First, It does not start at the begining of the wrapper. Second, It creates a weird effect at center of the wrapper. Can anyone help me? Here is codesandbox https://codesandbox.io/p/sandbox/infite-scroll-8clmdx?file=%2Fsrc%2Fstyles.css%3A12%2C16

2 replies

KPCKevin Powell - Community

•Created by empty on 7/17/2024 in #front-end

Tabs component of MUI breaks the UI when I resize the window

2 replies

KPCKevin Powell - Community

•Created by empty on 7/4/2024 in #front-end

problem with input type number

Hi guys, when the value of quantity is 0 and I enter 1 the input field display "01" while the quantity is 1. Can anyone help me explain why ? I'm using MUI. This case only occurs when I use type number. With type text, it worked

  const [quantity, setQuantity] = useState(0);
  const [stock, setStock] = useState(0);

  const handleOnChangeQuantity = (
    e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
  ) => {
    if (!e.target.value) return setQuantity(0);
    if (+e.target.value > stock) return setQuantity(stock);
    setQuantity(+e.target.value);
  };

  <TextFieldCustom
                type="number"
                fullWidth
                value={quantity}
                onChange={handleOnChangeQuantity}
                className={styles["input-number"]}
                inputProps={{ min: 0, max: stock }}
   />

  const [quantity, setQuantity] = useState(0);
  const [stock, setStock] = useState(0);

  const handleOnChangeQuantity = (
    e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
  ) => {
    if (!e.target.value) return setQuantity(0);
    if (+e.target.value > stock) return setQuantity(stock);
    setQuantity(+e.target.value);
  };

  <TextFieldCustom
                type="number"
                fullWidth
                value={quantity}
                onChange={handleOnChangeQuantity}
                className={styles["input-number"]}
                inputProps={{ min: 0, max: stock }}
   />

8 replies

KPCKevin Powell - Community

•Created by empty on 7/3/2024 in #front-end

truncate style does not work

7 replies

KPCKevin Powell - Community

•Created by empty on 6/26/2024 in #front-end

Problem with transition height

Hi guys, I'm trying to hide the tabs on scroll down and show on scroll up but I'm facing this problem. Can anyone help me? I'm using MUI and this is how I toggle the height.

<Box
 sx={{
   display: "grid",
   gridTemplateRows: isShowTabs ? "1fr" : "0fr",
   transition: "500ms grid-template-rows ease",
 }}
 >
  ......
 </Box>

<Box
 sx={{
   display: "grid",
   gridTemplateRows: isShowTabs ? "1fr" : "0fr",
   transition: "500ms grid-template-rows ease",
 }}
 >
  ......
 </Box>

18 replies

KPCKevin Powell - Community

•Created by empty on 6/19/2024 in #front-end

infinite scroll

Hi guys, I'm facing a problem with react-infinite-scroll-component. When I scroll to the bottom the fetchNext func is not called. Can anyone help me?

const WishList = () => {
  const [productList, setProductList] = useState<WishListProductResponse>();
  const [pagination, setPagination] = useState({
    page: 1,
    limit: 4,
  });

  const hasMore =
    typeof productList?.totalPages === "number"
      ? productList.totalPages !== pagination.page
      : false;

  const fetchNext = () => {
    setPagination({
      ...pagination,
      page: pagination.page + 1,
    });
  };

 useEffect(() => {
    const loadWishList = async () => {
      const result = await callAPIWithToken.get(
        "/api/merchant/products/favorite/",
        {
          params: {
            limit: pagination.limit,
            page: pagination.page,
          },
        }
      );

      if (result.data.success) {
        if (!productList?.data) {
          setProductList(result.data);
        } else {
          setProductList({
            ...result.data,
            data: [...productList.data, ...result.data.data],
          });
        }
      }
    };
    loadWishList();
  }, [pagination.page]);


 return (
    <>
        <>
        <InfiniteScroll
          dataLength={productList?.totalItems}
          next={fetchNext}
          hasMore={hasMore}
          height="100%"
          loader={
            <LinearProgress
              style={{
                marginBottom: "20px",
                width: "calc(100% - 16px)",
              }}
            />
          }
        >
          <Box mb={4}>
            <Grid container spacing={2}>
              {productList?.data.map((item, index) => (
               ....
              ))}
            </Grid>
          </Box>
        </InfiniteScroll>
      </>
    </>
  );
};

export default WishList;

const WishList = () => {
  const [productList, setProductList] = useState<WishListProductResponse>();
  const [pagination, setPagination] = useState({
    page: 1,
    limit: 4,
  });

  const hasMore =
    typeof productList?.totalPages === "number"
      ? productList.totalPages !== pagination.page
      : false;

  const fetchNext = () => {
    setPagination({
      ...pagination,
      page: pagination.page + 1,
    });
  };

 useEffect(() => {
    const loadWishList = async () => {
      const result = await callAPIWithToken.get(
        "/api/merchant/products/favorite/",
        {
          params: {
            limit: pagination.limit,
            page: pagination.page,
          },
        }
      );

      if (result.data.success) {
        if (!productList?.data) {
          setProductList(result.data);
        } else {
          setProductList({
            ...result.data,
            data: [...productList.data, ...result.data.data],
          });
        }
      }
    };
    loadWishList();
  }, [pagination.page]);


 return (
    <>
        <>
        <InfiniteScroll
          dataLength={productList?.totalItems}
          next={fetchNext}
          hasMore={hasMore}
          height="100%"
          loader={
            <LinearProgress
              style={{
                marginBottom: "20px",
                width: "calc(100% - 16px)",
              }}
            />
          }
        >
          <Box mb={4}>
            <Grid container spacing={2}>
              {productList?.data.map((item, index) => (
               ....
              ))}
            </Grid>
          </Box>
        </InfiniteScroll>
      </>
    </>
  );
};

export default WishList;

1 replies

KPCKevin Powell - Community

•Created by empty on 4/22/2024 in #front-end

get Text and link (if exists) when users highlight text on screen.

16 replies

KPCKevin Powell - Community

•Created by empty on 4/19/2024 in #front-end

Sticky position

6 replies

KPCKevin Powell - Community

•Created by empty on 3/12/2024 in #front-end

Can not move around on mobile devices if user touch input field

Hi guys, I'm facing a problem. When my app is on mobile and I zoom in the screen I can not swipe left and right if I touch the input field. Is there any solution to fix it? I have try to use touch-action: none on input field but it does not work

1 replies

KPCKevin Powell - Community

•Created by empty on 1/31/2024 in #front-end

Styling position

Hi guys, I'm trying to style the same position for the money after the text without set a fixed width. For example: Subtotal: $100 Total : $100.000 Is there any way to solve this problem? here is the codepen https://codepen.io/minh-thinh/pen/rNRJZNW

6 replies

Gaming

Programming