I want to use the mat-slide-toggle, but have the title wrap (as it's a bit long). How can I achieve that. I just want to have the title wrap and keep its default place to the right of the toggle
<mat-slide-toggle class="slider">A really long title wrapped</mat-slide-toggle>
I tried flex-wrap but doesn't work
.slider {
flex-wrap: wrap !important;
font-size: 13px;
}
You can see how the wording is coming outside the container
Most likely you will have to drill down to the text content using ::ng-deep.
If you did not know, 'mat' elements are usually comprised of various other elements and grouped together. For example, here is what looks like under the hood.
In this case, <span class=""mat-slide-toggle-content></span> is actually where the text is located. So while you are applying text-wrap to 'slider' class, it is not actually affecting the correct element. We can see that this class is responsible for the lack of text-wrapping.
To drill down into these styles you can use ::ng-deep. So instead of what you are trying, try something like:
::ng-deep .mat-slide-toggle-label .mat-slide-toggle-content {
white-space: normal;
overflow: visible;
text-overflow: unset;
}
Related
I have an Angular/Material side panel containing label/input control pairs. An example is below pairing a label with a mat-slide-toggle:
<div class="flex justify-between items-center">
<span class="mat-slide-toggle-content">
{{ 'StringReference' | translate }}
</span>
<mat-slide-toggle [ngModel]="booleanValue" (ngModelChange)="handleModelChange($event)" name="aToggle" color="primary">
</mat-slide-toggle>
</div>
Since some of the label text could be long, particularly in translated versions, I'd like to have a "backup plan" maintaining the layout but still making the label text accessible. The ellipsis works fine when the label is too wide and text-overflow: ellipsis is set.
Maintaining access to the whole string is my problem. I'd like to "tooltip-ize" the label text, floating it above the neighbor control on hover without relayout, showing the whole string. I can change the text-overflow setting, of course, and generally stretch the label to fit, but this causes a relayout of the control, which I don't like. Since I have hundreds of such labels, I don't want an HTML or JavaScript solution with tooltips or similar.
Any CSS-only thoughts that might work?
This might not be the perfect answer as your code snippet wouldn't render here, but I imagine it's just a side pullout kind of thing. Here's a potential, CSS-only solution that you could work with; I just used bootstrap columns to show cutoff and expansion:
Concept: Toggle styles on active state.
Example: https://stackblitz.com/edit/ellipsis-but-shown-on-active
The gruntwork would be in the two custom classes which I modeled for col-4 at a certain width:
.col-4-overflow {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
cursor: pointer;
}
.col-4-overflow:active {
overflow: visible;
text-overflow: inherit;
background: cornsilk;
position: relative;
min-width: 66.66666666666666%;
margin-right: -180px;
z-index: 1;
}
You might be able to figure out a more elegant replacement for the margin-right and z-index values of the active state, I dunno. :)
I'm not even sure if this is possible, but I figured it was worth asking.
It would be pointless me trying to explain, I'm rubbish at things like that, so check out this demo - http://www.deanelliott.me/braintrain/
See how the titles on the 6 images have an orange background colour? And now see how the padding is missing from the right hand side of the first, and left hand side of the second line?
Is it possible to add padding there so that the background doesn't just stop at the end/beginning of the word?
Or should I tell them it's unfeasable and they'll have to live with it?
The issue here is you can't pad at word end/start where the content wraps, so this won't be possible unless you change the display type for the links to a block-style type, e.g. "block" or "inline-block", but naturally that affects the appearance somewhat.
You can get slightly further by adding:
white-space: pre-wrap;
to the .blog-grid .grid-block h2 a, #sidebar h2 a rule; however it's not a complete solution (but it's all I can come up with).
.blog-grid .grid-block h2 a, #sidebar h2 a {
/* other css properties */
display: inline-block; /* or display: block */
}
Adding text-indent in CSS can also work
text-indent: 10px;
add some code to class "post-title tilt" - it answeirs for your titles.
write maybe padding-left:20px; or if it won't work: margin-left:20px;
can you edit the code? adding span for each line should work
span class="line1" and span class="line2"
<a href="#">
<span class="line1">a safe alternative to</span>
<span class="line2">ritalin</span>
</a>
How can I align the bottom of an inline block (call it 'IB') with the bottom of the text - excluding descenders like that on 'g' - in a parent element (call it 'PE')? This should be in a way which generalises whatever the size of the text - I don't want to hardcode size-specific pixel values.
Here is an example of the HTML I'd use, with the classes I'd need CSS for:
<div class="pe">
Parent text line
<span class="ib" style="display: inline-block;">
- and child text line
</span>
</div>
And here's what I'd like it to look like:
OP updated saying: "Thanks, but I've edited the question to clarify I don't want to hardcode size-specific pixel values."
In that case, I'm afraid there isn't a solution that will automatically fix different lines with different text sizes. The other solution I provided isn't even perfect across all of the browsers with some combinations of font sizes, because Chrome/Opera round inexact values differently than Firefox/IE, so even with my solution, you'd need to use some browser-specific css. The only thing similar to an universal solution would be setting vertical-align: middle; but I wouldn't trust that to work consistently.
You can add below css to ib. And change the bottom margin to control alignment.
.ib{
display: inline-block;
font-size: 10px;
vertical-align: bottom;
margin:0 0 1px 0;
}
#Rorok_89 I know i am adding one more line of css but its justa way to do it in a different way. Your answer is perfect.
This seems to have worked for me: http://jsfiddle.net/Rorok_89/Z8TWH/
.ib{
display: inline-block;
font-size: 10px;
vertical-align: 1px;
}
Please, take a look to this piece of code:
<span class="something">
<label>test1</label><br/>
<label>test2</label><br/>
<label>test3</label>
</span>
This will create a vertical list of labels. Is possible to do this without the <br> tags using CSS? It is, is possible to show the same vertical aligned label list with this HTML code?:
<span class="something">
<label>test1</label>
<label>test2</label>
<label>test3</label>
</span>
You could do this:
span.something label {
display: block; /* as opposed to display: inline; */
}
This works because by default <label>s are inline elements. If you change them to display block they will display in a list with line breaks between them.
However this is probably a bad way to do what you want. What you really want is an unordered list:
<ul class="something">
<li>test1</li>
<li>etc...</li>
</ul>
To get rid of the bullet points:
ul.something {
list-style: none;
}
Or, without changing the contents of the span to block elements:
span.something label:after {content: '\A'; white-space: pre-line}
See http://jsfiddle.net/VsnKx/
Edit: Another way (if you don't mind floats) is
span.something label {float:left; clear:both}
which doesn't use :after, although it does use floats, which may be undesirable. You also will have to clear the first element after the span.
You can set display:block for the labels, which will adjust them to be displayed on a new line.
Example:
http://jsfiddle.net/niklasvh/eZ8t5/
It is possible. Use this css code:
span.something label{
display:block;
clear:both;
}
Yes, there are several ways, those mentioned in other answers as well as setting label { display: table-row}. However, there is no apparent reason not to use br tags or div containers or a table in HTML, if you want the labels on separate lines, and no apparent reason for wanting that (what is a label without an associated input field?).
In code we got from a "psd2html"-service, I see a lot of spans surrounding the contents of div-tags.
I know the difference between spans and divs, but I cant figure out why the code looks like this:
<div class="forgot-password">
<span>Forgot password?</span>
</div>
...
<div>
<span>Sign in</span>
</div>
Instead of just:
<div class="forgot-password">
Forgot password?
</div>
...
<div>
Sign in
</div>
I'm guessing its either some kind of cross-browser fix, or perhaps to "prepare" for the future if we want to put more stuff into the divs?
Edit:
Here is the CSS for the forgot-password part:
div.forgot-password
{
float: left;
width: 145px;
height: 22px;
margin-left: 3px;
}
div.forgot-password span
{
display: block;
float: left;
padding-top: 3px;
padding-left: 0px;
}
div.forgot-password span a
{
color: #C5C5C5;
text-decoration: none;
}
Although plain text can be "naked" in a div, some consider it good practice to wrap text content with an inline tag such as a span. This means you can separate out inline styles from block styling. With respect to your psd2html service, what you are seeing is an artefact of the conversion algorithm. Any algo is only going to have a finite set of rules. In this case I am guessing there is a rule like "wrap text in a span", and a rule like "wrap links in an a". In your example above, all your text content is a link, so you are seeing
<span><a..>text content</a></span>
From an HTML perspective, in this case the outer span is unnecessary. However it doesn't do any harm, and for styling purposes - unless you want to change the css - you need to keep them in.
To me it looks like overly complicated code. It would make sense if the code was:
<div class="forgot-password">
<span> some text </span> Forgot password?
</div>
So that you can discriminate text and links in CSS or jQuery.
Here we should look at the CSS to see what is done, but my first impression is that the span's could be removed since they add no semantic nor operational meaning.
To me, span has always been a way of quickly formatting text in a css compliant way. So I would suppose that they add spans to prepare for further formatting, but as no formatting is given, they don't apply any stylesheets, thus the span is "empty".
I'd say that these spans could as well be removed. They don't hurt in that case, but they don't have any use here.
It looks like these are buttons being marked up here, so it might be used for the Sliding Doors technique, so you can have two background images, so that if the content grows, you'll still have nice corners. It's probably just something they do on all things which look like buttons, but they might not use it to its full potential everywhere.