I have an input field defined by Algolia InstantSearch v3.35.1 widget ais-search-box that is not responding to overrides in my custom .css file.
I show the relevant info below. Looking at the input field element using the browser debugger, it does appear that the correct widget style to override is input.ais-SearchBox-input. The style override also appears correct, having successfully done it in other areas.
Any ideas on what my mistake is?
Thanks,
Bob
Snip from Browser Debugger
Widget Style
.ais-SearchBox-input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding: 0.3rem 1.7rem;
width: 100%;
position: relative;
background-color: #fff;
border: 1px solid #c4c8d8;
border-radius: 5px; }
.ais-SearchBox-input::-webkit-input-placeholder {
color: #a5aed1; }
.ais-SearchBox-input::-moz-placeholder {
color: #a5aed1; }
.ais-SearchBox-input:-ms-input-placeholder {
color: #a5aed1; }
.ais-SearchBox-input:-moz-placeholder {
color: #a5aed1; }
Override Style - tmd_basic.css
.mySearchField .input.ais-SearchBox-input{
font-size: 14px;
font-weight: 600;
padding-left: 5px;
padding-bottom: 10px;
background-color: red;
}
search.component.ts
import {Component, OnInit} from '#angular/core';
import {FadeInTop} from "../../shared/animations/fade-in-top.decorator";
import {ActivatedRoute} from '#angular/router';
import algoliasearch from 'algoliasearch/lite';
#FadeInTop()
#Component({
selector: 'app-search',
templateUrl: './search.component.html',
styleUrls: ['../../../assets/css/tmd_basic.css']
})
export class SearchComponent implements OnInit {
search.component.html
<ais-instantsearch [config]="config">
<ais-search-box placeholder="Let's find something on TMD..." class="mySearchField"></ais-search-box>
</ais-instantsearch>
Try the below CSS.
mySearchField .ais-SearchBox-input{
font-size: 14px !important;
font-weight: 600 !important;
padding-left: 5px !important;
padding-bottom: 10px !important;
background-color: red !important;
}
Related
I am building a react video component based on VideoJS and I used to style VideoJS player using a stylesheet of mine but since I import it as recommended by Next.js documentation, some class targeting seem not to work properly and my custom CSS does not apply to .video-js css components.
This works:
.video {
font-family: 'Inter', -apple-system, Helvetica;
font-weight: bold;
}
.video *:before {
text-shadow: 1px 1px 7px rgba(10, 10, 10, 0.5);
}
This doesn't work:
/* Big play button */
.video .vjs-big-play-button {
height: 2em;
width: 2em;
font-size: 5em;
line-height: 2em;
border: none !important;
border-radius: 9999px;
}
My VideoPlayer component:
import { useCallback, useEffect, useState } from 'react';
import videojs from 'video.js';
import 'video.js/dist/video-js.css'
import styles from '../styles/video-player.module.css';
function VideoPlayer(props) {
const [videoEl, setVideoEl] = useState(null);
const onVideo = useCallback((el) => {
setVideoEl(el)
}, [])
useEffect(() => {
if (videoEl == null) return
const player = videojs(videoEl, props)
return () => {
player.dispose()
}
}, [props, videoEl])
return (
<div data-vjs-player>
<video className={`video-js ${styles.video} vjs-big-play-centered`} ref={onVideo}/>
</div>
)
}
export default VideoPlayer;
As I mentioned, I used to style video.js player this way and it always worked perfectly until I switched to Next.js. Even stranger, the .video class doesn't appear in the browser's developer tools when inspecting the page.
Is there a way I could apply my custom styling properly with Next.js ?
So after looking for a workaround, I found that styling my custom video component in my global.scss file would actually work. I don't particularly know why specifically but here's how you can do:
This is my global.scss file:
/* Base styling */
/* .class { ... } */
/* VideoJS styling -> */
.video-js.video {
* {
& :before {
text-shadow: 1px 1px 7px rgba(10, 10, 10, 0.5);
}
}
&:hover {
.vjs-big-play-button {
background-color: rgba(255, 255, 255, 1);
}
}
.vjs-big-play-button {
height: initial;
width: initial;
font-size: 5em;
line-height: 6.15rem;
padding: 1em;
border: none;
border-radius: 9999px;
background-color: rgba(255, 255, 255, 0.8);
& :before {
margin: 0;
padding: 0;
}
}
.vjs-control-bar {
width: 90%;
min-height: 5em;
margin: 2rem auto;
padding: 0 1em;
border-radius: 1em;
}
}
So you won't have to import '../styles/video-player/module.scss' in VideoPlayer React component
I am using the SweetAlert2 Library in a Vue.js project. The library is working fine with all its features except custom styling.
Based on the documentation, to customize a popup you should add a customClass field to the options object where you define custom class names for each component of the popup.
That is exactly what I did. but the styles do not change.
The code used to include the library:
import Swal from 'sweetalert2'
The code used to fire a swal popup:
Swal.fire({
confirmButtonText: this.confirmBtnTxt,
allowOutsideClick: false,
showCancelButton: false,
title: `Hello ${this.user.firstName} ${this.user.lastName}`,
text: 'Can you please confirm your company',
input: 'select',
customClass: {
container: 'pp-container',
popup: 'pp',
header: 'pp-header',
title: 'pp-title',
content: 'pp-content',
htmlContainer:'pp-html-container',
input: 'pp-input'
},
I have provided all the necessary custom class names, and I am giving those classes styling rules in the styles section of the component:
// Customising swal alerts
.pp {
box-shadow: 0 3px 20px -10px #4a4a4a;
background:black;
}
.pp-title {
display: flex;
font-size: 1.2rem;
color: black;
font-weight: 500;
}
.pp-input {
display: flex;
border: none;
background: #f0f2f7;
padding: 0.7rem 1rem;
font-size: 1rem;
font-weight: 400;
margin-top: 2rem;
}
.pp-html-container {
display: block;
font-size: 0.9rem;
color: #9a9a9a;
}
But the styling doesn't change (see screenshot below).
What am I missing?
I tried this and it is working for me.
Check the demo.
const showAlert = () => {
Swal.fire("Update Successful", "Changes updated successfully!", "success");
}
.swal2-popup {
background: #222 !important;
border: 1px solid white !important;
color: whitesmoke !important;
}
<script src="https://cdn.jsdelivr.net/npm/sweetalert2#11.6.0/dist/sweetalert2.all.js"></script>
<button onclick="showAlert()">Show Alert</button>
I have 5 links on site, they are styled with css, and they should turn black after mouse hovers on them. Links to extrenal pages doesn't turn black, only links to bookmarks on page are turning black.
I tried diffrent styling and nothing works. It works normally without React and without the server.
css styling:
.menu_link {
border: none;
text-decoration: none;
color: darkgreen;
height: 100%;
width: 20%;
text-align: center;
font-size: calc(1em + 1vw);
font-family: pokemon-hollow;
}
.menu_link:hover {
color: black;
background-color: beige;
}
.menu_link:visited, .menu_link:link {
color: darkgreen;
}
MenuLink class:
import React from 'react';
import './MenuLink.css'
class MenuLink extends React.Component {
render() {
return (
<a href={this.props.href} target={this.props.target} className="menu_link" >{this.props.name}</a>
)
}
}
export default MenuLink;
Menu class:
import React from 'react';
import './Menu.css';
import '../MenuLink/MenuLink'
import MenuLink from '../MenuLink/MenuLink';
class Menu extends React.Component {
render() {
return (
<div id='menu'>
<MenuLink id="main_container" name="Home"/>
<MenuLink href="https://bulbapedia.bulbagarden.net/wiki/Fennekin_(Pok%C3%A9mon)" name='Fennekin' target='_blank' />
<MenuLink href="https://bulbapedia.bulbagarden.net/wiki/Braixen_(Pok%C3%A9mon)" name='Braixen' target='_blank' />
<MenuLink href="https://bulbapedia.bulbagarden.net/wiki/Delphox_(Pok%C3%A9mon)" name='Delphox' target='_blank' />
<MenuLink id="main_container" name="Galery"/>
</div>
)
}
}
export default Menu;
No errors, but when I force on hover on link in chrome developer tools i get this:
color: black;
You are overriding .menu_link hover styles with these
.menu_link:visited, .menu_link:link {
color: darkgreen; /*this will override .menu_link:hover styles*/
}
If css specificity is exactly the same, order does matter. Styles declared later will be applied.
So change your css to the below:
.menu_link:visited, .menu_link:link,.menu_link {
border: none;
text-decoration: none;
color: darkgreen;
height: 100%;
width: 20%;
text-align: center;
font-size: calc(1em + 1vw);
font-family: pokemon-hollow;
}
.menu_link:hover {
color: black;
background-color: beige;
}
The problem was the order of lines.
.menu_link:visited, .menu_link:link {
color: darkgreen;
}
were after
.menu_link:hover {
color: black;
background-color: beige;
}
and they were overwriting hover selector. Changing the order to:
.menu_link:visited, .menu_link:link {
color: darkgreen;
}
.menu_link:hover {
color: black;
background-color: beige;
}
was what fixed the problem.
Bookmarks links weren't affected, probably because they can't have state :visited or :link.
I use a lang switcher with land flag as select background that change when the lang change.
Everything works as expected but on Mozilla Firefox the options are transparent, except on hover. I cannot find anything to fix it.
I've made a stackblitz so You can better see the problem: (The images are not the good ones, that why it render "ugly")
https://stackblitz.com/edit/angular-u5jgzt
Thanks for help me / sharing me link that can help me.
app.component.ts
import { Component } from '#angular/core';
#Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
/**
* define the current language in the app
*
* #type {('français' | 'english')}
* #memberof LangSwitcherComponent
*/
currentLang: 'français' | 'english' = 'français';
/**
* Change the translation language
*
* #param {*} event
* #memberof LangSwitcherComponent
* #returns {void}
*/
changeLang(): void {
this.currentLang = this.currentLang === 'français' ? 'english' : 'français';
}
}
app.component.css
select {
-webkit-appearance: none;
-moz-appearance: none;
height: 21px;
width: 21px;
border-radius: 100%;
background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Flag_of_France_%281794%E2%80%931815%2C_1830%E2%80%931958%29.svg/250px-Flag_of_France_%281794%E2%80%931815%2C_1830%E2%80%931958%29.svg.png');
background-size: cover;
border: 1px solid #fff;
color: transparent;
cursor: pointer;
}
select.en {
background: url('https://upload.wikimedia.org/wikipedia/commons/f/f2/Flag_of_Great_Britain_%281707%E2%80%931800%29.svg');
background-size: cover;
}
select option {
background-color: white;
padding: 10px;
}
p {
font-size: 15px;
line-height: 19px;
margin: auto;
margin-top: 1px;
}
You need too specify color CSS in the options
select option {
color: black;
}
Just update the select option style to:
select option {
background-color: white;
padding: 10px;
color: #000;
}
You are setting color: transparent in the select{ } style and that one cascades down to the option.
I'm building a React Site which uses Grommet as the UX Framework and also an embedded Chat Control. Everything functionally works great however the layout has alot to be desired (Second picture below). In the link you will see the chat box in area on the left. This differs quite a bit with the Chat Control in its native form (First screenshot below). As you can see in the difference between the two the spacing is quite a bit off. I'd like to keep the Grommet theme on the text but looking to maintain the spacing and other elements found in the native chat control.
What I did was I created a custom style in Grommet with the hopes of being able to apply my own settings to the Chat Control since Grommet seems to be overriding them. I call my own defaults scss which has my own color scheme that appears to work. Then I call grommet. Finally I took the styling that was in the scss from the Web Chat control and added it into my custom.scss. The Code for the custom.scss is below.
What is the best way to be able to setup my code so that i can control the appearance and layout of the Chat control while still keeping some overriding grommet style (e.g. font, colors, etc.)
Custom.scss
#import 'elu.defaults.scss';
#import '~grommet/scss/grommet-core/index.scss';
#import "includes/colors";
#import "includes/settings";
#import "includes/card-size";
/* updating put the original version in zzz_archive*/
chatstyle {
body .wc-app, .wc-app button, .wc-app input, .wc-app textarea {
font-family: 'Segoe UI', sans-serif;
font-size: 15px;
}
.wc-app button {
background-color: $c06;
border: 1px solid $c05;
border-radius: 1px;
color: $c01;
cursor: pointer;
outline: none;
transition: color .2s ease, background-color .2s ease;
}
.wc-app h1, .wc-app h2, .wc-app h3, .wc-app h4, .wc-app p, .wc-app ul, .wc-app ol {
margin: 0;
padding: 0;
}
.wc-app audio, .wc-app video {
display: block;
}
.wc-console > * {
position: absolute;
top: 0;
vertical-align: middle;
}
.wc-console label {
cursor: pointer;
display: inline-block;
height: 40px;
}
.wc-console svg {
fill: $c03;
margin: 11px;
}
.wc-console textarea, .wc-console input[type=text] {
border: none;
height: 100%;
outline: none;
padding: 0;
resize: none;
width: 100%;
}
.wc-send svg {
height: 18px;
width: 27px;
}
.wc-upload svg {
height: 18px;
width: 26px;
}
#wc-upload-input {
display: none;
}
.wc-textbox {
bottom: 0;
left: 48px;
right: 49px;
}
.wc-send {
right: 0;
}
.wc-send.hidden {
visibility: hidden
}
.wc-mic {
right: 0;
}
.wc-mic.hidden {
visibility: hidden
}
.wc-mic.active path#micFilling {
fill:rgb(78, 55, 135)
}
.wc-mic.inactive path#micFilling {
visibility: hidden
}
.wc-console.has-text .wc-send svg {
fill: $c07;
}
.wc-message-from-me {
float: right;
margin-right: 6px;
}
.wc-message-from-me.wc-message-from {
text-align: right;
}
.wc-message-from-me .wc-message-content {
background-color: $c_messageFromMe;
color: $c01;
}
.wc-message-from-me svg.wc-message-callout path {
fill: $c_messageFromMe;
}
.wc-message-from-me svg.wc-message-callout path.point-left {
display: none;
}
.wc-message-from-me svg.wc-message-callout {
right: -6px;
}
.wc-message-from-bot {
float: left;
margin-left: 8px;
}
.wc-message-from-bot .wc-message-content {
background-color: $c_messageFromThem;
color: $c00;
}
.wc-message-from-bot svg.wc-message-callout path {
fill: $c_messageFromThem;
}
.wc-message-from-bot svg.wc-message-callout path.point-right {
display: none;
}
.wc-message-from-bot svg.wc-message-callout {
left: -6px;
}
};
App.js...
import React from 'react';
import ReactDOM from 'react-dom';
import App from 'grommet/components/App';
import Article from 'grommet/components/Article';
import Section from 'grommet/components/Section';
import Split from 'grommet/components/Split';
import Box from 'grommet/components/Box';
import {Chat} from 'botframework-webchat';
import '../scss/custom.scss';
class PatientApp extends React.Component {
...
render() {
return (
<App centered={false}>
<Article>
<Split flex='right'>
<Section>
<Box margin='none' pad='none'>
<Chat style={'chatstyle'} directLine={{secret: 'My GUID'}} user={{id:'jesse', name: 'jesse'}}/>
</Box>
...
How I would like the chat component to appear except with Grommet styling
How the Chat Control appears currently
All,
I was able to figure this out. When I set a width and height in a style name .wc-chatview-panel it now appears correctly the proper button layout.