Fill remaining space by increasing font - css

I have an issue where I want to fill the remaining (very dynamic) space of the box by increasing (and decreasing) the font size as much as possible.
http://jsfiddle.net/urqL1evn/2
Right now, all i have is:
.textbox {
margin: 0 5em;
margin-top: 0.5em;
width: 80%;
font-size: 30px;
white-space: pre-wrap;
}
The page will be viewed on a 1920x1080 50" TV with 100% windows scaling.
I will add and remove sections to the point where there will only be one on the screen and maximum 4.
Any help is very appreciated!

Here is solution for your problem:
$(document).ready(function() {
$('.textbox').each(function() {
let that = $(this),
textBoxHeight = parseInt(that.height()) + 20, // +20 its sum of margin-top + margin-bottom of .textbox element
parentHeight = parseInt(that.parent().height()),
fontSize = parseInt(that.css('font-size'))
while(textBoxHeight > parentHeight)
{
fontSize -= 1
that.css({'font-size':fontSize+'px'})
textBoxHeight = parseInt(that.height()) + 20 // +20 its sum of margin-top + margin-bottom of .textbox element
}
})
})
http://jsfiddle.net/urqL1evn/21/
CSS has changed (margin in em > px)
.textbox {
margin: 10px 20px;
width: 80%;
font-size: 100px;
white-space: pre-wrap;
}
So you need to set .textbox font-size to 100px and then in JS we're lowering it down all the time until height of .textbox element is not equal or lower than it's parent element. It's very simple and it works just fine.
I hope this is answer for your question.
Don't forget to use jQuery library.

Related

Angular 8: Change Height in Mat-form-field to Specific pixel number

