I have a Form control, rendering an Antd Form.Item:
const FormEditData: React.FC<FormEditDataProps> = ({ label, name, field, rules, customProps, children }) => {
const namePath = [name].concat('value')
const isEditable = field?.fieldAccess > 0
if (isEditable) {
return (
<Form.Item
label={label}
name={namePath}
className={css.FormEditItem}
rules={rules}
{...customProps}
>
{ children}
</Form.Item >
)
}
return null
}
export { FormEditData }
This is rendering as:
<div class="ant-row ant-form-item FormEditItem___2R86H">
<div class="ant-col ant-form-item-label">
<label for="form-2_employeeLastName_value" class="ant-form-item-required" title="Nachname">Nachname</label>
</div>
<div class="ant-col ant-form-item-control">
<div class="ant-form-item-control-input">
<div class="ant-form-item-control-input-content">
<input type="text" id="form-2_employeeLastName_value" class="ant-input" value="Bar">
</div>
</div>
</div>
</div>
With a css module defined as:
.FormEditItem {
margin-bottom: 0.5em;
margin-top: 0.5em;
}
.FormEditItem div {padding: 0;}
The margin to the .FormEditItem is applied correctly, but I want the padding of the child div with the class annotation ant-col ant-form-item-label changed from 0 0 8px to 0
However I seem to be unable to find a suitable path to that element, so that it gets styled properly.
Tested paths:
.FormEditItem div {padding: 0;} //not specified enough
.FormEditItem div.ant-col {padding: 0;} // not applied
.FormEditItem div.ant-col.ant-form-item-label {padding: 0;} // not applied
.FormEditItem .ant-col {padding: 0;} // not applied
.FormEditItem .ant-col.ant-form-item-label {padding: 0;} // not applied
To apply this change on a global level, we can resolve this by editing a less-variable and apply a custom theme.
The corresponding variable is defined here: https://github.com/ant-design/ant-design/blob/ea2545fbc7d02df4efa1b77467672a681158fec0/components/style/themes/default.less#L373
#form-vertical-label-padding: 0;
Using css
I tried this in my custom style.css file
.ant-col.ant-form-item-label {
padding: 0 !important;
}
NOTE:
Your custom css file should be imported after all other third-party css flies
try this,
add property requiredMark and set value to false like this : requiredMark={false}
in Form.Item component
<Form.Item
label={label}
name={namePath}
rules={rules}
requiredMark={false} //add this
{...customProps}
>
{ children}
</Form.Item >
Related
Why svelte declares unused CSS selector when there could be inner elements inside my Component?
<div class="users">
{#each [1,2,3,4,5] as id}
<User name={id} />
{/each}
</div>
<style>
.users > * {
margin-right: 5px;
}
</style>
Error:
Unused CSS selector ".users > *" (12:4)
Repl:
https://svelte.dev/repl/6c8b4a6a808c4aee80e51af58b4fcda4?version=3.44.0
User is a regular div. Not sure if I should use another pattern to achieve this.
Multiple things:
I don't see a users class in your code, the div has a class container, I guess you meant that one
Svelte scopes all styles to the current component, which means elements of children are not targeted. In your case, you want to target any direct child of your div, but the elements are inside User, so this doesn't work
Solution: Use :global which tells Svelte to not scope the selector to the current component:
<script>
import User from './User.svelte'
</script>
<div class="users">
{#each [1,2,3,4,5] as id}
<User name={id} />
{/each}
</div>
<style>
/* you could also write :global(.users > *) but that
would also target any "users" class somewhere else */
.users > :global(*) {
border: 3px solid teal;
}
</style>
In Svelte the css is scoped to the component by default, so styles defined inside a component will have no effect anywhere else.
(the styled elements inside a component get an additional class like 'svelte-1g7lik1')
The 'users' div is except for the User component - which is not affected by the styling - empty, so the declaration has no effect on anything and hence is redundant
You can solve the problem by wrapping your css statement in :global()
See this REPL
<script>
import User from './User.svelte'
</script>
<div class="users">
{#each [1,2,3,4,5] as id}
<User name={id} />
{/each}
</div>
<style>
.users > :global(*){
border: 3px solid teal;
}
/*>> .users.svelte-16kesww>* {...} in bundle.css */
>> affects 'childcomponent-children'
:global(.users > *) {
box-shadow: 2px 3px 0 0 pink;
}
/*>> .users > * {...} in bundle.css
>> affects globally all children of elements with class 'users' */
</style>
I can't find the correct :host selector for my Ionic4 + Angular8 project.
I have to get rid off padding property. In Ionic Framework there is special property " --padding-top ". I need to change a value for the class="toolbar-container" from 3px to 0. Thank you in advance.
Here is the my
HTML:
<ion-header>
<ion-toolbar>
#shadow-root (open)
<div class="toolbar-background"></div>
<div class="toolbar-container"></div> <!-- I need to get this class + :host-->
</ion-toolbar>
</ion-header>
CSS:
:host {
--padding-top: 3px;
--padding-bottom: 3px;
}
Here are my attempts:
1. I placed it in the root of a SCSS file.
:host(.toolbar-container) {
--padding-top:0;
--padding-bottom:0
padding:0 // just to check
}
With inheritance:
ion-header {
ion-toolbar{
:host(.toolbar-container) {
--padding-top:0;
--padding-bottom:0
padding:0
}
}
}
Using angular, I am using p-calendar in a component and created a CSS class that is called from my component. No matter what I do I am unable to override the style.
CSS
.ui-calendar .ui-calendar-button {
height: 34px;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
width: 900em;
border-left: 0 none;
}
HTML
<div class="form-group col-xs-3 col-md-3"
[ngClass]="{
'has-error':(ersaForm.get('effectiveDt').touched || ersaForm.get('effectiveDt').dirty ) &&
!ersaForm.get('effectiveDt').valid
}">
<label for="effectiveDtId" class="control-label">Effective Date</label><br />
<p-calendar formControlName="effectiveDt" id="effectiveDtId" [showIcon]="true"
inputStyleClass="form-control "
class="ui-calendar ui-calendar-button"
[style]="{'width': '100%','display': 'inline-flex','height':'34px'}" ></p-calendar>
</div>
****************************************************UPDATE****************************************
I changed my SCSS File to
::ng-deep .only-style-this .ui-calendar .ui-calendar-button {
height: 34px !important;
border-top-left-radius: 0 !important;
}
HTML
<div class="form-group col-xs-3 col-md-3 only-style-this"
[ngClass]="{
'has-error':(ersaForm.get('effectiveDt').touched || ersaForm.get('effectiveDt').dirty ) &&
!ersaForm.get('effectiveDt').valid
}">
<label for="effectiveDtId" class="control-label">Effective Date</label><br />
<p-calendar formControlName="effectiveDt" id="effectiveDtId" [showIcon]="true"
inputStyleClass="form-control"
styleCalss=".ui-calendar .ui-calendar-button"
[style]="{'width': '100%','display': 'inline-flex','height':'34px'}" ></p-calendar>
</div>
warning
Validation (CSS 3.0): "::ng-deep" is not a valid pseudo-element.
You can't tweak a child component's css, it breaks encapsulation. This will work but is deprecated:
::ng-deep .ui-calendar .ui-calendar-button {
height: 34px;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
width: 900em;
border-left: 0 none;
}
This is essentially the same as adding it to your global stylesheet. However, the global styles will be applied only when the component has loaded for the first time, making it uber crappy. For safety, you can wrap your component in an "only-style-this" class and do:
::ng-deep .only-style-this .ui-calendar .ui-calendar-button {
...
}
Alternatively, prime-ng usually allows you to pass styles in with most its components.
If you look at the docs you will find that there is a style property you can use. There are also other properties you might want to play with like inputStyle.
As in the following answer https://forum.primefaces.org/viewtopic.php?t=53756 just put your style as list item in the array of styles in the file angular.json
"styles": [
"../node_modules/primeng/resources/primeng.min.css",
"../node_modules/fullcalendar/dist/fullcalendar.min.css",
"../node_modules/quill/dist/quill.snow.css",
"../node_modules/nanoscroller/bin/css/nanoscroller.css",
"styles.css"
],
then you can use your css freely
I use prime ng ver 12.xx
override this ok for me on file style.css (Angular cli
.p-datepicker table td{ padding: 0px; }
.p-datepicker table td > span { height: 45px;width: 50px; }
Is it possible to disable react disable react extra div wrapper?
I'm using ES2015.
The wrapper is making two of my style not centering my component in C#.
#First div
.default-content {
margin-right: auto;
margin-left: auto;
padding: 16px 16px 16px 16px;
}
#second div
.full-width {
width:100%;
}
The code looks like this when its rendered.:
<react-container params="component: MontelUI.React.CompactStory, args: {
newsId: 955888, userId: 1003465, bookmarkMainProp: false }">
<div>
<div>hei</div>
</div>
</react-container>
My render function looks like this:
render() {
return (
<div>hei</div>
)
The component is called through custom-tag.
There is an option for this situation. You are not clear about what you meant but as I understood, you have and component which has div and to be able to render multiple components you need to wrap with div. But instead of this you can use Fragments! Try to analyze this link and wrap your component with Fragment not div!
Fragments in React
Like this ->
render() {
return (
<React.Fragment>
<ChildA />
<ChildB />
<ChildC />
</React.Fragment>
);
}
I created collapsible sidebar.In side the sidebar that content automatically taken ant design padding value(16px)at the top,right,bottom and left .I need to remove this automatic padding
render() {
return (
<div className="common-coll-bar">
<Collapse >
<Panel header="Present Staffs" style={customPanelStyle}>
<p style={{ height: 550, color: '#131D43', background: '#607B7E', padding: 0 , margin: 0 }}> {text}</p>
</Panel>
</Collapse>
</div>
);
}
Can you help me?
You would have to manually overwrite the styling.
You can add a custom class to panel:
<Panel header="This is panel header 1" key="1" className="custom">
and Add less:
.custom {
.ant-collapse-content-box {
padding: 0;
}
}
https://codepen.io/kossel/pen/gooQqv
You need to theme antd. Doing the proposed solution by Yichaoz will just work for element that holds that class. Which will be harder to maintain, will require extra work, as you need to add that class to every element.
You need to read this https://ant.design/docs/react/customize-theme for a proper solution.
Using CSS modules:
.collapsePanel {
:global(.ant-collapse-content-box) {
padding: 0 !important;
}
}
import the file and use like:
<Collapse className={css["collapsePanel"]}>
...
For me worked only like this with antd#v5.x