Antd word-wrap in Select - css

I have a Select component and a Option children that needs to fit with all its text in a given width. If the Option text goes over the defined width it should be wrapped.
So far I am trying to style the Select Component like the following but without success:
<Select style={{ width: 250, height: "auto", wordWrap: "break-word" }} />
Below I have a link sandbox of what I am trying to achieve
https://codesandbox.io/s/search-with-sort-antd-4-16-13-forked-8fhnt?file=/index.js
Is text wrapping possible using a Select component?

.ant-select-item-option-content {
white-space: break-spaces;
word-break: break-word;
}
Try here in code sandbox : enter link description here

You'd need to override the styles.
.ant-select-show-search.ant-select:not(.ant-select-customize-input)
.ant-select-selector {
height: auto;
}
.ant-select-single.ant-select-show-arrow .ant-select-selection-item {
white-space: normal;
word-break: break-all;
}
CodeSandbox

Related

How to apply word-wrap to ANTD Select title and dropdown items so that it changes the height of the element?

I want my ANTD title/selected item to go to the next row and modify the height of the Select.
I have worked on this example: https://codesandbox.io/s/basic-usage-antd-4-24-7-forked-8jzp29?file=/demo.js
The styles that I am looking to target are:
.ant-select-item-option-content {
white-space: break-spaces;
word-break: break-word;
}
.ant-select-show-search.ant-select:not(.ant-select-customize-input)
.ant-select-selector {
height: auto;
}
.ant-select-single.ant-select-show-arrow .ant-select-selection-item {
white-space: normal;
word-break: break-all;
}
How can I target those when using CSS modules ?
I have added a class to the dropdown using the ANTD Select API popupClassName="_dropdown" which only accepts strings but this is ignored when using CSS modules.

Why Codemirror editor does NOT scroll horizontally with long line?