How can I change height in mat-form-field with appearance="outline" to a specific height pixel number, 40px (or any required number from UX team in the future). I need to reduce the mat-form-field.
How can this be done? What is the equation, or which part number can be modified to change to 40px?
-1.1? .75 , 133%, Looking for some kind of function or math equation using answer below, or any other option which may work.
https://stackoverflow.com/a/54762506/12425844
::ng-deep .mat-form-field-flex > .mat-form-field-infix { padding: 0.4em 0px !important;}
::ng-deep .mat-form-field-label-wrapper { top: -1.5em; }
::ng-deep .mat-form-field-appearance-outline.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label {
transform: translateY(-1.1em) scale(.75);
width: 133.33333%;
}
Not sure exactly from where you want to cut, so I'll give you a few options and you can decide what and how much you want to cut in order to get the right size
To remove the margins from top and bottom
::ng-deep mat-form-field.mat-form-field-appearance-outline .mat-form-field-wrapper {
margin: 0;
}
To change the font size
mat-form-field {
font-size: 10px;
}
To remove the hint and errors (space in the bottom)
::ng-deep .mat-form-field-wrapper {
padding-bottom: 0;
}
::ng-deep .mat-form-field-subscript-wrapper {
display: none;
}
To change the padding (default is 1em for top and bottom)
::ng-deep .mat-form-field-appearance-outline .mat-form-field-infix {
padding: .5em;
}
Note: if you choose to do the last one you will also have to change the top or margin-top of the .mat-form-field-label like this
::ng-deep .mat-form-field-appearance-outline .mat-form-field-label {
top: ...;
margin-top: ...;
}
You can check it out here, on your project dependencies (#angular/material 8.2.3): node_modules\#angular\material\_theming.scss
Line ~ 4540 : #mixin _mat-form-field-outline-label-floating and mat-form-field-outline-typography :
// Used to make instances of the _mat-form-field-label-floating mixin negligibly different,
// and prevent Google's CSS Optimizer from collapsing the declarations. This is needed because some
// of the selectors contain pseudo-classes not recognized in all browsers. If a browser encounters
// an unknown pseudo-class it will discard the entire rule set.
$mat-form-field-outline-dedupe: 0;
// Applies a floating label above the form field control itself.
#mixin _mat-form-field-outline-label-floating($font-scale, $infix-padding, $infix-margin-top) {
transform: translateY(-$infix-margin-top - $infix-padding + $mat-form-field-outline-dedupe)
scale($font-scale);
width: 100% / $font-scale + $mat-form-field-outline-dedupe;
$mat-form-field-outline-dedupe: $mat-form-field-outline-dedupe + 0.00001 !global;
}
#mixin mat-form-field-outline-typography($config) {
// The unit-less line-height from the font config.
$line-height: mat-line-height($config, input);
// The amount to scale the font for the floating label and subscript.
$subscript-font-scale: 0.75;
// The padding above and below the infix.
$infix-padding: 1em;
// The margin applied to the form-field-infix to reserve space for the floating label.
$infix-margin-top: 1em * $line-height * $subscript-font-scale;
// The space between the bottom of the .mat-form-field-flex area and the subscript wrapper.
// Mocks show half of the text size, but this margin is applied to an element with the subscript
// text font size, so we need to divide by the scale factor to make it half of the original text
// size.
$subscript-margin-top: 0.5em / $subscript-font-scale;
// The padding applied to the form-field-wrapper to reserve space for the subscript, since it's
// absolutely positioned. This is a combination of the subscript's margin and line-height, but we
// need to multiply by the subscript font scale factor since the wrapper has a larger font size.
$wrapper-padding-bottom: ($subscript-margin-top + $line-height) * $subscript-font-scale;
// The amount we offset the label from the input text in the outline appearance.
$outline-appearance-label-offset: -0.25em;
.mat-form-field-appearance-outline {
.mat-form-field-infix {
padding: $infix-padding 0 $infix-padding 0;
}
.mat-form-field-label {
top: $infix-margin-top + $infix-padding;
margin-top: $outline-appearance-label-offset;
}
&.mat-form-field-can-float {
&.mat-form-field-should-float .mat-form-field-label,
.mat-input-server:focus + .mat-form-field-label-wrapper .mat-form-field-label {
#include _mat-form-field-outline-label-floating(
$subscript-font-scale, $infix-padding + $outline-appearance-label-offset,
$infix-margin-top);
}
// Server-side rendered matInput with a label attribute but label not shown
// (used as a pure CSS stand-in for mat-form-field-should-float).
.mat-input-server[label]:not(:label-shown) + .mat-form-field-label-wrapper
.mat-form-field-label {
#include _mat-form-field-outline-label-floating(
$subscript-font-scale, $infix-padding + $outline-appearance-label-offset,
$infix-margin-top);
}
}
}
}
I got you bro, Some easy Resolution is:
add this on your css
::ng-deep .mat-form-field-appearance-outline .mat-form-field-flex {
height: 40px !important
}
::ng-deep .mat-form-field-infix {
padding-top: 1px !important;
}
exaplained
Here you can control your mat-form-field height as you want.
::ng-deep .mat-form-field-appearance-outline .mat-form-field-flex {
height: 40px !important
}
And with this bellow you can control your mat-form-field placeholder padding to match with the new height that you put.
::ng-deep .mat-form-field-infix {
padding-top: 1px !important;
}
I tried here and work fine
you can add panelClass tp your mat-form-field like below:
your component.html:
<mat-form-field panelClass="example-class"></mat-form-field>
and style it in global css file
styles.scss:
.example-class{
height:40px
}

Responsive CSS Type scaling based on longest word in a list

I'm getting familiar with vmin vh etc
but I need a mroe elegant solution to display a list of words say:
apple
banana
lemon
pineapple
so the list takes always the maximum width of thew viewport...based on the longest word in this case 'pineapple'
using just CSS is it possible?
If you want a list element to always take x width of a page while keeping the elements boundaries fluid as to expand around its content ( instead of a fixed width ) you could use a solution that combines an inline-block display with a vw unit on the font-size of the html element. This, however scales everything in the entire page accordingly.
( make full-screen and resize the page to see the list adapt )
// All javascript is necessary only for the button to demo list growth.
function addCnt(){
var pinapl = document.getElementById( 'pinapl' );
pinapl.innerHTML += 'e';
}
var cnt = document.getElementById( 'cnt' );
cnt.addEventListener( 'click', addCnt );
html,
body {
margin: 0;
height: 100%;
}
html {
font-family: sans-serif;
font-size: 6vw; /* setting vw value on HTML makes elements resize to viewport width */
}
body {
display: flex;
}
ol {
display: inline-block; /* making list element inline-block forces content to determine its width */
margin: auto;
background-color: #eee;
list-style-position: inside;
}
.cnt {
cursor: pointer;
padding: 10px;
background-color: #000;
color: #eee;
font-size: 16px;
position: absolute;
}
<ol>
<li>apple</li>
<li>banana</li>
<li>lemon</li>
<li id="pinapl">pineapple</li>
</ol>
<div id="cnt" class="cnt">
click to add content
</div>
No, in pure CSS you cannot tell "set the font-size so the longest word fits in viewport automatically". You'll need JavaScript, presumably FitText:
http://fittextjs.com/ / https://github.com/adactio/FitText.js

