angell1389 Posts - Answer Overflow

angell1389

•Created by angell1389 on 11/5/2024 in #ui-ux

How to reduce the gaps between the firstRow and SecondRow, When the 2nd column height increases

When 2nd column height increases, it takes lot of gap between firstRow and secondRow that shouldnt be the case, The first and secondRow gap should be 1rem, that is it. https://codepen.io/Lohitha-Yalavarthi/pen/poMOdVX

2 replies

KPCKevin Powell - Community

•Created by angell1389 on 7/2/2024 in #front-end

When switching from one div to another the elements are jumpy why?

is this the behaviour of div elements by default, when converted to button doesn't seem to have similiar issue why? and how to solve this jumpy issue when using div and would like to know why it might occuring be this way?

6 replies

KPCKevin Powell - Community

•Created by angell1389 on 5/29/2024 in #front-end

Using RollUp, trying to import images

I have shared module that is bundled as a library and then installed in another MFE. The shared module is bundled using rollup, I tried different plugins for importing image the build is sucessful, But then I use the component which had images from shared module in MFE the other content loads but images doesn't load for that component that had images.

1 replies

KPCKevin Powell - Community

•Created by angell1389 on 4/12/2024 in #front-end

Font-family when applied to body tag shouldnt it apply for all the elements thats under the body?

I am seeing an issue where there is a font-family specified in body tag, but it doesnt take to text area placeholder , is there a reason why and the only way to fix that issue it to apply specifically font-family to placeholder?

41 replies

KPCKevin Powell - Community

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

I am looking for a way to merge pdf using nodejs or reactjs server side

I found one, but want to get thoughts outside of my mind.

3 replies

KPCKevin Powell - Community

•Created by angell1389 on 3/13/2024 in #front-end

React, need to avoid multiple API requests.

I have toggle button , on toggle if its on then it opens side drawer, So API requests need to be called only on opening of side drawer and show the response coming back from the API. (so everytime it clicks on toggle button it should avoid calling another api - if there is already one running already)

2 replies

KPCKevin Powell - Community

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

using styled components override the styles of other component

I had dialog

export const Dialog : React.FunctionComponent<Props> = (props) => {
    return (
        <DialogContainer>
          <h1>{props.title}</h1>
          <div className="content">{props.children} </div>
          <Divider />
          <div className="footer"> {props.footer} </div>
        </DialogContainer>
    )
}

and DialogContainer contains

&:before,
        &:after {
            content: "";
            height: 0;
            width: 0;
        }
        &:before {
            border-left: 14px solid transparent;
            border-right: 14px solid transparent;
            border-bottom: 19px solid ${theme.filter.border};
            position: absolute;
            top: -18px;
            right: -1px;
        }
        &:after {
            border-left: 12px solid transparent;
            border-right: 12px solid transparent;
            border-bottom: 17px solid ${theme.filter.background};
            position: absolute;
            top: -17px;
            left: 1px;
        }

