I have table where inside one column is name and level (number) - I want name on the left side and level "sticked" to right side.
Width of columns is dynamic.
If there is enough space everything is fine, but on smaller screens it makes ugly "line breaking" - shown on image.
Does anyone have some idea how to keep everything in one line?
Structure and style (very simplified)
...
<td>
<span class ="nowrap">
<a style ="float:left;">Name</a>
<span style ="float: right;" class ="level">10</span>
</span>
</td>
...
You can set positive right margin to the anchor and negative left margin to the span:
.nowrap > a {
margin-right: 30px;
}
.nowrap > span {
margin-left: -30px;
}
Look how it works: http://jsfiddle.net/ZF8mh/
Add the style to your list on the particular column with display: inline-block;
like
<td style="display:inline-block;">
<span class="nowrap">
<a style="float:left;">Name</a>
<span style="float:right;" class="level">10</span>
</span>
</td>
Apply the style in <td> tag as I have done or in <a> tag.
Related
When I hover over the table cell, it should show the Angular Bootstrap popover next to the text upon over. However, the 'span' element is still its full width.
<td style="max-width: 50px; text-align: left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">
<span popover="I appeared on mouse enter!" popover-trigger="mouseenter" popover-placement="right" >This is some text. This is some text. This is some text. This is some text. </span>
</td>
Screenshot of issue
How can I get the popover to display directly next to the text?
I tried putting a max width on the span itself, but that didn't seem to work.
Think I found a solution:
1) Change the 'span' element to a 'div'
2) Add this styling to the div:
style="white-space:nowrap; overflow:hidden; text-overflow:ellipsis;"
Within a table cell, I'm trying to display an image, and to its right centered vertically against the image two lines of text. The following does the centering, but the anchor tag from the first line wraps to the beginning of the next line. I've noticed this in both Chrome and IExplorer.
How do I clean up the display so that it doesn't display the leading dash on the second line?
<td>
<div>
<a href="some_other_page.html" title="Something Else">
<img class="tblimg" src="my_picture.png" style="display:inline-block; vertical-align:middle"/>
</a>
<span style="display:inline-block; vertical-align:middle">
This thing
<br>This has a leading line from the above anchor
</span>
</div>
</td>
That leading dash is actually the underline that is shown on links by default. To remove that, just apply the style: text-decoration: none; to your <a> tags.
Below is the results when I remove the default link styling:
#image-link {
text-decoration: none;
}
<td>
<div>
<a href="some_other_page.html" title="Something Else" id="image-link">
<img class="tblimg" src="my_picture.png" style="display:inline-block; vertical-align:middle"/>
</a>
<span style="display:inline-block; vertical-align:middle">
This thing
<br/>This has a leading line from the above anchor
</span>
</div>
</td>
EDIT: If you want to remove the underline for just the image, give the <a> tag that wraps around the image an ID or unique class (in my sample, I gave it an ID of image-link) and declare text-decoration: none; for that ID/class.
try box-decoration-break:none; and text-decoration:none; as well as border:none;
Add an inline:block style to the anchor containing the image, like so:
<a href="some_other_page.html" title="Something Else" style="display:inline-block">
I have a bunch of columns of info that look like this:
<span style="width:280px;float:left">
some stuff
<span>
<span style="width:280px;float:left">
some stuff
<span>
<span style="width:280px;float:left">
some stuff
<span>
<span style="width:280px;float:left">
some stuff
<span>
etc . .
given that people have different browser widths, if a person has a monitor with a small width, some of the columns wind up wrapping to the next line. In this case, i would want a horizontal scroll bar to show up and keep everything on the same line. What is the correct way of doing this?
Simply place your span elements in a container:
<div>
<span>...</span>
<span>...</span>
...
</div>
Then remove the float property from your span elements, and instead set them to display as inline-block and give your new containing element a white-space of nowrap to prevent them from falling onto a new line:
div {
white-space: nowrap;
}
div span {
display: inline-block;
width: 280px;
}
If you really insist on using the style property on each individual element (which is bad practice) instead of including CSS like I've used above, this would be equal to:
<div style="white-space: nowrap;">
<span style="display: inline-block; width: 280px">...</span>
<span style="display: inline-block; width: 280px">...</span>
...
</div>
How can I put an <img> next to a <div> so the image vertically aligns in the middle?
<img src="http://devcentral.f5.com/weblogs/images/comment-icon.gif"><div style="font:10pt Arial;padding:5px;background-color:#ccc;"><span style="float:right">No. 1</span><span style="font-weight:bold;padding-right:10px">John Doe</span><span style="color:#808080">11/14/2010 3:23:44</span></div>
I know how to do it using a table:
<table style="font:10pt Arial">
<tr>
<td style="vertical-align:middle"><img src="http://devcentral.f5.com/weblogs/images/comment-icon.gif"></td>
<td style="width:100%">
<div style="padding:5px;background-color:#ccc;border-top:1px solid #DEDEDE"><span style="float:right">No. 1</span><span style="font-weight:bold;padding-right:10px">John Doe</span><span style="color:#808080">11/14/2010 3:23:44</span></div>
</td>
</tr>
</table>
But I wonder if I could do it without a table.
Thanks in advance!
Rain Lover
To be honest from your example I have a feeling you may be taking slightly the wrong approach for this.
Personally I would attach this icon to the div as a CSS background-image. Afterwards, you could apply padding to the left of the div equal to the width of the image (plus a few more pixels for spacing). Then, you will be able to use background-position to do something like this:
background-position:0px center;
This will give you the higher degree of control that I think you're after.
With block elements such as img and div, you cannot position them vertically in the centre of something without actually having a something (element) to vertically centre them inside of.
Having said that it is still not possible aside from using some sort of hack. The far simpler method would be to use a relative position on one of the elements and offset its position such that it visually creates the same effect, or use a margin/padding to do the same.
It can be done the following way. There is no easy way to center unless you have it inside an element with a specific height and can be played with. This can be viewed at http://jsfiddle.net/jawilliams346614/CvpUB/1/
<div>
<img src="http://devcentral.f5.com/weblogs/images/comment-icon.gif" style="float:left; padding:5px;">
<div style="font:10pt Arial;padding:5px;background-color:#ccc;">
<span style="float:right">No. 1</span>
<span style="font-weight:bold;padding-right:10px;float:left;">John Doe</span>
<span style="color:#808080">11/14/2010 3:23:44</span>
</div>
</div>
now if you increase your font size, you will have to change padding to:
padding-top: 5px; // change in sync with bottom to center in text
padding-bottom: 5px;
padding-left: 5px;
padding-right: 5px;
I have two elements (a button and an anchor tag) both with a dynamical text inside that grow to the length of their content.
I cannot know which one of them will be the longest at compile time, nor can I know what the maximum/minimum width will be.
The shorter one should always adapt to the longest one.
<span id="buttonsColumn">
<button type="submit" name="powerSearchSubmitButton" id="powerSearchSubmitButton">
<span><em><%=ViewData.Model.T9nProvider.TranslateById("CommonWeb.Search")%></em></span>
</button>
<a class="linkButton" href="something">
<span><em><%=ViewData.Model.T9nProvider.TranslateById("CommonWeb.Advanced")%></em></span>
</a>
</span>
The wrapping span can be changed to anything desired.
Any ideas?
You could try something like this:
#buttonsColumn {
display: block;
float: left;
background-color: #F88;
}
#buttonsColumn button,
#buttonsColumn a {
display: block;
}
#buttonsColumn button {
width: 100%;
background-color: #8F8;
}
#buttonsColumn a {
width: 100%;
background-color: #88F;
}
As I see it, you could do it two ways:
Figure out the length on the ASP side and set a variable with the length of the larger, then use that in a size property on each.
Write a javascript function to figure out which of the two is larger and set the length of both to that.
Might I suggest you give up and use tables?
They are still part of the specification after all, and what you're doing could be construed as tabular data. All you'd need to add would be a style="width:50%" to each table data tag and a style="width:100%" tag to the button.
<table>
<tr>
<td style="width:50%">
<button type="submit" style="width:100%" name="powerSearchSubmitButton" id="powerSearchSubmitButton">
<span><em><%=ViewData.Model.T9nProvider.TranslateById("CommonWeb.Search")%></em></span>
</button>
</td>
<td style="width:50%">
<a class="linkButton" href="something">
<span><em><%=ViewData.Model.T9nProvider.TranslateById("CommonWeb.Advanced")%></em></span>
</a>
</td>
</tr>
</table>
You can probably get rid of those spans within the button and anchor tags, they don't seem to serve a purpose unless your CSS is doing something with the span children of the container.