The title of my event is to long to be entirely displayed. How can I wrapped it on more than one line so I can see the whole title ?
It is because of this piece of CSS that the title gets wrapped.
.fc-day-grid-event .fc-content {
white-space: nowrap;
}
Add the CSS below, after fullcalendar.css:
.fc-day-grid-event .fc-content {
white-space: normal;
}
jsfiddle
Related
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;
I have an element
<div class="Test_then">The result is ...</div>
The Test_then class looks like this:
.Test_then::before {
content: 'Then';
}
My goal is to have the (The result is ...) appear below the Then content added by the Test_then class. So in other words in would render like this:
Then
The result is ...
If your generated content simply consists of the word "Then" inline, you can just add a newline with \a, and use white-space: pre-wrap (or pre) to cause the newline to render as an actual line break:
.Test_then::before {
content: 'Then\a';
white-space: pre-wrap;
}
An example of this is also provided in the spec.
If your generated content needs to be displayed as a block for any reason, then it becomes even simpler — display: block alone will have the same effect:
.Test_then::before {
content: 'Then';
display: block;
}
I want to do a line break with CSS. I´m using content.
td:before {
content: "Test\A Test2";
}
It´s not working.
How to do it correctly?
You must add white-space:pre;
Example
.linebreak:after{
content:"A" '\A' "B";
white-space: pre;
}
<div class="linebreak"></div>
I would like to replace horizontal line rendered by default by the <hr> tag with three asterisks (horizontally centered). If possible, I want to achieve this with pure CSS, specifically:
I don't want to touch my markup, there should be just plain <hr>, no helper divs or anything like this (because I'm styling Markdown files);
no background images;
no Javascript.
First I tried:
hr {
width: 0;
}
hr:before {
content: "***";
}
and it almost does the trick, but I want it centered, and have no idea how to center it.
Browsers display <hr>s using borders, so:
hr {
border: none;
}
hr::before {
content: '***';
display: block;
text-align: center;
}
Slap a text-align:center on your psuedo-element.
I have the following:
<p>This is a test</p>
<pre>public class Car {
protected Car() { }
protected Car(int speed) { }
protected void Car() { }
}</pre>
<p>Another line</p>
and
pre {
font-family: monaco,consolas,"courier new",monospace;
font-size: 1em;
min-height: 3em;
overflow: auto;
padding: 1em;
xwidth: 80%;
background-color: red;
}
When the text displays the <pre> background goes the full width of the page. I have a demo here:
fiddle
What I would like is for the red background to stop just after the far most right character of my code. I don't want to see a big red area that extends from one side of the page to another.
Can someone tell me if it is possible to do this with CSS. I really am not sure as I cannot think what I can do.
Thanks
You can use display: inline-block;:
http://jsfiddle.net/hLVV9/1/
Although please check out the browser support, because it wouldn't surprise me if IE doesn't support it.
The best solution so far :
pre {
white-space: pre-wrap;
}
You can use float:left and a clearing div to achieve this.
http://jsfiddle.net/hLVV9/2/
For that behavior you will need to float your <pre>. Floated blocks of course cause some layout changes, so you need to wrap it in another clearing block element:
<div class="pre-wrapper"><pre>Lorem ipsum</pre></div>
.pre-wrapper {
overflow: hidden;
}
.pre-wrapper pre {
float: left;
}
Adding display: inline-block should do it for FF, Safari and Chrome.
But make sure to check in all browsers and how it behaves, specially IE
One more approach:
pre {
display: table;
border-collapse: separate;
}
It allows the margins to natively collapse (in contrast to display: inline-block). As a bonus, it works with a wide range of browsers starting with IE8 or even older.