CSS Multi Line ellipsis Cross Browser

There is a "div" in my webpage that has fixed width and height.
Following css only works with single line text:
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
How can I apply ellipsis on multiline text on the text inside that div using pure css with cross browser compatibility?
Try this example:
display: block; /* Fallback for non-webkit */
display: -webkit-box;
max-width: 400px;
height: $font-size*$line-height*$lines-to-show; /* Fallback for non-webkit */
margin: 0 auto;
font-size: $font-size;
line-height: $line-height;
-webkit-line-clamp: $lines-to-show;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
http://codepen.io/martinwolf/pen/qlFdp
or go for dotdotdot.js
This workaround will require a wrapping element and has a small caveat of covering the very end of your text if it exactly fills your content box, but it works well enough in fluid situations until a better css property (like line-clamp) is widely implemented.
Works best with text-align:justified, but not necessary.
https://codepen.io/freer4/pen/prKLPy
html, body, p { margin: 0; padding: 0; font-family: sans-serif;line-height:22px;}
.ellipsis{
overflow:hidden;
margin-bottom:1em;
position:relative;
}
.ellipsis:before {
content: "\02026";
position: absolute;
bottom: 0;
right:0;
width: 3em;
height:22px;
margin-left: -3em;
padding-right: 5px;
text-align: right;
background-size: 100% 100%;
background: linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
z-index:2;
}
.ellipsis::after{
content:"";
position:relative;
display:block;
float:right;
background:#FFF;
width:3em;
height:22px;
margin-top:-22px;
z-index:3;
}
/*For testing*/
.ellipsis{
max-width:500px;
text-align:justified;
}
.ellipsis-3{
max-height:66px;
}
.ellipsis-5{
max-height:110px;
}
<div class="ellipsis ellipsis-3">
<p>Reacts to content height. That is, you don't need to fix the height of your content containers. We expect no ellipsis here (unless your viewport is narrow)</p>
</div>
<div class="ellipsis ellipsis-3">
<p>Here we can have a great many lines of text and it works as we expect it to. Here we can have a great many lines of text and it works as we expect it to. Here we can have a great many lines of text and it works as we expect it to. Here we can have a great many lines of text and it works as we expect it to.</p>
</div>
<div class="ellipsis ellipsis-5">
<p>The number of lines shown is easily controlled by setting the max-height of the .ellipsis element. The downsides are the requirement of a wrapping element, and that if the text is precisely as long as your number of lines, you'll get a white area covering the very trailing end of your text. You've been warned. This is just some pushing text to make the element longer. See the ellipsis? Yay.</p>
</div>
To bad CSS doesn't support cross-browser multiline clamping, only WebKit seems to be pushing it. Any other hacky solutions don't really seem worth it at the moment because even they have their own issues.
I know how you want pure CSS and probably have your own Javascript alternative options but you could try and use a simple Javascript ellipsis library like Ellipsity on github the source code is very clean and small so if you do need to make any additional changes it should be quite easy.
https://github.com/Xela101/Ellipsity
I'm really wanting a pure CSS solution to this too to speed things up and make everything look more pretty without the need of external dependencies.
var explorer = detectIE();
function detectIE() {
var ua = window.navigator.userAgent;
var msie = ua.indexOf('MSIE ');
if (msie > 0) {
// IE 10 or older => return version number
return parseInt(ua.substring(msie + 5, ua.indexOf('.', msie)), 10);
}
var trident = ua.indexOf('Trident/');
if (trident > 0) {
// IE 11 => return version number
var rv = ua.indexOf('rv:');
return parseInt(ua.substring(rv + 3, ua.indexOf('.', rv)), 10);
}
var edge = ua.indexOf('Edge/');
if (edge > 0) {
// Edge (IE 12+) => return version number
return parseInt(ua.substring(edge + 5, ua.indexOf('.', edge)), 10);
}
// other browser
return false;
}
var firefox = navigator.userAgent.indexOf('Firefox') > -1;
if ((explorer) || (firefox)) {
var fontSize = $(".ellipsis-2").css('font-size');
var fontSize = parseInt(fontSize, 10);
var lineHeight = fontSize + 4;
var height = lineHeight * 2;
$(".ellipsis-2").css("line-height", lineHeight + "px");
$(".ellipsis-2").css("height", height);
$(".ellipsis-2").css({
"overflow": "hidden",
"position": "relative",
"word-break": "break-all"
});
var divheight = $(".ellipsis-2").height();
var lineheight = $(".ellipsis-2").css('line-height').replace("px", "");
var countline = Math.round(divheight / parseInt(lineheight));
// if you want to show 2 line
if (countline > 2) {
$(".ellipsis-2").addClass("dotted");
};
}
.ellipsis-2 {
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
position: relative;
}
.dotted:after {
content: "...";
position: absolute;
bottom: 0;
right: 0;
background: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="ellipsis-2">Reacts to content height. That is, you don't need to fix the height of your content containers. We expect no ellipsis here (unless your viewport is narrow)</p>
You could solve it using some after pseudo classes. As text-overflow: ellipsis doesn't render the same cross browser we are adding ellipsis using the content attribute that you can provide to the :after class. When we are setting white-space: nowrap to the p we need to add the div:after "hack" to ensure that the text is clipped where the padding sets in.
HTML:
<div>
<p>This is a text that clips to ellipsis because it is long</p>
<p>This is a text that clips to ellipsis because it is long</p>
</div>
CSS
div {
width: 200px;
padding: 20px;
border: 1px solid #ccc;
overflow: hidden;
position: relative;
}
//Solves the overflow issue of the white-space: nowrap
div:after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 20px;
background: #fff;
z-index: 1;
}
p {
white-space: nowrap;
display: inline-block;
}
p:after {
content: '...';
position: absolute;
right: 5px;
z-index: 2;
}
JSFiddle
Edit
I can see that I might have misread your question a bit. My code will fix Cross-browser ellipsis rendering but not for multi-line text. Check out this post for more answers on your specific topic: Limit text length to n lines using CSS: Stack Overflow

