How to set width to "fit-content" with additional width? - javascript

I want to know how I can set the width of an element to fit-content, but I also want to add some more width. I cannot use padding, I only want to use width. Maybe something like width: fit-content + 50px or something like that?
EDIT:
Example:
.element{
width: fit-content + 50px;
}

It's not possible to use calc() to combine intrinsic and extrinsic units. The only option here is to use padding. Since you said you cannot apply padding to your element, you would need to create a child element to carry these styles.
Here's an example (I've added background to each to visualize)
.acharb-outer {
width: fit-content;
margin: 1rem 0;
background: #ffd166;
}
.acharb-inner {
padding: 0 2rem;
background: #ef476f;
}
span {
background: #06d6a0;
}
<div class="acharb-outer">
<div class="acharb-inner">
<span>Quisque ut dolor gravida.</span>
</div>
</div>
<div class="acharb-outer">
<div class="acharb-inner">
<span>Fabio vel iudice vincam, sunt in culpa qui officia.</span>
</div>
</div>
<div class="acharb-outer">
<div class="acharb-inner">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed.</span>
</div>
</div>

Related

Calculate height of div element based on offsetHeight and clientHeight not working in Css

I want to get the exact div height that contains certain elements within it, I have margins and padding associated with that div.
here HTML:
<div class="main">
<div class="child">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
</p>
<ul>
<li>test</li>
<li>test333</li>
</ul>
<p>
<strong>testststststs</strong>
</p>
</div>
</div>
css:
.main {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
height: 60px;
overflow: hidden;
border: 1px solid #000;
}
.child{
margin: 10px 10px 10px 25px;
font-size: 13px;
line-height: 16px;
}
Js:
var cont = document.getElementsByClassName('main-class')[0];
var child = cont.getElementsByClassName('child')[0];
console.log(cont.clientHeight); //60
console.log(child.clientHeight);//40
console.log(child.offsetHeight);//40
i'm not sure if im getting the correct height for the child as the height seems to be lesser than the parent height- if that is the case why would it truncated as shown here:
https://jsfiddle.net/cudwb2yz/
I want to get the entire height of the div- child document including the content that has been hidden with the overflow:hidden property.
any idea what im doing wrong?

CSS equivalent for QML's "elide: Text.ElideMiddle"

QML Text has got a property named elide, which is used to elide some part of a text. Its CSS equivalent is text-overflow. One possible value for elide is Text.ElideMiddle, used to elide the text in the middle. I have searched such a value for text-overflow but I have not found it yet. It is possible to elide at the left and at the right in CSS (with text-overflow: ellipsis ellipsis; on Firefox only), but I want the opposite. I want something like "1 2 3 … 7 8 9" instead of "… 4 5 6 …".
So my question is simple: How to simulate QML's elide: Text.ElideMiddle in CSS? I am running short of ideas about this.
Simulation with css is possible, but I would do it in back-end (php, offline js) as that is the only way to get it right - just replacement the middle of the string with ellipsis.
I assume, that you can predict the length of this string. If not, the code will be longer by length count and condition.
With css you can cut string with less reasonable effect, imitation is possible with flex and repetition of the string. If you can't predict length of the string - back-end handling will be necessary and using css seems to be just redundancy.
... I can't force a snippet to read the function - it will be with inline js...
function elip(i,str){
var x = str.replace(str.slice(i,-i),' ... ');
document.write(x);}
/* for snippet only */
section{ background: #014; color: #fff; padding: 20px; margin: 20px auto}
p{ min-width: 5em; white-space: nowrap; display: flex; }
span{ background: #fff; color: #014; padding: 5px}
hr{ background: 0; border: 0}
/* imitation */
p{ white-space: nowrap; display: flex}
span{ display: inline-block; overflow: hidden; min-width: 1em}
.short{ width: 5em}
.mid{ width: 20em}
#css span{ max-width: 50%}
#css span:first-child{ display: flex; justify-content: flex-start}
#css span:last-child{ display: flex; justify-content: flex-end}
#css:hover span:nth-child(2){ background: #abc}
#css .triple span:nth-child(2){ color: transparent; width: 1em}
#css .triple span:nth-child(2)::before{ content: ' ... '; color: initial}
<section><h1>js</h1>
i=3 <hr>
<span><script>var i=3; var str='Beethoven'; document.write(str.replace(str.slice(i,-i),' ... '));</script></span>
<hr> i = 20; - more than string length - too much <hr>
<span><script>var i=20; var str='Beethoven'; document.write(str.replace(str.slice(i,-i),' ... '));</script></span>
<hr> i = 20 <hr>
<span><script>var i=20; var str='Lorem ipsum dolor sit amet, consectetur adipiscing elit'; document.write(str.replace(str.slice(i,-i),' ... '));</script></span></section>
<section id="css"><h1>css</h1> <h3>string - ellipsis - string</h3>
5em<p class="short">
<span>Beethoven</span><span>...</span><span>Beethoven</span></p>
20em<p class="mid">
<span>Beethoven</span><span>...</span><span>Beethoven</span></p>
20em<p class="mid">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit</span>
<span>...</span>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit</span></p>
<h3>lazy - triple string</h3>
5em<p class="short triple">
<span>Beethoven</span><span>Beethoven</span><span>Beethoven</span></p>
20em<p class="mid triple">
<span>Beethoven</span><span>Beethoven</span><span>Beethoven</span></p>
20em<p class="mid triple">
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit</span><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit</span><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit</span></p>
</section>

How to get mouse pointer to show the hand icon when i hover on a div?

<div onclick="location.href='Some-Page.php';" class="individual col-md-4">
<img style="border: 6px solid #000; width:150px;height:150px; border-radius:25px" src="facts.jpg" alt="Some Alternate">
<h4 class="my-3">Facts</h4>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</p>
</div>
I cannot use the a href code here for onlclick on the div so im using location.href. This is making my mouse pointer icon stay the same when i hover on the div unlike a href where it would change to a hand icon.
Is there a way for me to get the icon for this code too when i hover over it?
Is this the only disadvantage of using this code over the regular html code or is there something else like affecting my SEO or something?
Any help is appreciated. Thank you
You can use cursor: pointer in your CSS:
#test {
width: 500px;
height: 100px;
cursor: pointer;
background: blue;
color: white;
}
<div id="test">Hello</div>
Add this class to your div:
.pointer {
cursor: pointer;
}
See the Docs: cursor
.pointer{
cursor:pointer;
}
<div class="pointer">Hello World :)</div>

