How do I wrap text that exceeds width on PrimeNg's dropdown field? I have tried using .p-dropdown-label { word-wrap: break-word; } but it did nothing. Thanks in advance!
I managed to do it by adding the following rule to styles.css:
.p-dropdown-item.p-ripple {
white-space: normal;
}
You can also achieve the same result by using ng-deep on the component stylesheet, but keep in mind that ng-deep is deprecated.
:host ::ng-deep .p-dropdown-item.p-ripple {
white-space: normal;
}
Related
I've been trying using styled-components -
const StyledButton = styled(Button)`
.and-btn-primary[disabled] {
background-color: red;
color: red;
}
`;
but it doesn't work
Please check out this topic
In your case you can override your css like this:
.ant-btn-default:disabled{
background-color: blue;
}
I ended up using -
:disabled {
background-color: blue !important;
}
to override antd
I would like to style the p-dialog's Close Icon. The default 'x' button is in grey color and I would like to change it to white color with font-size increased. I found that we could use .p-dialog-titlebar-close but haven't been successful. I used it in the following way-
::ng-deep .p-dialog .p-dialog-titlebar-close {
color: #fff;
font-size: 16px;
}
Please let me know how can I change the 'X' to show in white color. ( Since it currently is barely visible). Greatly appreciate any help. Thank you in advance.
Attaching the screenshot for detailed explanation.
I tested with the following and it works as expected:
:host ::ng-deep .p-dialog-header-close-icon {
color: red;
font-size: 2rem;
}
I am using react-select dropdown component in my react application. i found one weird issue that when user start typing for searching an item in react-select dropdown, search textbox gets stretch and its not a fixed with dropdown list.
Please see below image.
How can i fix the search textbox width to react-select width?
Just set
autosize={false}
on the component.
I had similar problem. I inspected browser and found out that if I set width to 82%, my problem will be solved. So I added that inside "Select" tag and it works
<Select
value={this.state.passwordExpire}
onChange={this.updatepasswordExpire.bind(this)}
options={optionsDays}
style={{width: '82%'}}
/>
const customStyles={
// control represent the select component
control: (provided)=>({
...provided,
width:'100px'
})
}
<Select
options={options}
styles={customStyles}
></Select>
This method is stated in react-select documentation. You can adjust select width as per your wish.
You can try with this css.
.Select-input {
position: absolute !important;
width: calc(~'100% - 0px');
}
.Select-value-label {
display: none !important;
}
.Select-value {
position: relative !important;
}
.Select-menu-outer {
width: auto;
min-width: 100%;
text-align: left;
}
.Select-option {
white-space: nowrap;
}
.Select-control {
min-width: 100%;
width: auto;
text-align: left;
}
.Select-control {
table-layout: fixed;
}
.Select-input {
overflow: hidden;
max-width: 100%;
}
Here is the Solution..
.Select-input > input {
width: 100% !important;
}
.Select--multi .Select-input {
display: block !important;
}
.Select--multi .Select-multi-value-wrapper {
display: block !important;
}
This is the proper solution in this case. It's working fine.
I can't seem to find any documentation regarding using a different font in Angular Materials. Is this possible through the framework?
This is the official documentation on the subject, but it doesn't specify how to provide backup family classes if a font can't load:
https://material.angular.io/guide/typography
#import '~#angular/material/theming';
// Define a custom typography config that overrides the font-family as well as the
// `headlines` and `body-1` levels.
$custom-typography: mat-typography-config(
$font-family: monospace,
$headline: mat-typography-level(32px, 48px, 700),
$body-1: mat-typography-level(16px, 24px, 500)
);
// Override typography for all Angular Material, including mat-base-typography and all components.
#include angular-material-typography($custom-typography);
Edit; for backup font-families (notice the quoting):
$font-family: '"Sintony", Arial, sans-serif'
Edit; if you had a custom font in /assets
#font-face {
font-family: 'MyWebFont';
src: url('/assets/webfont.eot');
}
$font-family: '"MyWebFont", Arial, sans-serif'
Angular Material is implementation of Material Design and Material Design is strongly linked to Roboto font and as you mentioned, there is nothing about it in the documentation, so I think it is not possible to do that through the framework.
But you can easily change font family in css file, which needs to be included in your build after your Angular Material dependencies. Here's an example:
body {
font-family: "Comic Sans MS";
}
input,
button,
select,
textarea {
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
And Demo: http://codepen.io/mattdanna/pen/pgwVzX
Borrowed from here: https://github.com/angular/material/issues/6561#issuecomment-170837189
Having tried just about everything Im at a loss how to change the color of splitter bars using SASS for Ext JS 4.2.2 - they always appear as a white bar.
Say I have a hbox or vbox layout with two flex items and a splitter, the bar created by the splitter to allow the components to be resized proportionately to one another is always white- is there anyway this can be changed through a SASS config?
Many thanks!
/resources/themes/stylesheets/ext4/default/util/_splitter.scss indicates that it doesn't use a variable
#mixin extjs-splitter {
.#{$prefix}splitter {
.#{$prefix}collapse-el {
position: absolute;
cursor: pointer;
background-color: transparent;
background-repeat: no-repeat !important;
}
}
}
You'll have to override it in CSS, or create your own theme.
CSS
.x-splitter-vertical {
background-color: #abc;
}