I've a code mirror version: 5.65.3 with Blazor. When I've a long line in the editor the horizontal scroll doesn't work, it rather uses the scroll of the page which mess out the whole page.
Like this:
I don't think that I changed any CSS in Codemirror.
Here is some related CSS lines:
.CodeMirror {
/* Set height, width, borders, and global font properties here */
font-family: monospace;
height: 750px;
color: black;
direction: ltr;
}
.CodeMirror-scroll {
overflow: scroll !important; /* Things will break if this is overridden */
/* 50px is the magic margin used to hide the element's real scrollbars */
/* See overflow: hidden in .CodeMirror */
margin-bottom: -50px; margin-right: -50px;
padding-bottom: 50px;
height: 100%;
outline: none; /* Prevent dragging from highlighting the element */
position: relative;
z-index: 0;
}
I'm calling the codemirror through this code: (the onchange is because I'm using Blazor for binding purposes )
window.editor= function (dontNetObjRef) {
editor = CodeMirror.fromTextArea(document.getElementById('myTextArea'), {
lineNumbers: true,
indentUnit: 4,
lineWrapping: true,
tabMode: "shift",
gutters: ["CodeMirror-lint-markers"]
});
//JavaScript function use the onchange event of CodeMirror to invoke the C# method and pass the value of the myTextArea .
editor.on("change", editor => {
dontNetObjRef.invokeMethodAsync("UpdateField", editor.getValue());
// console.log(editor.getValue());
});
Note: even if I used lineWrapping: true it moved to the second line and does the same issue with scroll.
Also, it works well when I set a fixed width like 1000px but I'd like to make it auto in case the screen size of the user changes.
Thanks to Jax-p for giving me some hints to fix the issue.
I've add width:70vw in .CodeMirror class and max-width:70vm in .CodeMirror-scroll
Another thing that was affecting the changes is that I was putting the textarea in inside a <div class=col-11> which was affecting the width in the CSS so I just removed that and everything is working.
While working on a project I've encountered the same issue - that is a problem with CSS.
I fixed it with that pretty simple flexbox solution:
<div class="root-wrapper"> <!-- Editor parent container -->
<div class="cm-editor ͼ1 ͼ2 ͼ4"> <!-- CodeMirror stuff (v6 in my case) -->
...
</div>
</div>
The corresponding styling:
.root-wrapper {
display: flex;
flex-direction: row;
.cm-editor {
width: 0;
flex-grow: 1;
}
}

Styling Material UI Button

Hi I just started using Material UI and am having a hard time styling the components. I am building a sign in page and would like my Submit button to be all the way to the bottom right. If someone can help me out that would be greatly appreciated because it seems to be inheriting styles from everywhere else but where I would like to!
I have tried adding
textAlign: 'right'
to buttonStyle and that does not work. I have also tried adding
text-align: right;
to my .form-button CSS.
The only thing that affects anything is removing the .App
Login.js
<div className='form-container'>
...
<Button
style={buttonStyle}
className='form-button'
variant='contained'>
Log-In
</Button>
</div>
...
const buttonStyle = {
backgroundColor: '#527354'
};
App.css
.App {
text-align: center;
}
.form-button {
width: 83px;
height: 36px;
box-shadow: 0px 1px 3px #00000033;
}
.MuiButton-label {
color: var(--primary-white);
font-family: 'Open Sans', sans-serif;
}
.form-container {
max-width: 400px;
margin: 2rem auto;
overflow: hidden;
padding: 0 2rem;
}
Another main goal would be to avoid inline styling because I do prefer keeping it within my style sheet. But if not possible or too overly difficult, I will inline style (as I did with the background-color).
As keikai has mentioned in the comment, you may check the Documentation in this link material-ui.com/styles/basics for overriding style.
For 'it seems to be inheriting styles from everywhere else'
I will suggest you to use styled-components instead of global css import, which mess up everywhere. Try this,
npm install --save styled-components
It creates a css class that only apply to the component.
Sample code:
import styled from 'styled-components'
const MyDiv = styled.div`// can be span, section, etc
// add your style here for the div
your div style(optional)
// your class css inside the div
.form-container {
max-width: 400px;
margin: 2rem auto;
overflow: hidden;
padding: 0 2rem;
}
// add more class if you have any
`
Then wrap your component with
// your newly created styled div
<MyDiv>
// component that needs your style
<MyComponent />
</MyDiv>
Your style will only be applied to MyDiv and MyComponent, and nothing else.
It may took awhile to get used to it, but it is extremely useful.

ionic 4 "ion-option" text wrap

I am working with ionic 4 and i am having a problem trying to do a text wrap inside a "ion-select"
my select looks like this:
if i change my css directly on google chrome ( Style section on the "inspect element" menu) to "white-space: pre-wrap"
It looks like this:
and this is what i want to get.
on my HTML code i have this:
<ion-item>
<ion-label>Dirección de Entrega<a style="color: brown;">*</a></ion-label>
<ion-select [(ngModel)]="ordHerder.addressId" popover >
<ion-option style="white-space: pre-wrap !important;" *ngFor="let item of register_data.directions" value="{{item.recId}}" text-wrap>{{item.direction}}</ion-option>
</ion-select>
</ion-item>
and my css:
shopping-car-delivery {
.alert-ios .alert-radio-label{ white-space: pre-wrap !important;}
.alert-md .alert-radio-label{ white-space: pre-wrap !important;}
.alert-wp .alert-radio-label{ white-space: pre-wrap !important;}
}
Thanks :)
just add this in your app.scss if you are using ionic 4
.alert-radio-label.sc-ion-alert-md {
white-space: pre-line !important;
}
.alert-radio-label.sc-ion-alert-ios {
white-space: pre-line !important;
}
Adding this to app.scss worked:
ion-label {
white-space: normal !important;
}
Fixed it by overriding alert-radio-label.sc-ion-alert-md , alert-radio-label.sc-ion-alert-ios and updating whitespace to pre-line in page.scss
.alert-radio-label.sc-ion-alert-md {
padding-left: 52px;
padding-right: 26px;
padding-top: 13px;
padding-bottom: 13px;
flex: 1;
color: var(--ion-color-step-850, #262626);
font-size: 14px;
text-overflow: ellipsis;
white-space: pre-line;
}
Also, reduced font-size to 14px, since my text was around 35-40 characters.
.
If none of the above solutions works try root level css changes like below
:root {
ion-popover ion-select-popover ion-radio-group ion-item ion-label{
white-space: pre-line !important;
}
}
the css white-space should be extended to pre-line so your .scss would be
shopping-car-delivery {
.alert-ios .alert-radio-label{ white-space: pre-line !important;}
.alert-md .alert-radio-label{ white-space: pre-line !important;}
.alert-wp .alert-radio-label{ white-space: pre-line !important;}
}
if you are with Ionic 4 then just use class="ion-text-wrap" for wrapping text anywhere in element.
Ionic 4 CSS Classes Reference :- https://ionicframework.com/docs/layout/css-utilities
For Ionic 3 you can use class="text-wrap"
By default, select uses the AlertController API to open up the overlay
of options in an alert. The interface can be changed to use the
ActionSheetController API or PopoverController API by passing
action-sheet or popover, respectively, to the interface property.
To customize the ion-select options with interface="popover" in ionic, do the following:
Solution: Add the code in global.scss(Ionic4) and outside page-app tags in app.scss(Ionic3) so that the following css is accessible outside the component
.popover-content ion-list ion-label
{
font-size:12px !important;
}
Detailed Explanation:
The problem is that options inside ion-select are added as a Popover/Alert/Actionsheet.
The HTML code for showing the ion-select interface is produced outside the component i.e. outside the ion-router-outlet component.
So, any code you put inside your component's scss file to change looks of ion-select options will not reflect in the browser.
Example: How DOM looks like: (Ionic 4)
Ionic 3
This will change the look of ion-select option throughout the App
To customize it for different pages, I did it by adding and removing a custom class from the main app selector
ionViewDidEnter()
{
let appRoot:any=document.getElementById('myAPP');
this.renderer.setElementClass(appRoot,'customIonSelectCSS',true); //add
}
ionViewDidEnter()
{
let appRoot:any=document.getElementById('myAPP');
this.renderer.setElementClass(appRoot,'customIonSelectCSS',false); //remove
}
ion-select is using the alert to show the options, so you need to override the default styles
Step1:
.alert-tappable.sc-ion-alert-md.sc-ion-alert-ios {
display: contents !important;
}
by default, display: flex; change it to the display: contents !important;
Step2:
.alert-radio-label { white-space: pre-wrap !important; }
by default, white-space: nowrap; change it to white-space: pre-line !important;

Will CSS attribute selector work to style this element?

I have the following html:
<div class="bf_form_row">
<label for="findout">Text goes here</label>
<textarea class="findOut" cols="40" id="findout" name="findout" rows="10"></textarea>
</div>
I trying to work out how to style the 'label' element without being able to change the html.
Ideally I'd like to style all 'label' elements that come before 'textarea' elements but I don't think it is possible using just CSS.
I thought this attribute selector would work:
label[for="findout"] {
width: 100%;
}
but no, any ideas?
It works. To see it in action, try changing the color. Anyway, if you want the width to be 100%, I would suggest adding display: block;
label[for="findout"] {
display: block;
width: 100%;
}
Use two classes for ex:- 1] before_textarea 2] after_textarea
.before_textarea {
width: 100%;
// style to label which comes before teaxtarea
}
.after_textarea {
width: 100%;
// style to label which comes after teaxtarea
}
Use the selector:
.bf_form_row label
{
styles
}
This will select all label elements inside the parent with class of bf_form_row.
Hope that helps :)

Resources