I'm using a UI framework called Element UI and I'm using their tables for my project. I need the body of the tables to have some padding at the top to make room for a filter input that is put at the top before the rows begin. Although, not all tables in my project will have this filter input so not all tables need this padding, my issue is that I'm targeting a class that comes from Element UI (not one that I created myself) and the only file that the code acknowledges this selector is within App.vue. Trying to put this styling in the individual files doesn't work. I'm trying to only remove this padding for one certain file and keep the padding for all others.
App.vue file
.el-table__body {
padding-top: 48px;
}
I have been using element UI for 2 years, and I had the same problem. The thing in Element-UI styles is that they can be styled inside their own component.
Let's say for your case, you can style only the "el-table" by adding "custom class" to it and still can use scoped, but what's inside "el-table__body" cannot be styled when you use scoped.
And if you really want to style, remove "scoped" from "style", like this:
<style>
.el-table__body{
padding-top: 200px;
}
</style>
Note: the above trick will apply the styles to all other tables when you come to this component and then open any other component which has the same "el-table__body" class.
To avoid the effect on other component's tables style, add a custom class name and then target the el-table__body.
For example:
<el-table
:data="tableData"
class="stack-table"
style="width: 100%">
<el-table-column
prop="date"
label="Date"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="Name"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="Address">
</el-table-column>
</el-table>
And CSS style target like this:
.stack-table .el-table__body{
padding-top: 200px;
}
Related
Since my first program in 1980, I feel that I am more of a user than a programmer. That is a good thing. Angular is a great example. I don't need to know its inner workings to create acceptable code. Unless a textarea is rendered a bit too narrow, as I am fighting right now.
Angular documents it as follows: Avoid defining custom styles that would affect the size or internal layout of the component I could read it ten times but it is too complicated for a programming user of Angular Material.
Then I google and find solutions here that may have worked in other versions, but not for me today.
What I need is a strategy to get my CSS working. Do you have a suggestion?
if you want to override the Angular Material UI, one of the simplest way is to define the css in the main styles.scss (not the one in the component) i.e:
mat-form-field {
&.my-class {
width: 100%;
}
}
<mat-form-field class="my-class">
<mat-label>My Textarea</mat-label>
<textarea matInput></textarea>
</mat-form-field>
sometimes you need to have a more specific rule or us !important
Zerotwelves solution that worked for me. Component:
<mat-grid-tile colspan="3" rowspan="3">
<mat-form-field class="myTextArea" [formControl]="control">
<textarea
#textArea
matInput
[(ngModel)]="data.text"
(keyup.enter)="sendTweet(data)"
(keyup)="showAuto($event)"
[matAutocomplete]="auto"
></textarea>
Removed: style="width: 40vw;" from the components css and its html.
Added to the global styles.css:
.myTextArea {
width: 40vw;
}
Depends upon the component that you are trying to change styles of. For example, for simple properties of mat-form-field you can simple add the CSS in the same component or use a bootstrap class directly on it.
account.component.html
<mat-form-field class="w-100 or-your-class">
<mat-label>
<i class="fcp fcp-envelope mr-1"></i>Account Email
</mat-label>
<input type="email" matInput class="text-dark" formControlName="accountEmail" required>
</mat-form-field>
account.component.css
.or-your-class{
margin-bottom: 5px;
}
But there are HTML Elements that are created beyond that components "scope", to apply the styles to those HTML Elements either you can turn off ViewEncapsulation (not recommended) or You can add the styles in your top most .css file which is usually the styles.css as well as using !important to override the styles of that Material UI Component
I use react bootstrap tabs component but when i use a custom css within this nav-link with a custom parent class indicator its not working.
<Tabs
defaultActiveKey="signup_renter"
id="uncontrolled-tab-example"
className="mb-3 approval-details-tab"
>
<Tab eventKey="signup_renter" title="About Car">
<div className="signup-renter">
this is signup renter tab
</div>
</Tab>
<Tab eventKey="signup_host" title="Details">
<div className="signup-host">
this is signup host tab
</div>
</Tab>
</Tabs>
Here is my css parent indicator:
.approval-details-tab > .nav-tabs .nav-link.active::before {
content: "";
background: #524eb7;
width: 30px;
height: 3px;
position: absolute;
top: 63% !important;
}
I use .approval-details-tab class as a parent class of nav-tabs but without parent class it works. but i need a parent class for separate design.
From the React-bootstrap documentation:
Because React-Bootstrap doesn't depend on a very precise version of Bootstrap, we don't ship with any included CSS. However, some stylesheet is required to use these components.
How and which Bootstrap styles you include is up to you, but the simplest way is to include the latest styles from the CDN.
CDN link: https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css
Add CDN at index.html file inside tag like this:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css"/>
Now, to override any class of `react-bootstrap', you have to use "!important" on your custom css. If you want to override the background color, use "!important" beside that css property.
Example:
.approval-details-tab{
background: #524eb7 !important;
}
To get more clear understanding of your problem, please mention which css-property you want to override of a bootstrap class. Thanks!
In React, the parent-children relationship is a bit complicated. Although a component in React seemed to be the direct child of another component, when translated to normal HTML, it doesn't. For example, take a look at this code
<div className="parent">
<Tabs className="children">
some other components inside
</Tabs>
</div>
Does div the direct parent of the component Tabs? It is not. The above code, when being translated to normal HTML component would look roughly like this
<div className="parent">
<div>
<div className="children">
some other components inside
</div>
</div>
</div>
As you can see, the element that bears the className children is no longer the direct child of the parent component. That is why in React, it is not a good idea to style components using parent-direct children relationship.
If you just want to do this way of styling because you want to avoid naming conflict, you can try out CSS Module
If you want to read the detail on how the Tabs component behave, you can read the source code
I have the following code:
<div>
<my-custom-component></my-custom-component>
<div>
Inside MyCustomComponent's template, I use mat-card similar to this:
<mat-card>
<mat-card-header>
<mat-card-title>{{ name }}</mat-card-title>
</mat-card-header>
<mat-card-content>{{ description }}</mat-card-content>
</mat-card>
When it renders, I notice that there is a 16px margin that's given using angular material generated code that looks similar to this:
<mat-card>
<mat-card-header>
<div class="mat-card-header-text"> <<< ******** This is the div I am asking about
<mat-card-title>{{ name }}</mat-card-title>
</div>
</mat-card-header>
<mat-card-content>{{ description }}</mat-card-content>
</mat-card>
That div adds 16px of margin on top of the 16px of padding that the mat-card supplies, which pushes the title away from the border of the card by 32 pixels.
The specs of my design say that the title should stay 16px away from the border not 32px.
What's the best practice way of how to accomplish this?
Relaying on a div that appears there and styling something like mat-card-header > div seems wrong since I would be styling this particular implementation of the material card. Next version, this div may end up being some other element.
I could do:
mat-card-header mat-card-title {
margin-left: -16px;
margin-right: -16px;
}
But that again seems kind of hacky to me.
What's the intended way of overriding the internal styles of these components?
Two ways that i know
Global level:- If you want the style to be applied to all cards in your app, add a
style in your styles.scss / css removing the padding / margin to get the required
effect.
Component level:- If you want this style only inside a particular component where the mat-card is used, add a the style in the component.scss / css file.
But make sure you use the shadow piercing operator to make the style work.
This approach can be used in other scenarios too. Hope it helps.
I am still new in angular 7. I have a form with title directive and div. I am trying to set both of them in same row with 49% width in side the form. The div style work fine but in the title component doesn't take the style. the problem is i need to change the title directive only in the current form. is there any way to do that?
many thanks
<form #taskForm="ngForm" (ngSubmit)="onSubmit()">
<my-title [style.width]='49%' [title]="'title.page'" [wikiUrl]='wikiUrl' icon="work">
</my-title>
<div [style.width]='49%'>
<button>Save</button>
</div>
</form>
Add px which almost equals to 49%.
<div [ngStyle]="{'width.px': 490px}">
<button>Save</button>
</div>
If you want to set a width in percent you can also use the following syntax:
<div [style.width.%]="49">...</div>
The real problem however seems to be that the 'my-title' component is not responding to the width rule. This is probably because 'my-title' is not a known html tag and so there is no default rendering behavior in the browser for it.
If you want your component tag to behave like a block element (that is what a div element is rendered like) then you just have to apply the rule display: block; to it.
Since your component tag is not part of your template, but the wapper for it you can either apply the following style to the parent component that is using the 'my-title' component:
/* this will not work inside the css file of the 'my-title' component:*/
my-title {
display: block;
}
...or you can use the :host selector in the css/scss file of the 'my-title' component, which is probably better in this case:
:host {
display: block;
}
I would like to modify quite a large amount of styles on a page through a customisable panel. When a user clicks an option, the content on the page will completely change based on whatever was clicked.
This cannot be a scenario where a class is appended to a parent element and use CSS/LESS to adjust accordingly. For this scenario (for requirement reasons) the CSS needs to be internal on the angular component HTML.
Is it possible to have a value in the component TS like this:
myNewColour: "red"
That can then be used in an internal style sheet that's inside my angular component.html like this?:
<style>
.myContainer { background: myNewColour }
</style>
<!-- HTML Content -->
<div class="myContainer"> Stuff </div>
Any help with this would be appreciated! :)
"Internal in the HTML template" is called inline style ;) Apart from that, you can use ngStyle like so
<tag [ngStyle]="{'background': myNewColour}"></tag>
EDIT if it makes your code too long, what you can do is simply
let customStyle = {
'background': this.myNewColour
};
And in your tag, simply
<tag [ngStyle]="customStyle"></tag>