and I m using in other component const ResponseDialog = styled(Dialog)` , so i want the ResponseDialog to override the before and after.

2 replies

KPCKevin Powell - Community

•Created by angell1389 on 2/22/2024 in #os-and-tools

what are the different options in Pendo (Everyone and exclude accounts and visitors) mean?

I am trying to understand what are this different options mean?

1 replies

KPCKevin Powell - Community

•Created by angell1389 on 2/14/2024 in #front-end

I got to call 4 api calls using useQuery - 4 different query Key

const { data1, isLoading } = useQuery('posts1', fetchPosts); const { data2, isLoading } = useQuery('posts2', fetchPosts); const { data3, isLoading } = useQuery('posts3', fetchPosts); const { data4, isLoading } = useQuery('posts4', fetchPosts); - I need to refetch this 4 at once on click of the button. How can I do that using useQuery option only.

1 replies

KPCKevin Powell - Community

•Created by angell1389 on 2/12/2024 in #front-end

I want the fixed header and fixed footer and content to not over lap and to scroll

https://codepen.io/Lohitha-Yalavarthi/pen/bGZQEEB

14 replies

KPCKevin Powell - Community

•Created by angell1389 on 2/11/2024 in #front-end

Footer (How to show the footer stick to the bottom (even when the console is opened)

I added the position: fixed and bottom : 0 but then the footer stick to the bottom, but when I open the console, the footer shows on the top of the content - would the better option be adding margin-top or any other suggestions? If I open the console. the content scrolls but the footer shows on the top of the content

50 replies

KPCKevin Powell - Community

•Created by angell1389 on 1/22/2024 in #front-end

Hi, How to create this.

10 replies

KPCKevin Powell - Community

•Created by angell1389 on 1/18/2024 in #front-end

If the grid-items had different heights and gap had to be between them is of 20px.

In the below codepen, the gap shows too much between, how to make sure that row gap and column gap is exactly 20px. https://codepen.io/Lohitha-Yalavarthi/pen/JjzWzVG The gap b.w 1 and 4 should be 40px how to do that? and every other column and row gap should be 40px , irrespective how different heights of each cards are adjusted for grid-items and same with 3 and 6 and each card should continue to have its original height.

9 replies

KPCKevin Powell - Community

•Created by angell1389 on 1/15/2024 in #front-end

How to align the header and footer for a page

39 replies

KPCKevin Powell - Community

•Created by angell1389 on 5/3/2023 in #os-and-tools

IntelliJ tips

Does anyone have IntelliJ idea shortcuts that you use everyday #os-and-tools

1 replies

KPCKevin Powell - Community

•Created by angell1389 on 3/3/2023 in #front-end

Is there a site to solve challenges in react

#react

2 replies

KPCKevin Powell - Community

•Created by angell1389 on 2/15/2023 in #front-end

How to answer the best project that you worked in JavaScript?

I did work a lot of projects before like this (Student and mentor project - where student asks a question and mentor answers questions, students questions are matched to mentors based on their ratings and subjects that they have in their profile The tech stack we used, we had mobile app and web app? Web app - is using react just for admin to view the questions asked by student and answered by mentors and some other extra functionalities Mobile App- I was involved in creating screens using React Native and mostly not involved in the back end part -So I hardly know how they implemented notifications in React Native to received for mentors when questions matched? And a little welcome page once they log in. -I can figure it out the front end or mobile part, but I need help on back end part Firebase - is the database they are using Back end - they are using Express.js to create APIs to do the logic like the one matching student to mentor based on ratings checking the conditions by checking the criteria Questions>

What apis might be possible to create in this case. if there are no firebase apis

- and there is a cron job written to match mentors online every 5 min in GCP (google cloud provider)- it was configured by someone else I was asked in an interview that if the questions were clicked by two mentors at the same time when they received questions, what would you do ? I couldn't think of any solution for that, I got answers like I would set a flag in database where answering is true so that we disable it for another mentor. But they asked, can we do this better? How do we answer that - I remember doing this scenario, but I remember very vividly can't create any on the spot? -If we were to create the design for this whole project again like, what stack would be better for today's world ? -If possible, can someone explain your project what's the tech stack that you are using #front-end #back-end

1 replies

KPCKevin Powell - Community

•Created by angell1389 on 1/8/2023 in #front-end

what's the VS Code extension you are using for autocomplete HTML tags

#When we try to add the extension, for VS Code, how do we know if they are maintaining it and still make code fixes for it in the future, and they are updating? -Is it through (#change log) ?? #html-and-css

4 replies

KPCKevin Powell - Community

•Created by angell1389 on 12/4/2022 in #front-end

React-Site navigation query

#javascript If the site has to navigate by default, localhost:3000/abcd instead of localhost:3000 ,not using react-route . Index.html have to load in the localhost:3000/abcd instead of loading in localhost:3000/ how can we do that?

3 replies

KPCKevin Powell - Community

•Created by angell1389 on 11/10/2022 in #ui-ux

Ideas of how to create list for mobile (2 buttons, 3 texts and 1 image and text)

Hi, I am trying to develop React Native app (I have GitHub users API) I am using the response data to display list, and this data in a list have Image-avatar image URL, Text-username, name, description, Buttons-followers - followers count and following - the following count So I tried designing my list as left handle side - tried putting the image and at the bottom of the image I put the username middle - I tried putting the name, description right-hand side buttons contain followers count with text followers Button contains the following count with text following I want ideas on how this list can be created with good design.

49 replies

Gaming

Programming