Get 2024 Templates Mega Bundle!19 Bootstrap HTML, Vue & React Templates + 3 Vector Sets
Get for 99$

In Metronic 8.2.2 Bug in style.react.scss file


the border: 1px solid var(--bs-gray-300) ; , box-shadow: none; this line are over written
that is cauzing the boder to dispaly nont



Old code
.react-select-styled .react-select {
&__control {
--bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2378829D' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
border-color: var(--bs-gray-400);
width: 100% ;
font-size: 1.1rem ;
font-weight: 500 ;
font-family: inherit;
line-height: 1.5 ;
color: var(--bs-gray-700) ;
appearance: none ;
background-color: var(--bs-body-bg) ;
background-image: var(--bs-form-select-bg-img),var(--bs-form-select-bg-icon,none) ;
background-repeat: no-repeat ;
background-position: right 1rem center ;
background-size: 16px 12px ;
border: 1px solid var(--bs-gray-300) ;
border-radius: 0.475rem ;
box-shadow: none;
transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
border: 0;
box-shadow: 'none';

&--is-disabled {
background-color: $form-select-disabled-bg;
border-color: $form-select-disabled-border-color;

.react-select__placeholder {
color: $form-select-disabled-color;
}
}

&--is-focused {
background-color: var(--#{$prefix}gray-200);
}
}


FIX


.react-select-styled .react-select {
&__control {
--bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2378829D' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
border-color: var(--bs-gray-400);
width: 100% ;
font-size: 1.1rem ;
font-weight: 500 ;
font-family: inherit;
line-height: 1.5 ;
color: var(--bs-gray-700) ;
appearance: none ;
background-color: var(--bs-body-bg) ;
background-image: var(--bs-form-select-bg-img),var(--bs-form-select-bg-icon,none) ;
background-repeat: no-repeat ;
background-position: right 1rem center ;
background-size: 16px 12px ;
border: 1px solid var(--bs-gray-300) ;
border-radius: 0.475rem ;
box-shadow: none;
transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;


&--is-disabled {
background-color: $form-select-disabled-bg;
border-color: $form-select-disabled-border-color;

.react-select__placeholder {
color: $form-select-disabled-color;
}
}


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (3)


Thanks for showing us the way to fix bug. It's so great finding the solution here.
emoji



You know, I agree with you. I also haven’t used the services of https://www.academicghostwriter.org/ before and I really regret it. These are true professionals in their field. Any written work is presented with high uniqueness and literacy. I'm glad I came across this service.



Hi,

Thank you for your feedback.

We will check this issue and include fix in the next Metronic release.

Regards,
Lauris Stepanovs,
Keenthemes Support Team


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(