How to make a slide(up/down) without jQuery?

I am trying to make a slide(up/down) system for my collapse components (like bootstrap) but I can't get the height of the elements to animate(without height there is no possible way to animate the element I think so- if this is wrong, then how can I animate the element?)!
NOTE: [I want to use pure javascript]
document.getElementById('btn').addEventListener('click', function(){
this.nextElementSibling.classList.toggle('active');
})
body{
font-family: Segoe UI;
font-size: 1rem;
line-height: 1.5;
}
.collapse{
border: 1px solid #e7e7e7;
border-radius: .25rem;
overflow: hidden;
}
#btn{
padding: .75rem 1.25rem;
width: 100%;
border: none;
font-size: inherit;
background-color: #fff;
cursor: pointer;
}
#btn:focus{
outline: 0;
}
.collapse-content{
font-size: 95%;
padding: .75rem .75rem;
display: none;
}
.collapse-content.active{
display: block;
}
<div class="collapse">
<button id="btn"> Click Me </button>
<div class="collapse-content">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Mollitia ut explicabo nesciunt minima pariatur saepe eveniet officia ducimus perferendis suscipit?
</div>
</div>
Bare-bones vanilla javascript implementation that'll account for any internal height (with consistent transition speed) can be achieved with some minor changes to the markup.
<div class="collapse">
<button id="btn"> Click Me </button>
<div class="collapse-wrapper">
<div class="collapse-content">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Mollitia ut explicabo nesciunt minima pariatur saepe eveniet officia ducimus perferendis suscipit?
</div>
</div>
</div>
Note the addition of the collapse-wrapper div. This'll allow you to render the content and measure its height without actually displaying the content. Then it's just a simple case of showing/hiding the content on click:
* {
box-sizing: border-box;
}
.collapse-wrapper {
overflow: hidden;
transition: all 300ms ease-in;
}
const wrapper = document.querySelector('.collapse-wrapper')
const content = document.querySelector('.collapse-content')
const button = document.getElementById('btn')
let open = true
// Set initial height to content height, if shown by default
if (open) {
wrapper.style.height = `${content.getBoundingClientRect().height}px`
}
function toggleOpen () {
if (open) {
wrapper.style.height = '0px'
open = false
} else {
const height = content.getBoundingClientRect().height
wrapper.style.height = `${height}px`;
open = true
}
}
button.addEventListener('click', toggleOpen)
Here's a fiddle
You need to use max-height. Yes, it's nasty, since it means you need to set some arbitrary max height that may need to be adjusted later if the content grows. However, you cannot animate height in this situation because the height is not defined before the content opens.
Something like:
.collapse-content{
font-size: 95%;
padding: .75rem .75rem;
max-height: 0;
transition: max-height .3s;
}
.collapse-content.active{
max-height: 200px; //something bigger than what you need
}
function slide(){
document.getElementById("sliding").style.maxHeight = "1000px";
}
#sliding{
transition: 0.5s;
max-height: 0px;
overflow: hidden;
}
<button onclick ="slide();">Slide it</button>
<div id = "sliding">
<h1>It works</h1>
<p>Hello there</p>
</div>
This is sort of hacky because you have to set maxHeight to the largest you think your content will get.
Source: How can I transition height: 0; to height: auto; using CSS?

How can I detect a click on ellipsis (...) in browser?

It seems to be hopeless, because the ellipsis is not in the DOM, it's just a render trick by the browser
I am asking because I am not a html/css guru, so many ezoteric tricks may exist I am not aware...
This will be a little tricky...It looks like you are using .ellipsis class on ellipsis text...
...so try to append a span on every .ellipsis class element using each jQuery. Use position to align that span at end of text
...and then add a click event to that span
Note: I added a background color to that span just for visual
Stack Snippet
$(".ellipsis").each(function() {
$(this).append("<span class='dots'></span>")
})
$(document).on("click", ".dots", function() {
console.log("ellipsis element is clicked");
})
p {
width: 150px;
border: 1px solid;
font: 13px Verdana;
}
.ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
position: relative;
}
span.dots {
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 12px;
background: #ff000052;
z-index: 99;
cursor:pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="ellipsis">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p class="ellipsis">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p class="">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
You cannot attach events to pseudo-content, and text overflow characters are pseudo-content, in the same way content rendered by ::before and ::after is pseudo-content.
And like all pseudo-content, any clicks to it will trigger an event on the element to which it belongs.
Maybe add an event listener to the window and check if the mouse click has the same x and y coordinates as your ellipses?

Categories