I was looking to implement the following design to the HTML/CSS.
I have got problems with the text overflow in the column. Currently the table column width is given in the percentage format so that the column width will change depending on the screen size, but there is a minimum width too. In the first text column, you can see that the content is extending and produced a second line due to the long size. How to avoid this problem using the text overflow? Or any other solution? Also, you can see that a set of icons are appearing in the same row when the mouse hover takes place. At this time, the text below the icons should hide and it should be shortened as shown in the design. Can you advise me to get a solution to this problem? I have tried text-overflow: ellipsis. But I'm getting problem when the screen width changes. Since I don't have a minimum width due to the variable column width, how to cut short the text in this field? Also in the hover case ??
Please let me know if you want to know anything else.
If you don't want the text to split in multiple rows, add white-space:nowrap rule.
Then, set a max-width for the cell.
For the icons, position them in absolute to the right, with a z-index higher then the text. You'll have to add a relative position to the containing cell also.
To keep them visible over text, i've added a background color (and some left padding).
EDIT: Fix for Mozilla
Mozilla seems to ignore position:relative; for td elements.
To fix it, you've to wrap the td contents inside another div, and apply this style
.tables td {
font-weight: 400;
font-size: 13px;
border-bottom: 1px solid #E1E1E1;
line-height: 38px;
text-align: right;
white-space: nowrap;
max-width: 200px; /* just an example */
}
.tables td > div {
overflow: hidden;
width:100%;
position: relative;
}
.linkFunctions {
display: none;
padding-top: 14px;
position: absolute;
right: 0;
z-index: 999;
background-color: #FFF9DC;
padding-left: 3px;
width: 100%;
max-width: 120px; /* just an example */
text-overflow: ellipsis;
overflow: hidden;
}
It's not exactly what you want (regarding the elipsis) but comes very close.
For the <a> inside the <td> add
td a{
display:block;
overflow:hidden;
width:100%;
white-space:nowrap;
}
(You might need to add a class to them to more easily target them and not ALL <a> inside <td>s).
And regarding the hover. Float the div.linkFunctions right, add the yellow background to it and it will look like it cuts the text accordingly.
All of those require a width to be set, which doesn't make tables fluid as they are intended to be. Use this: http://jsfiddle.net/maruxa1j/
That allows you to automatically set widths on <td> as percentages and the :after automatically sizes the overflowed <span>
Related
I have looked around alot but i cant figure out what is going on here.
So i have a table with 2 td's on the first row.
left td has a image and should be h:200px and w:200px.
right td has some text and should be h:200px and w:430px.
So the total should be w:630px and h:200px but somehow if i inspect the tr its h:200px and w:630.4px so 0.4 too many which i cant figure out where its from.
i have the margin and padding set to 0px.
#logo {
height: 200px;
width: 200px;
display: inline-block;
}
#headerText {
height: 200px;
width: 430px;
background-color: #660066;
display: inline-block;
}
picture with inspecter: https://imgur.com/d4nVbq9
You need to add both your HTML and CSS codes so that we can see the result and inspect it. But from your explanation, I would say there are two things to consider:
If you want to control the size of a cell, you need to wrap the content in a div or other block elements.
Try adding overflow: hidden; and white-space: nowrap;to your table cell. Use either one that works for you.
I have a table with a column width: auto. It contains a text, which is shortened by the ellipsis when it doesn't fit a column.
Now, I want to append a number besides the text. However, I still want the text to be shortened when it is too long, but the number has to be visible anyway. Below are a few illustrations of what I am trying to accomplish.
It is also required that the number stays near the text at all times. I can make it work when the number is at the fixed position by setting the text's div.text { width: 95% }, but this is not entirely satisfactory.
Please, take a look at JSFiddle to get the idea: http://jsfiddle.net/ZRZfk/. The JSFiddle does not work as I would like it to because the width of the text is fixed.
Is it possible to solve this problem without using JS?
Use max-width instead width Demo
I think replacing width:95% with max-width:95% does what you want? Demo here
.text {
max-width:95%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
display: inline-block;
}
You can use trick with ::before and width thgough almost the whole cell.
.text::before{
content:'… (1)';
position: absolute;
display: inline-block;
color: gray;
left: 70%;
background: pink;
}
JSFiddle
In the bookmark_matrix in this fiddle
http://jsfiddle.net/sjD24/14/
I'm trying to hide content outside of the 500 px width
by setting
overflow:hidden
I'm not getting the desired effect as it wraps to the next line instead.
MDN Reference
The two examples I've seen show overflow working with vertical content, I'm not sure if this implies it does not work with horizontal content.
Please note that I do not want it to wrap. Perhaps that would have been a better title.
You have no height set, so the div's height expands as needed. There's no overflow.
You could do something like this:
#bookmark_matrix{
border: 1px dotted #222222;
padding: 5px;
width: 500px;
overflow: hidden;
height: 1em;
}
The text have a big space in the bottom here: http://jsfiddle.net/qHaFR/
And I am not able to remove it.
Can you tell me how to do it?
The wrapper, in this case <span> needs to be a block element with width and height defined. You'll also need to change the line-height to match the height of the container.
So your style would look like:
#foo {
background-color:yellow;
font-size:260px;
border:1px solid black;
width: 190px; /* if display: block; */
line-height: 200px;
display: block; /* or inline-block */
}
Just to clarify, were you trying to wrap A in an element such as <div> or <h1> you shouldn't need to declare it display: block because div and h1 are already block.
It's because the line-height is actually that big, in order for each character to be displayable there. In some languages that space is fully used. For example, if you'd type ÁĄ, you'd need whole 260px. If you're okay with not being able to display those characters, you'll need to change line-height accordingly and display it as a block:
#foo
{
background-color: yellow;
font-size: 260px;
border: 1px solid black;
line-height: 200px;
display: block; /* or inline-block */
}
If you're not okay with treating it as a block (it gets 100% width then or you'll need to set it yourself), use display: inline-block;. Also, type ÁĄ instead of A and see that the letters get their top and bottom cut. Here, see this: http://jsfiddle.net/vmVcr/.
Example of problem http://img638.imageshack.us/img638/3733/97914817.jpg
I'm trying to recode one of my older forms. It was filled with tables that I want to replace with CSS. However I'm having trouble having text and a form element aligned vertically together. As the picture shows the text defaults to starting at the top instead of in the middle. The blue highlights around the row is dreamweavers interpretation / selection of what is going on.
I have label and input divs, both floated left, inside a div called #light, which is inside a general container. This is what my css code looks like:
#contentBox{
width: 600px;
float: left;
background-color: #e2e2e2;
overflow: auto;
border-color: #c5c5c5;
border-width: 1px;
border-style: solid;
font-size: 12px;
}
#light {
float: left;
width: 500px;
padding: 15px;
background-color: #e2e2e2;
margin: 7px;
border-color: #c5c5c5;
border-width: 1px;
border-style: solid;
vertical-align: middle;
}
input {
float: right;
width: 20em;
}
label {
float: left;
text-align: right;
vertical-align: baseline;
}
Any idea what the problem is? I've tried swapping around the vertical-align in different divs, floating in different directions, getting rid of the label but I just end up with more problems rather than less.
You cannot use vertical-align on elements unless they are table cells (or displayed as such) as this article explains. Set line-height to the element height if you've only got one row of text.
Usually, to solve that problem, I use the line-height property:
Ex:
div{width:600px;font:normal normal 12px/30px Arial, Helvetica, sans-serif;}
This will set the font to 12px, and the line-height to 30px, keeping the font vertically align within the 30px of its line.
Vertical alignment of text can be incredibly annoying or incredibly easy.
If the size of all the involved elements are known, your best bet is to set manual padding/margins on the text itself to make sure it's aligned.
If the content you want to center vertically is dynamic, this is your best bet.
Not sure, but your input tag is set to "float:right", so its height won't be taken into account by the parent. Hence, the height of the parent is actually probably the height of the label (I suspect dreamweaver is not interpreting correctly what browsers do.) Try to remove the float on the input tag and see if it makes a difference.
Vertical alignment can be applied only to inline elements.
The best solution is to modify your HTML and make it like in this examples
You could go for a 'cheap' solution and apply a padding-top to the label divs.