css to align title and everything below it

I wish to align the title and summary(click the plus sign in site below)
as shown in the screenshot
my site
http://pligg.marsgibson.info/
screenshot
http://i47.tinypic.com/ntn55.jpg
suggest css for this
Without changing your current markup, a simple fix can be:
CSS
.title h2 {
color: #187AAB;
font-size: 14px;
font-weight: bold;
margin: 4px 0 0;
padding: 0 20px 0 32px;
position: relative;
}
.title h2 span {
left: 0;
position: absolute;
}
Print-screen:
What I did was to give some left and right padding to the h2 element, to limit the space available for the text inside it.
Then, to place the avatar on the proper place, I've used the CSS position.
EDITED
To address the issue of your trigger element, add to its CSS:
p.trigger {
position: relative;
z-index: 1;
}
EDITED
To address the height issue mentioned on the comment!
See this working Fiddle Example!
jQUery
// run only if elements are found
if ($('.title').size()>=1) {
// initialize variables
var $target = $('.title'),
size = 0,
count = $('.title').size();
// for each element found
$target.each(function() {
// check the tallest element
if (size===0) {
size = $target.outerHeight(true);
} else {
sizeTMP = $target.outerHeight(true);
size = (sizeTMP> size) ? sizeTMP : size;
}
// decrease the counter
count--;
// counter is 0, set the height
if (count===0) {
$target.css({ "height" : size + "px" });
}
});
}
Ps: The CSS display declaration for the class .subtext1 must be updated to: display:inline-block.

Safari Conditional CSS

How can I add css to be only read by safari? bascially a div needs moving 5pixels to the left, as it shows fine on ff/ie etc
Thanks
EDIT - added code
code:
#subheading
{
background-color: #004376;
color: #ffffff;
height: 25px;
padding: 10px;
margin: 0 933px;
margin-top: -25px;
width: 761px;
}
you can have a check for a specific css property in webkit. This would likely work in chrome as well.
#media screen and (-webkit-min-device-pixel-ratio:0) {
.someClass{
color:#FF0000;
}
}
margin: 0 933px;
margin-top: -25px;
width: 761px;
This doesn't sound right. The first line sets both left and right margin to 933px. And the width is 761px. The total width of the element would be (933 * 2 + 10 * 2 + 761) = 2647px.
Is this what you want it to be?

Resources