I'm using FullCalendar with the resource library that you can see in my JSFIDDLE
How you can see the problem of the resource (first column, second column) is the overlapping. Seems infact if the resource have a long name go to overlap the near column and this is bad for me. What I want is cut the resource name if exceeds a certan lenght, anyway, the label must not overlap the next cell.
Issue image:
Final result
Something like: First col | Second col
You seem to want to hide the overflow.
Your calendar's table header elements are overflowing into each other.
CSS:
#calendar tr th div.col-label{
overflow-x: hidden;
}
This will make the overflowing text not draw instead of drawing on the next cells.
EDIT: Fixed this making the events disappear
EDIT 2: Fixed messing up the Date Label
Another way to solve your problem is by setting a min-width property on your columns in order to ensure that each one will have enough space available to store it's data. And then use width:100%; property on your labels. Maybe use some padding as well in order to make it look nice. Let me know if this helped :)
Related
I'm trying to achieve this using flexbox where the icon and text are set with flex row property, but what i want to do is basically getting the full email without extending the border limit. I tried with flexbox wrap property but that doesn't apply here since its a single p tag.
Any solutions?
Perhaps
white-space:nowrap;
But if there is not enough space, the email address whill necessarily go out of the box :-(
A simulator to test the result of white-space.
I have 3 div's images are below. They pull the entire column and display it. I need it to only display say 255 characters. And then I have a Read More link where they can click to go to the full article.
You see how the box on the left has the Read More I would like all 3 boxes to display part of the content and then have the read more link. The only reason the first box works is because the content is super small to begin with.
The site is HTML5 with CSS and some CSS3.
The information is being pulled in from Entity/LINQ I assume I will need to limit the content there?
Here is one example:
db.TPGForums.Where(m => m.boardID == 11)
.SelectMany(m => m.TPGForumTopics)
.SelectMany(m => m.TPGForumPosts)
.OrderByDescending(p => p.dateCreated)
.FirstOrDefault();
Everything is wrapped in a <div class="news-block">content</div>
How can I achieve this?
EDIT:
Another issue that may cause problems is the content being pulled in is HTML Decoded. So only pulling part of it may cause some HTML Errors on the page with the possibility of some things not being closed properly. So I think my only option now is to limit it through the size of the div and hide the over flow.
You would need to limit the content where it is being pulled in. Alternatively you could set a max height with overflow hidden and use some sort of a gradient to keep the bottom edge from looking janky. Or you could use text-overflow: ellipsis.
I create dynamic HTML pages with 3 columns. Each column can contain a variable amount of text - from 0 to 1000 words. I want the text in the 3 columns look approximately the same height. So, I want to have the column widths change automatically according to the amount of text they contain.
In HTML, this happens automatically in a table, when each cell has a single div of text, see the first table here:
http://tora.us.fm/_script/demotables.html
However, when the cells contain several divs, this doesn't work anymore, see the second table there. The leftmost column is very narrow and tall, instead of being wider and shorter.
Adding a "width" attribute to the leftmost column (by clicking the button) shows the expected result. However, I do not know in advance what column should be what width.
Is it possible to have it adjusted automatically?
A jsfiddle: http://jsfiddle.net/erelsgl/RJa2k/5/
Try to add to the css this td div{white-space: nowrap} or this td div{display: inline}.
Is that the result you need?
With the help of my friend, Eden Erez, I found a hack that partly solves the problem:
In each TD, print the content a second time - inside a special div, like this:
< td >
< div class='autowidth' >
$content
< /div >
$content
< /td >
In the stylesheet, insert this:
.autowidth {visibility:hidden;}
.autowidth * {display:inline;}
In some of the cases, this will make the browser set the column widths as though they are single-paragraph, but still display them as multi-paragraph. See an example here:
http://jsfiddle.net/erelsgl/RJa2k/76/
This works surprisingly good in most cases.
I need to create three divs, next to each other (attribute float:left).
Then I read the data from database and I need to present this data in three divs, in such a way that I first fill up the first div, line by line and when I reach certain height, I go to the next div and fill it with data, and so on.
This is something like reverse table, that is I first fill the first column in first row then go to second and so on until the end of the row, then I move to the second column of first row
and so on. I hope you get the picture.
Is there a way to achieve this in CSS or in some other way?
This functionality is available in CSS3 using column-count and column-span.
I do not know how to make it efficient, but it should be possible with javascript... you know the line-height, you check the height of first div with all content, then you truncate it to desired size and the rest put to the next div.. repeat.. but this looks odd.. ?
You might be able to do this by requesting the first 30 results in the database in one column, then request the next 30 in the next div, and so on. I can't see it being possible in CSS 2.1 alone.
I've got a table on a webpage, with (say) 8 columns, and it's worked just fine until recently...
A user registered with an email address for a display name (not a huge issue, but the email is massive). Now, as one of the columns is a 'reported by' containing username, any pages with said user on them now have a massive 'reported by' column...
I should also emphasise, the table width was 100% (minus a 'margin') prior to this issue, and it worked just fine).
Is there a clever way to introduce a line break on a '.' or an '#'? Alternatively, how do people normally get around this? Interesting solutions to this annoying problem are welcomed!
When you generate your html table content code, truncate every content extracted from your database to a maximum width. Your truncating function can easily add a tooltip giving the full label.
Alternatively, do this in javascript on pageload. Parse every table cell and truncate the content if it's too large. It's not as nice as server-side truncating, though.
The upside is that you can give the full label in a tooltip, append '...' to let the user know the label is truncated, etc.
Use the table-layout css property.
table-layout: fixed;
http://www.quirksmode.org/css/tables.html#tablelayout
You could set a max-width on the column and overflow:scroll or even overflow:hidden.