Topic: Update border radius on mdb-form-control
Expected behavior Update the styling like border radius for a input, select, calendar input or anything thats within an mdb-form-control
Actual behavior current if i add css to the mdb-form-control to update the border-radius: 2px nothing happens. it still shows the rounded radius. I was able to get the input to work by adding a class to the input and changing it but I cannot get it to work for the mdb-select and mdbInput for calendar
Resources (screenshots, code snippets etc.) HTML Calendar
<mdb-form-control class="audit-log-bg">
<input
mdbInput
[mdbDatepicker]="toDatepicker"
type="text"
class="form-control form-input"
id="toDatepicker"
placeholder="Select end date"
formControlName="endDate"
/>
<mdb-datepicker-toggle [mdbDatepicker]="toDatepicker"></mdb-datepicker-toggle>
<mdb-datepicker [format]="'mm/dd/yyyy'" [inline]="true" #toDatepicker (dateChanged)="onDatechanged('end_date')"></mdb-datepicker>
</mdb-form-control>
HTML Select
<mdb-form-control class="audit-log-bg">
<mdb-select formControlName="type" (selected)="updateFilter('action_type')" class="form-input">
<mdb-option *ngFor="let option of actionOptions" [value]="option.value">{{option.label}}</mdb-option>
</mdb-select>
</mdb-form-control>
CSS
.form-input { border-radius: 2px!important }
The styling in this case is a bit more complicated, we user other HTML elements to create the outline input. Here is an example rule that should override the border-radius correctly:
.form-outline .form-control ~ .form-notch,
.select ~ .form-notch {
.form-notch-leading {
border-radius: 2px 0 0 2px;
}
.form-notch-trailing {
border-radius: 0 2px 2px 0;
}
}
You can also override a variable responsible for this value before importing mdb.scss:
$form-notch-leading-border-radius: 2px;
@import '../../mdb-angular-ui-kit/assets/scss/mdb.scss';
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: Yes
- Technology: MDB Angular
- MDB Version: MDB5 4.0.0
- Device: Desktop
- Browser: Chrome
- OS: Mac
- Provided sample code: No
- Provided link: No