I've been using Materialize on my cards and want the titles to truncate.
I tried to use the simple code example materialize has on their website but it won't work. Here is my example:
<div class="card hoverable waves-effect waves-light">
<div class="card-image" id="house-pic" style="height: auto;">
...
</div>
<div class="card-content" style="padding-left: 0px; padding-right: 0px;">
<span class="detail truncate card-title activator" style="font-size: 17px;">{{house.address}}</span>
</div>
<div>
I also use the min.css and js libraries on their website. It seems simple enough, but the cards just stretch if the text is too long. Please let me know if you have any ideas, thanks.
I'm not sure where exactly in your code is the problem so I'm guessing:
I supposed the card is stretching because of the text being too long in this section:
<span class="detail truncate card-title activator" style="font-size: 17px;">{{house.address}}</span>
I would replace span element with a div element like so:
<div class="detail truncate card-title activator" style="font-size: 17px;">{{house.address}}</div>
Because span is an inline element vs div which is a block element.
An inline element does not start on a new line and only takes up as
much width as necessary.
vs
A block-level element always starts on a new line and takes up the
full width available (stretches out to the left and right as far as it
can).
Necessary vs available :D
Related
I have this calendar I'm making, I positioned the elements with absolute position within the rows, like this:
every element is positioned with absolute position so it is not part of the flow, so the problem is, if I have an element that the text within is too long, the element will slip down and cover/will be covered by another element, like this:
Now idealy i want the element that is covering the long elment to go down. But because the long element is positioned with absolute position and not relative he can't push the element down (I don't want to use scroll here on the long element, I want to see the whole text).
And I also can't use position relative because then I will not be able to position the elements right on the X axis, because they will push other elements to the left by their width. and i don't want that because the position is calculated by the days the event accured on.
Basically I need absolute position on the X Axis, and relative on the Y Axis.
Any ideas on how to solve this issue will be appretiated. (maybe a library the can do the thing above ^)
edit: also can't use grid since i want to support old browsers.
Actually i would use bootstrap grid system, it lets you position column evenly inside rows.
In addition, I would say that if an element need more space, the whole row should expand.
Take a look:
.col{
border: solid 1px;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col">
Wow that is a really long text that is slipping
</div>
<div class="col">
text
</div>
<div class="col">
text
</div>
</div>
<div class="row">
<div class="col">
text
</div>
<div class="col">
text
</div>
<div class="col">
Wow that is a really long text that is slipping even more than the last one
</div>
</div>
<div class="row">
<div class="col">
text
</div>
<div class="col">
text
</div>
<div class="col">
text
</div>
</div>
I added the border property so you can see more clearly.
You can read through the docs about how it works
good luck.
I am trying to use JS Affix to keep 2 blocks in a sidebar column staying fixed on the page.
Upon scrolling, the width of the sidebar is expanded a bit and the expanded portion overlaps the main body column.
I have tried manually setting div widths and using percentages, but all changes I make end up having same behavior.
Here is the relevant code:
<div class="menu block tile-default" id=sidebarmenu" data-spy="affix" data-offset-top="195" data-offset-bottom="300" style="border:0px;">
<img src="/img/sidebar-top.png" class="img-responsive" alt="sidebar image">
<div class="pad">
<ul class="nav nav-pills nav-stacked">
#include('partials/menu')
</ul>
</div>
<div style="background-color: white; height: 10px; border:0px"></div>
<div class="pad" style="border: 4px solid orange; background-color: #1d6899; color: ghostwhite">
<a href="https://zoom.us/webinar/register/Pt9LgDTBR828OXIHOfTLPQ" class="thumbnail" target="_blank">
<img class = "img-responsive" src="/img/img.png" alt="...">
<div class="caption">
<h5 class="text-center">Some Caption</h5>
</div>
</a>
</div>
</div>
You can see what I am talking about here:
https://guitar-dreams.com/guitar-lesson/triad-arpeggios-2-strings/20
There it might be easier to follow the CSS as well.
Notice how when you scroll down, the navigation menu and the block below it expand to the right a bit and overlap the main body. This problem only manifested after I added the 2nd block below the menu.
I have read a lot about strange affix behavior so maybe this is just instance where affix is not ideal solution. In any case, wondering if there is some glaring problem causing this that is readily fixed. Me being a guitarist trying to do some basic coding I am sure I am overlooking something obvious!
Thanks!
Brian
I have a button inside a div which is inside a div and I am trying to have the button in and inner div ignore the parent divs padding here is my code
<div style="padding:10px; background:red;">
<div style="width:100%; margin:-10px;">
<button style="background:blue; width:100%">
Some test text
</button>
</div>
</div>
Can be seen in fiddle here https://jsfiddle.net/5sc5y4z3/.
setting the margin:-10px works on the leftside but then, the button is 20px short on the right side.
How can I extend it so it fills the whole width of the parent div?
Thanks
100% width doesn't include the negative margins. You need to add it back:
<div style="width:calc(100%+20px); margin:-10px;">
CSS calc() is supported in all modern browsers since IE9, so it's safe to use in most web development projects.
Use this instead:
HTML:
<div style="padding:10px; background:red;">
<div style="width:100%;background-color:lime">
<button style="background:blue; width:100%">
Some test text
</button>
</div>
</div>
It's getting clipped, so you could also use the following to mask the right side:
HTML
<div style="overflow: hidden; margin:-10px;">
Did anyone knew how a tags in the browser are indexed?
I have in my html page 12 items wich are created with a tags, the problem is that when I want to focus the first tag with
document.getElementsByTagName("a")[0].focus(); the browser don't focus the first item! and if I just want to focus the third item by document.getElementsByTagName("a")[2].focus(); it focuses the item number 5.
I am wandering why I have this problem since in my page I have only the wanted items to be focused by a tags and the other html items are div and img tags!
Thanks a lot in advance for your help and reply :)
here is an exmaple of 2 items created in my html page:
<div id="carousel_items">
<div id="indicators" class="carousel-indicators" style="visibility: visible;">
<div id="nextBtn" class="right_indicator">
<img id="indicators_right" src="images/nextbtn.gif" style="width:45px;height:25px;">
</div>
</div>
<div id="div_slides" class="thumbnailList_slides">
<div class="div_vid">
<a id="btn0" class="btn_vid" href="#" onclick="javascript:activate('0');"> </a>
</div>
<div class="div_vid">
<a id="btn1" class="btn_vid" href="#" onclick="javascript:activate('1');"> </a>
</div>
</div>
Elements are returned in the order in which they appear in the DOM.
Various things can make that order different to the order you see them when viewing from left-right and top-bottom including:
text direction
float: right
CSS positioning
Flex order
I am creating a tumblr theme and when you hover over a photo post it shows a description (example description shown below).
The designer only wants the first three lines of the description to show and place ellipses after after the description if it overspills 3 lines.
What's the best way of going about this considering that a character count isn't a good enough?
Thanks for the help...
http://brendan-rice.tumblr.com/
Example Photo Post
<div class="description photo" style="background-color: rgb(82, 69, 99);">
<div style="">
<input type="hidden" value="22186233340" class="id">
<span class="title" style="">
<p style="">
staff:
</p>
<blockquote style="">
<p style="">
<strong style="">Attention West Coast:</strong> Check out our official Tumblr meetup in Los Angeles on Tuesday 5/1! RSVP here.
</p>
</blockquote>
<p style="">
(Source: <a title="meetups" href="http://meetups.tumblr.com/post/21804989817/were-gonna-be-in-la-tuesday-night-come-grab-a" style="">meetups</a>)
</p>
</span>
<div class="actions" style="">
<span style="float: left;">
<a target="_blank" href="http://www.tumblr.com/follow/penguinenglishlibrary " class="follow" style="">
Follow </a>
</span>
<span style="float: right;">
<a target="_blank" href="http://www.tumblr.com/reblog/22186233340/Pw5OgVj1" class="reblog" style="">
Reblog </a>
</span>
<span style="float: right;">
<a target="_blank" href="http://www.tumblr.com/reblog/22186233340/Pw5OgVj1" class="like" style="">
Like </a>
</span>
</div>
</div>
</div>
EDIT: just found this: http://dotdotdot.frebsite.nl/ which should solve your issue (jquery plugin)
As far as I know there is no way to make it wrap to three lines and then ellipsis.
If you just want the ellipsis after 1 line, use:
.class{
width:200px;
text-overflow:ellipsis;
white-space:nowrap;
overflow:hidden;
}
However, you can do some tricky css to emulate it, though it won't be perfect 100%. I've attached a jsfiddle with the emulation: http://jsfiddle.net/ET3F8/
Essentially, its wrapping to 3 lines and then becoming hidden. There is an element containing the ellipsis text ("...") which is positioned at the bottom right of the container. It will cover the text and emulate ellipsis.
Issues:
- It will always display. You could perhaps use some JS to hide it if the text is not overflowing.
- It sometimes will break a letter.
Anyway, just an idea!
Just use text-overflow: ellipsis, but you'll need to fix the width of whatever it is you want the content restricting on. Something like:
.myClass
{
width: 200px;
text-overflow: ellipsis;
}
Does this CSS meet your needs?
text-overflow: ellipsis;
You're bound to a specific height but does the trick for me.
.description .title {
height: 3.7em;
overflow: hidden;
}