Tag: css

Categories
Learning Tech

Placeholder input text color not changing HTML, browser chrome, how to fix?

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.

Categories
Tech

Show 3 cards next to each other and rest follow below similar, how should I write code in css using flex?

Hello,

To display 3 cards next to each other using CSS flex, you can use the flex-wrap property with a value of wrap, combined with the flex property to set the size of each card. Here is an example:

<div class="card-container">
  <div class="card">Card 1</div>
  <div class="card">Card 2</div>
  <div class="card">Card 3</div>
  <div class="card">Card 4</div>
  <div class="card">Card 5</div>
  <div class="card">Card 6</div>
  <div class="card">Card 7</div>
  <div class="card">Card 8</div>
  <div class="card">Card 9</div>
</div>

CSS:

.card-container {
  display: flex;
  flex-wrap: wrap;
}

.card {
  flex-basis: calc(33.33% - 10px); /* Set the width of each card to one-third of the container minus some margin */
  margin-right: 10px; /* Add some margin between the cards */
  margin-bottom: 10px; /* Add some margin below the cards */
  background-color: #f5f5f5;
  padding: 10px;
  box-sizing: border-box;
}

In this example, the card-container element is set to display: flex, which makes its child elements align horizontally in a row. The flex-wrap: wrap property allows the cards to wrap onto the next row when there isn’t enough space for them all to fit on one row. The flex-basis property is used to set the width of each card to one-third of the container minus some margin, and the margin-right and margin-bottom properties add some spacing between the cards. The box-sizing: border-box property ensures that the padding of each card is included in its width calculation.

Source: AI Interaction Channel

Happy Learning!

Categories
Learning

How we can write complex SCSS mixin with if else condition and null value passed or on no value passed?

Hello

Welcome, to this short post on writing/learning a little complex SCSS Mixin for your project/learning.

To keep it straight and short here it is the code example:

@mixin setWH($w: false, $h: false, $unit: false, $isImportant: false) {
   @if $w AND $unit AND $isImportant {
       width: unquote($w + $unit + ' !important');
   } @else if $w AND $isImportant {
       width: $w + ' !important';
   }
   @else if $w AND $unit {
       width: $w + $unit;
   } @else if $w {
       width: $w;
   }
 
   @if $h AND $unit AND $isImportant {
       height: unquote($h + $unit + ' !important');
   } @else if $h AND $isImportant {
       width: unquote($h + ' !important');
   } @else if $h AND $unit {
       height: $h + $unit;
   } @else if $h {
       height: $h;
   }
}

Usage Examples:


//Usage examples:
.myMixinTest1 {
  @include setWH(15, 5, 'em');
}

.myMixinTest2 {
  @include setWH(6, 4.3, "rem");
}

.myMixinTest3 {
  @include setWH(60, false, "px");
}

.myMixinTest4 {
  @include setWH(false, 30, "px");
}

.myMixinTest5 {
  @include setWH(27, 3, "rem", true);
}

It looks complex if you pay a little bit close look, its most simple.

You may extend more with if else or else conditions. I just kept to that extend as not require for me any else condition for error handling or something else to output.

A small ~codepen~ in action!

Hope you like & enjoyed learning!

Happy Learning!