In my code, I have a 2 lined text. I want to move the second text (nth-child(3): 10 x apples) to the line below when the width of the screen changes. I have tried display:block and white-space:pre. But it didn't work and the sentence did not move to next line. My code and a screenshot is below. What should I do to achieve this?
#media (min-width: breakpoint-max(sm)) {
.fruit-detail {
& :nth-child(3) {
display: block;
}
}
}
<div class="fruit-detail">
<span class="day-one ng-star-inserted">
"Yesterday"
</span>
<span class="ng-star-inserted">
Today
</span>
<span> 10 x </span>
<span>Apples</span>
</div>
You could wrap "10 x Apples" around a parent container and give it:
.parentContainer::after{
content: "\a";
white-space: pre;
}
Don't know if it works tho, though I don't have sass installed.
This is just a suggestion because it worked for me :).
You can toggle the visibility for a break tag by providing a class to it and setting display:none; to it in your main css and display: block in your matching media query.
Refer to this for a practical example : https://codepen.io/darshiljani/pen/QWxdqpz
You are selecting the third .fruit-detail.
I don't think you can use display:block here because "10x" and "Apples" won't be side by side.
You can select the second span and add a line break with :after (or the third with :before)
.fruit-detail:nth-child(3) {
background-color: orange;
}
.fruit-detail span:nth-child(2):after {
content: "\a";
white-space: pre;
}
<div class="fruit-detail">
<span>"Yesterday"</span>
<span>Today</span>
<span> 10 x </span>
<span>Apples</span>
</div>
<div class="fruit-detail">
<span>"Yesterday"</span>
<span>Today</span>
<span> 10 x </span>
<span>Strawberries</span>
</div>
<div class="fruit-detail">
<span>"Yesterday"</span>
<span>Today</span>
<span> 10 x </span>
<span>Bananas</span>
</div>
Related
How to set the primeNG dropdown width to stretch 100% inside its container?
It seems to have fixed element.style and the .ui-dropdown{ width: 100% } override
does not work.
In my case I used autoWidth = false and set style attrribute like below
<p-dropdown [options]="educationLevels" [(ngModel)]="selectedEducationLevel"
name="educationlevel" autoWidth="false" [style]="{'width':'100%'}"></p-dropdown>
I found to use the Responsive approach and apply .ui-fluid style with Grid CSS at container while p-dropdown should have the [autoWidth]="false" attribute.
Example:
<div class="ui-grid ui-grid-responsive ui-fluid">
<div class="ui-grid-row">
<div class="ui-grid-col-12">
<p-dropdown [autoWidth]="false"></p-dropdown>
</div>
</div>
</div>
For me,
[style]="{'minWidth':'100%'}"
does the trick!
Then I used like this:
<span style="width: 100%">
<p-dropdown [style]="{'minWidth':'100%'}" [options]="items" [(ngModel)]="selecteditem"></p-dropdown>
</span>
You should be writing in a css file using the mentioned class as below,
.ui-dropdown {
width:100% !important;
}
Set it to be !important
LIVE DEMO
You should be editing a class in a primeng.min.css file as below,
.ui-dropdown .ui-dropdown-panel {
min-width: 100%;
width: max-content;
}
<p-dropdown id="id" [options]="list"></p-dropdown>
then Dropdownlist should take size of biggest option.
For me:
.ui-dropdown {
max-width: 100%;
}
Did the trick, here is my html:
<p-dropdown
[options]="sitBusinessPartner"
[filter]="true"
[(ngModel)]="businessPartner"
(onChange)="changeBusinessPartner()"
[autoWidth]="false"
></p-dropdown>
Edit, I suggest to use this:
.ui-dropdown.ui-dropdown-clearable .ui-dropdown-label {
text-overflow: ellipsis;
}
.ui-dropdown .ui-dropdown-label {
text-overflow: ellipsis;
}
In order to handle a possible text overflow and display a nice ellipsis like this:
This solution was adapted from here.
You can try this
html:
<div class="p-col-10">
<span class="p-fluid">
<p-dropdown></p-dropdown>
</span>
</div>
css:
.p-dropdown-panel {
left: 0 !important;
max-width: 100% !important;
}
.p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item {
white-space: inherit;
}
Try this in css file.
:host ::ng-deep .p-dropdown {
width: 100%;
}
What I did and worked for me:
Using the grid system you can choose how many "columns" to display the element. For example, if you want to stretch 100% inside the container, consider that the element is occupying 12 columns, like in the code below:
<div class="p-formgrid p-grid">
<div class="p-field p-col">
<p-dropdown></p-dropdown>
</div>
</div>
But let's say you want to put another element next to it and want them to have the same width, you'd have something like that:
<div class="p-formgrid p-grid">
<div class="p-field p-col">
<p-dropdown></p-dropdown>
</div>
<div class="p-field p-col">
<element></element>
</div>
</div>
You can also have different widths for each element, based on how many columns they are occupying:
<div class="p-formgrid p-grid">
<div class="p-field p-col-7">
<p-dropdown></p-dropdown>
</div>
<div class="p-field p-col">
<element></element>
</div>
</div>
The sum of the columns has to be 12. If you said the first element is 7 columns long, the second will get 5 columns automatically. Try different values and see what works best for you.
The [autoWidth] attr was removed in v7 but I was able to achieve this with >7 version using styleClass="w-100":
<p-dropdown styleClass="w-100" ...>
"autoWidth" did not work for me, I just did this in my CSS:
p-dropdown {
min-width: 80%;
}
.ui-dropdown{
width: 100%;
}
I am learning Selectors and not.
What I am trying is to PUT the text of the span in color red BUT NOT the text of the link, combining both. It is just to learn.
My HTML code
<div>1
<p>2
<span>Here red
<a>Here NOT red
</a>
</span>
<div>3
</div>
</p>
</div>
What I am trying to do with CSS
div p span:not(:nth-child(0)) {
color: red;
}
/* Or */
div p span:not(a) {
color: red;
}
Anyone can help me? I do not want to set another rule for A. It is just to learn as I said.
Thanks!
There were a couple of issues with your page. One is that you had an extra div closing tag. Second, the a tag defines a hyperlink, so it should have an href attribute. Your a tag had no attributes.
Take a look at this snippet
span:not(a) {
color: red;
}
<div>1
<p>2
<span>Here red
Here NOT red
</span>
</div>
</p>
</div>
Alternatively, you could just close the span tag before the a tag, and then just select the span element.
I need to hide a <label> when on a small mobile view.
Here's the html:
<label class="page_createpassword_label" for="page_createpassword">
<span class="page_label_main">Span Text</span>
<span class="page-hide">. </span>
<span class="page-label-hint">
<strong>Information text</strong>
<span class="page-hide">. </span>
<span>More Span text</span>
</span>
</label>
The label is currently hidden using :before and :after selectors but as I'm trying to make it work for Android 2.3 so I can't use these.
The current CSS to hide the <label> is as follows:
.page-label-hint:before,
.page-rtl .page-label-hint:after {
display: none;
}
And
.page-label-hint:before {
left: -21px;
}
Is there any way to hide the label using another method and avoiding the :before and :after selectors? I was perhaps thinking along the lines of display: none.
Thanks
#media all and (max-width: 450px) {
.page_createpassword_label {
display:none;
}
}
You can now hide the label in the mobile view. ;) Might need to adjust the media query to suit your needs. You can read about media queries here: http://css-tricks.com/css-media-queries/
Enjoy
I'm working with a layout that uses flexbox. Works good so far but I have a problem with copying text to clipboard.
Apparently, using flexbox seems to add a newline character after each child node
It can be seen in the demo below, copying text "LabelMessage" works normally (paste it and it remains one-line). But if you add display:flex to container a newline is added after "Label" upon copying to clipboard
What is causing this? Is there any way around it?
Fiddle: http://jsfiddle.net/zv4mamtm/
$('.toggleFlex').on('click', function() {
$('.container').toggleClass('flex')
})
.container.flex {
display: flex;
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="toggleFlex">toggle</span>
<hr>
<div class="container">
<span class="label">Label</span>
<span class="label">Message</span>
</div>
<hr>
<textarea></textarea>
As specified in the previous answer and this post :
In a flex container the child elements ("flex items") are automatically "blockified" ( more details )
depending on your use case, using display: contents can be helpful if you only want to copy / paste text,
see : how display contents works
The easiest way to understand what happens when display: contents is used is to imagine the element’s opening and closing tags being omitted from the markup.
and from the specification :
For the purposes of box generation and layout, the element must be treated as if it had been replaced in the element tree by its contents
( you might want to check the compatibility of this as it won't work in IE and Edge )
$('.toggleFlex').on('click', function() {
$('.container').toggleClass('flex')
})
.container.flex {
display: flex;
color: red;
}
.container.flex span {
display: contents;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="toggleFlex">toggle</span>
<hr>
<div class="container">
<span class="label">Label</span>
<span class="label">Message</span>
</div>
<hr>
<textarea></textarea>
this will override the display:block of the span caused by th flex container :
I am trying to adjust the CSS so the "product" and product information is centered and not floated to the left I cannot adjust the HTML as its given via a shortcode thats added into the WP post but maybe I could wrap it in a div?
HTML:
<ul class="products ribbon">
<li class="product last first">
<a href="http://dailybabydeals.co.nz/shop/estella-rose-designs/">
<div class="thumbnail">
<span class="onsale">Sale!</span>
<img width="325" height="325" src="http://dailybabydeals.co.nz/wp-content/uploads/2013/02/Front-Page-325x325.jpg" class="attachment-shop_catalog wp-post-image" alt="Front Page" />
<div class="thumb-shadow"></div>
<strong class="below-thumb">Estella Rose Designs</strong>
</div>
<span class="price"><span class="from">From: </span><del><span class="amount">$25</span></del> <ins><span class="amount">$19.95</span></ins></span>
</a>
<div class="buttons">
Select options</div>
</li></ul>
CSS:
CSS
Okay, let's try this again now that I understand your question better. So you want to center the <ul> element as a whole? That is a lot simpler than what I originally thought you were going for.
To do that, all you need to do is wrap the <ul> element in a span tag that is set to display as an inline-block. Then set the containing element so that its text is centered.
Try this:
<html>
<head>
<style language="text/css">
/*<![CDATA[ */
#test1 {
text-align: center;
}
#test2 {
display: inline-block;
text-align: left;
}
/* ]]> */
</style>
</head>
<body>
<div id="test1">
<span id="test2">
<!-- Place your <ul> element here -->
</span>
</div>
</body>
</html>
how it works
The "test2" element is set to display as an inline-block, which means it displays inline with the text. This means that it can then be affected by properties that manipulate lines of text, such as "text-align".
Setting "text-align" to "center" on the "test1" element makes the inline content -- the "test2" element in this case -- within it become centered on the screen.
The standard way to center a block is to set the "margin-right" and "margin-left" properties to "auto", but that only works for elements that are displayed as blocks and that have a width that is less than 100%.
I would just put it in a div and float it next to another div with nothing in it.
http://www.barelyfitz.com/screencast/html-training/css/positioning/
Like in step 8 in this link.
The reason that it looks like the text "Sale!" is floated to the left is that <img> elements display as inline blocks by default, so the image is on the same line of text as the words "Sale!". A <br /> tag immediately following the text "Sale!" would solve that problem; but you said you can't modify this HTML, right?
Given that restriction, here is how I was able to solve the problem...
Surround the HTML from your example in a <span> tag and assign it a class. I used "test" as my class name".
Then Place this CSS in the head of the HTML document:
<style language="text/css">
/*<![CDATA[ */
.thumbnail img {
display: block;
}
.test {
display: inline-block;
}
.test .price, .test .below-thumb {
display: block;
text-align: center;
}
/* ]]> */
</style>
why it works
The selector for making the image display as a block solves the problem of the missing <br /> tag.
The span tag with which you surrounded the HTML displays as an inline block. This means that it will collapse around its contents, giving you a box within which you can center the text.
Making the items that contain the text display as a block causes them to take a width of 100%, filling the surrounding box
The inclusion of "text-align: center" is what finally makes the text display as centered within its container