issue Archives - TortoiseFeel

Hello,

Welcome to the post, if you are facing similar issue on your webpage or simple app where you are trying to change the HTML input element placeholder text color according to your design or theme and changes are not applying you followed very basic documentation from MDW web docs placeholder

What is causing this issue is simple, I was facing similar issue with search field and I am using Chrome browser mainly as my default browser, so I haven’t check it was behaving right or not, so I was looking for the answers.

I have tried this solution from stakeoverflow added simple snippet from here but it still not showing reflection of change. so I though, I am writing my CSS code using SCSS, maybe I need to add in some other way or format syntax-ly, so stumbled upon on another stakeoverflow page, added the mixin in my scss code, hope to see the reflection of color change to placeholder text of input field, sorry this time it didn’t worked too,

I was wondering how to get the fix, so in my browser inspect window, i saw one selector [type=search] and some styles applying via _reboot.scss file, I tried to open that file from my application it was there, because I am using bootstrap, so its coming through that from node_modules dynamically maybe.

So in my main.scss, file where I was earlier adding css code for placeholder text “Search Author”) color to white, but it was still in dark grey color not taking effects

SCSS code

after I thought and tried to add the placeholder wrapping [type=search] selector it worked like a charm!

Finally worked, placeholder text color change to search type input field in HTML!!!

I hope you will get to learn from this simple issue and try to explore something own to figure out the issue we face.

Something some simple things are hard to figure out due to some companies work hard building great stuff making simple stuffs complicated to be fix later!

Anyways happy learning! Enjoy.

P.S

Later found simple text placeholder color text was not taking effect, maybe scss is not compiling the placeholder css code as default placeholder target selector, added below code to target text field, select and textarea individually and it started working for different parts of the application where used.

Hello,

Hope this is very interesting question of scenario you might be facing to solve with next js and

when you don’t want to use “function getServerSideProps” to pass dynamic (data as) props to the page components
when you don’t want too make a extra API calls to generate the paths for products or whatever list of thing you are creating in “function getStaticPaths”

Here is the quick things we need to work out to work this out of box for specially the scenario were are showing product detail view page which is of route like in Nextjs as “page/product/[id].js“

First in function getStaticPaths() we just need to do this and pass fallback as “true” as we our dynamic path is not pre-rendered!

export async function getStaticPaths() {
    // Empty array since paths will be dynamically created in getStaticProps
    return {
        paths: [],
        fallback: true, // Set to true if there are dynamic paths that are not pre-rendered !! 
    };
};

Next, we need to edit our “getStaticProps” function and then voila;


export async function getStaticProps({ params }) {
    const product = await getProduct(params && params.id);
    if (!product) {
        return {
            redirect: {
                destination: '/',
                permanent: false,
            },
        }
    }

    return {
        props: {
            product,
            error: resp.error ? true : false
        }
    };
}

Boom you are done, and just use those props in your page component like



return (<PhotoProvider
        key={'photoprovider-key-' + product?.id}
        speed={() => 600}
        easing={(type) => (type === 2 ? '' : 'cubic-bezier(.25, 1, .30, 1)')}>

/*...other codes*/
</PhotoProvider>

you will find you page up and working, fine!

Hope this simple steps helps to solve our complex situations arises in the development work of software building on planet earth!

I would also like to the above situation, why we can’t just do the same thing simply with getServerSideProps in single function, I am facing the issue to build using next build && next export for android package, as dynamics cannot be rendered as html files due to getServerSideProps sitting in between, and also as per the Next JS docs we can’t do anything what I have found of my learnings.

Happy Learning! Thanks for reading.

Keep coding & Develop Wonderful.

To Follow help out to know: uidevwork