I have to do internationalization in my app with some right to left (arabic/hebrew) languages. So i'd like to be able to override some bootstrap classes (like col) to be float right instead of left.
I use create-react-app (babel/webpack) , react-bootstrap.
You can't import conditionally so I did a conditional require
if (language.isLanguageLTR()) {
console.log("REQUIRE RTL CSS");
require("./rtl.css");
}
It works well when I'm in development mode, but when I build my application using create-react-app, the css file is imported even if the condition is set to false.
Is there a way (sure there is !) to override some css classes without inline css/specific classes everywhere I use bootstrap column ?
I think webpack loads it on deployment mode but I don't get why, and maybe there is a more proper way to conditionally override css.
My css just in case you'd like to understand better
.App {
direction: rtl;
}
.col-sm-1 {
float: right;
}
.col-sm-2 {
float: right;
}
...
I got it. When doing a conditional import/require, webpack will always insert the file (just in case it may be called). Of course when it was a css file, it overided everything.
What I did was defining css using pure javascript (like this answer : https://stackoverflow.com/a/15494200) and it works like a charm (on chrome/ie/FF at least). I don't find it pretty, I would like to have it in a .css file, but it's already something.
var style = document.createElement("style");
style.appendChild(document.createTextNode(""));
document.head.appendChild(style);
style.sheet.insertRule(".App { direction:rtl; }", 0);
style.sheet.insertRule(
".col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {float: right;}",
1
);`
I think the easiest way to achieve what you want is to have a float: right class that you can use jQuery to add that class when required. something like:
// CSS
.rtl {
float: right !important;
}
// Javascript
var ltr = true;
function ltr ( ltr ) {
$( '.col-sm-1, col-sm-2' ).addClass( 'rtl' );
}
Related
This is a reactjs project, Te amperzand syntax is working fine in Javascript file but not in css.
How to write hover class in css file?
If you want to write in same class. You should use Sass/Scss.
Save the css file with .scss extension. It is a precprocessor for better syntax.
Refer this sandbox:
https://stackblitz.com/edit/react-uwktzj?file=src%2FApp.js
You must write it this way
.baseStyle {
/* base styles goes here*/
}
.baseStyle:hover {
/* hover styles goes here */
}
If you wish to attain what you intend you must use scss.
Then it will be like
.class {
margin:20px;
&:hover {
color:yellow;
}
}
Reference
Using Scss in React
I'm working on an app with Ionic 5.0.0, Angular 8 and using the ionic2-calendar plugin. Although the plugin demo works fine, I can't seem to modify the styling of the calendar.
The documentation lists a couple of classes that seem to be used for each element, but adding them to my own scss file and adding !important (or not) doesn't really work. I tried adding them to the global scss, as well as to the main app one.
Aside from that, I've tried using the browser inspector to check which css selector is actually styling the elements in question, but the attribute selector seems to be random somehow. Current day for example is:
.monthview-current[_ngcontent-ljn-c3]
And after reloading, it is
.monthview-current[_ngcontent-igq-c4]
So clearly that method won't work either... I've also tried adding td.monthview-current, which also didn't work... Those were the suggestions and sample codes I've found from looking up this plugin online and looking around the plugin files. If anyone has any ideas whatsoever I'd be super thankful.
EDIT: I've found a way to change it, but ONLY through the source files for the plugin, which I have to assume is not the right way to do it... There's JSON files, JS files, and I have to manually change all of them.
If the styles are present inside the angular component's file it will not be applied due to view encapsulation. You need to specify the styles in the global stylesheet, and also in most you need to add important to the styles.
To elaborate further,
-src
-assets
-calendar.css (add styles here)
-app
-my-calendar
-my-calendar.page.html
-my-calendar.page.ts
-my-calendar.page.css (and not here)
Some commonly needed customizations: (assets/calendar.css)
Apply styles to the selected date:
.monthview-selected{
font-weight: bold;
background-color: #F1F1F1 !important;
color: #333 !important;
}
Apply styles to the date that has an event:
.monthview-primary-with-event, .calendar-event-inner{
background-color: #1a92d0!important;
}
Disable all the borders in the calendar:
td, th {
border: 0 !important;
}
Final calendar after applying the styles:
HTML
<calendar [eventSource]="eventSource" [calendarMode]="calendar.mode" [currentDate]="calendar.currentDate"
(onCurrentDateChanged)="onCurrentDateChanged($event)" (onRangeChanged)="reloadSource(startTime, endTime)"
(onEventSelected)="onEventSelected($event)" (onTitleChanged)="onViewTitleChanged($event)"
(onTimeSelected)="onTimeSelected($event)" step="30" (showEventDetail)="true" formatDayHeader="EEEEE"
allDayLabel="All Day" startHour="9" endHour="20">
</calendar>
I had the same issue and a solution is related to encapsulation as stated in other answer.
Styling not applying to child component
try update your component:
#Component({
...
encapsulation: ViewEncapsulation.None // <------
})
export class xxComponent{
You can then apply the style based on the child class, eg.
.scss:
.monthview-container {
...;
}
The best way is to use Template Customization given in the plugin.
https://github.com/twinssbc/Ionic2-Calendar/blob/v6/README.md#Template Customization
If that is diffcult in your case. Then add a class to calender tag in html. And get all the child elements in css using Child or descendent combinator. Css Combinator
Although I'm not sure about the reason for this, the solution in my case seems to be using the global stylesheet (without any attribute selector in brackets) instead of the module specific one. It's not ideal, but it works I guess!
With depp
::ng-deep {
.monthview-selected {
background-color: blue !important;
color: white !important;
border-radius: 50%;
}
}
So I have two components... a Navbar component, and an AboutPage component.
They are both in the same directory, 'App'
App
-- Navbar --> Navbar.css, Navbar.js
-- AboutPage --> Aboutpage.css, Aboutpage.js
So as you can see, they have two separate stylesheets.
In the JS pages the correct CSS file is being imported as well.
When I do a style like this for example:
Navbar Component
p { background: red }
^^ this style also applies to the p's in the Aboutpage. I even tried to give the P in Aboutpage its on id and style it that way and it still failed.
That's the expected behaviour.
No matter which file you specify a rule like p { background: red }, it's going to be applied to all DOM.
Specifying and id attribute to won't work either. The above rule is general enough to apply to all <p>s.
If you want to specify css files for each component, you should also create component specific css classes. Like the following example.
import React from 'react';
import './DottedBox.css';
const DottedBox = () => (
<div className="DottedBox">
<p className="DottedBox_content">Get started with CSS styling</p>
</div>
);
export default DottedBox;
and its css file:
.DottedBox {
margin: 40px;
border: 5px dotted pink;
}
.DottedBox_content {
font-size: 15px;
text-align: center;
}
If you want different ways of defining css for React, this resource adds 3 more ways of doing so, in addition to the above way.
You can also use css modules. They scope your CSS locally and are awesome
Scoping styles to a component requires WebComponents which relies on several newer browser features, particularly shadowRoot "shadownDOM" which supports this separation directly. These are most easily used with lit-element and/or Polymer 3.
Sometimes we need a global CSS which could affect another component even if we use module import, I didn't find anything to answer that in the official documentation, so my workaround is to use something like the following code in the component itself, and, it works fine :)
<style>
{
`
#page {
padding:0;
margin-top:0;
margin-bottom: 0;
margin-left: 0;
margin-right:0;
}
#media print {
#page {
size: 80mm 21cm;
}
}
`
}
</style>
while developping an angular 4 app using angular-cli + sass, i have this problem with multiple plugins. so here is the scenario:
I have a main style.scss file that import other styles files ..., so if i want to modify a plugin style, let say a slider component styles, i will create a slider.scss and import it into my main style.scss file, the problem is that the imported component css is injected into the browser after my main css file. so when i want to modify something i need to add !important to the rule.
here is a snapshot of chrome inspect css tool:
element.style {
left: 100%;
}
<style>…</style>
.noUi-marker-horizontal.noUi-marker-large {
height: 15px;
}
<style>…</style>
.noUi-marker-horizontal.noUi-marker {
margin-left: -1px;
width: 2px;
height: 5px;
}
<style>…</style>
.noUi-marker-horizontal.noUi-marker-large {
height: 10px !important;
}
my custom css is the last one.
I want to know if there is a way to load my css style file after the components css file, i can use precedence rule to make it work, but i want to know if there is a more clean way.
i am using jquery-ui dialog in my application. now i want to customize the signin/sinup dialog i.e. jquery-ui dialog. without customization dialogs are looking like:
but when i made following changes to login.jsp page that too in style it is changing all the dialogs of application that i don't want to happen but only signin/signup dialog. CSS code is:
.ui-widget-header {
background: #343434 !important;
border: none
}
.ui-dialog-titlebar-close{
background: #1C1C1C !important;
}
.ui-dialog {
background: #343434 !important;
border: thin 1px;
}
and js code for this signin dialog (id="signinDialog") is:
$(document).ready(function() {
$("#signinDialog").dialog({
width : 600,
resizable : false,
modal : true,
autoOpen : false,
position : ['top', 157]
});
function openLoginPopup() {
$("#signinDialog").dialog("open");
}
after these changes i am getting signin/signup dialog the way i want but the problem is this is changing jquery-ui dialog css for all application and looking like this:
I have been stuck in this issue from morning and tried lot of ways to resolve, like
this but all fell flat. Atlast i have to ask this.
I want all dialogs remain same except signin/signup dialog after customization.
Using a CSS selector for your particular dialog's ID, as EasyPush suggests, isn't going to work because your content becomes the child of the dialog element in the DOM. Since CSS doesn't have parent selectors (see CSS selector for "foo that contains bar"?), there would be no way I can see to use pure CSS. Instead, you'll need to use javascript.
Using jQuery for the close button, for instance:
$("#signinDialog").parent().find(".ui-dialog-titlebar-close").css("background","#1C1C1C");
Unfortunately, applying the "!important" rule to CSS via jQuery is a little tricky. You may instead prefer to apply a class and then style that class in CSS with "!important." Something like:
$("#signinDialog").parent().find(".ui-dialog-titlebar-close").addClass("mySpecialClass");
Along with a css rule:
.mySpecialClass{
background: #1C1C1C !important;
}
If i'm not misunderstanding you it seems you are indeed changing the layout of all dialogues. This because the selector ".ui-dialog" will match all dialogues in your application.
If you only want to specifically style your signin dialog, you need to specifically select only these elements. You should be able to do this as follows:
#signinDialog.ui-dialog {
background: #343434 !important;
border: none
}
#signinDialog .ui-dialog-titlebar-close{
background: #1C1C1C !important;
}
#signinDialog .ui-dialog {
background: #343434 !important;
border: thin 1px;
}