I am trying to make a table with Vertical Text just on the header table.
Here is my CSS code:
table th.user {
.rotate(90deg);
position: relative;
padding-top: 190px;
top: -10px;
right: 0px;
width: 200px;
}
Here is the demo http://codepen.io/anon/pen/GnveJ
As you can see it works partially.
I would like to have the columns (the cells of the column where there are the name) which width fits exactly the contents (about 50 px); the same as the pic I attached to this question.
Any idea what is the best way to make the css code or js code for this purpose?
Requirement:
I am using less and jquery
Wrap the username in a span, rotate that, and set a width on the cells. If you rotate the cells, the table will render its size before it rotates the text.
table th.user span{
display:block;
.rotate(90deg);
padding: 190px 0 0 0;
position: relative;
left: 20px;
width: 200px;
}
.user, tbody td {
max-width: 50px;
}
Demo
Related
In a html css angular table that is scrollable through overflow-x, is there a way to fix the right-most column so that when i scroll from left to right, that column stays there?
I tried the sticky property, as well as creating two tables right next to eachother (which does not accomplish the task successfully. I am thinking that i should overlay two tables on top of eachother but i am not sure how i should go about this.
position: sticky appears to work fine on chrome and firefox:
div {
width: 100%;
overflow: hidden;
overflow-x: scroll;
}
table, th, td {
border: 1px solid black;
background-color: white;
}
table {
width: 1000px;
}
.sticky-col {
width: 40px;
position: sticky;
right: 0;
}
<div>
<table>
<tr><th>1</th><th>2</th><th class="sticky-col">3</th></tr>
<tr><td>1,1</td><td>1,2</td><td class="sticky-col">1,3</td></tr>
<tr><td>2,1</td><td>2,2</td><td class="sticky-col">2,3</td></tr>
<tr><td>3,1</td><td>3,2</td><td class="sticky-col">3,3</td></tr>
</table>
</div>
I have been defeated attempting to figure out how to lower an image on a website.
I have seen lots of people simply doing .img {...} and editing it that way, the problem is that I have more than one img that is using that tag so if I edit it that way, it will affect all tags that utilize it, which is not what I want. Simply put, I have an image that is displaying near the top of my website and I would simply want it lower. For the class, here is the code:
.bichon{
display: block;
margin-left: auto;
margin-right: auto;
height: 300px;
width: 850px;
}
for my class and then for the image insert:
<img src = "https://upload.wikimedia.org/wikipedia/commons/thumb/9/93/Bichon_Fris%C3%A9_-_studdogbichon.jpg/1200px-Bichon_Fris%C3%A9_-_studdogbichon.jpg" class = "bichon">
The image is centered horizontally but I simply want to lower it a bit vertically so it's not overshadowing my navigation bar.
Thanks.
.bichon {
display: block;
margin: 50px auto 0;
height: 300px;
width: 850px;
}
You can give it a margin at the top. This will lower your image. I suggest make margin-top equal to the height of your navigation bar.
.bichon{
display: block;
margin-top: 80px; //the height of your navigation bar
margin-left: auto;
margin-right: auto;
height: 300px;
width: 850px;
}
My Goal:
Here is what I'm trying to accomplish. We have an list of categories that appear on a page. The number of categories is unknown. The description can be pretty much any size... yet we want a uniform look. So, we are using the dotdotdot plugin to put ellipses on the paragraphs. When you hover over the item, it should expand the description and show the full text.
I want that hover to float or overlay whatever is below it. Due to some of my layout items (see my NOTE below) my sccontainer element doesn't have a set height. It's dynamic based on the content... with a max-height set.
When I change that height to AUTO in the hover event (which causes the text to flow down and displays all the content), I lose the background on the sccontainer element.
Some pertinent CSS:
.sccontainer { width: 280px; zoom: 1; float: left; margin: 5px 10px; padding: 0; border: 1px solid #8697a1; -moz-border-radius: 5px; border-radius: 5px; -moz-box-shadow: 0 0 6px #777; -webkit-box-shadow: 0 0 6px #777; box-shadow: 0 0 6px #777; -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=6, Direction=90, Color='#777777')"; filter: progid:DXImageTransform.Microsoft.Shadow(Strength=6, Direction=90, Color='#777777'); position: relative; background: #fff url(http://imagecss.com/images/background.jpg) repeat-x left top; }
.sccontainer .parent { position: absolute; width: 270px; }
.sccontainer .image { margin: 5px; float: left; }
.sccontainer .image img { width: 48px; }
.sccontainer .icon { margin: 0; }
.sccontainer p { margin: 8px; padding: 0; max-height: 145px; }
.sccontainer h1 { line-height: 24px; display: inline-block; vertical-align: middle; width: 200px; height: 48px; padding: 0; margin: 5px 0 0 0; overflow: hidden; }
.sccontainer h1 a { padding: 0; font-size: 24px; color: #fff; font-weight: normal; }
.sccontainer .content { position: relative; height: 210px; padding: 0 5px; font-size: 15px; line-height: 22px; width: 270px; }
.sccontainer a:hover { text-decoration: underline; }
.sccontainer.hover { height: 250px; }
.sccontainer.hover .content { height: auto; }
.sccontainer.hover .content p { min-height: 135px; max-height: none; }
jsFiddle:
Here is a jsFiddle version of what I have right now. You can see this in action, if you hover over the text in the blue box. It's a bit large, so I used jsFiddle instead of putting all the bits here code tags...
http://jsfiddle.net/ztMM5/1/
And here is a mockup of what I'd like to see. Method 5a expands slightly to show the full content.... yets overlaps the red line. None of the other items move around or are affected.
NOTE: Sorry for the size of things. I've trimmed it down about as much as I can. Also, I am modifying an existing intranet website... it's 3rd party, so I have limited control of the source code - hence the table usage. :(
What I've Tried/Researched:
I believe the issue stems from the fact that my sccontainer item is floating, and doesn't have a height specified. That's why the image disappears.
I had a version that kept the background... but the sccontainer box didn't resize like we need... the text just overflowed it... rather ugly.
I don't know enough CSS to make this all work right. I'm not adverse to using jQuery to do more if needed.
I did work on a version that handled most of the hover using the :hover stuff... but it didn't work quite as well as the jQuery approach.
This answer may not solve your specific problem but it may help others with a similar scenario (working with tables makes difficult to render a clean layout in most cases.)
I ran into this issue before and this is how I solved it. It basically relies in an html nested div structure to achieve the expandability of the content without affecting the floating layout of the near elements :
<div id="wrapper" class="cf"><!--wrapper with border and CLEARED-->
<div class="sccontainer"><!--position relative-->
<div class="inner"><!--position absolute-->
<div class="content"><!--position relative-->
<!-- my content here -->
</div>
</div>
</div>
<!-- more containers etc-->
</div><!--END wrapper-->
First, we are going to apply the infamous clear-fix hack to the #wrapper container (use your preferred method):
.cf:after {
visibility:hidden;
display:block;
content:"";
clear:both;
height:0
}
* html .cf {
zoom:1
}
/* IE6 */
*:first-child+html .cf {
zoom:1
}
Then the style for the .sccontainer container :
.sccontainer {
width: 280px; /* or whatever - could be % for responsiveness */
padding-bottom:200px; /* any value to give height without using height ;) */
position: relative;
float: left;
margin: 5px 10px; /* or whatever */
overflow: hidden; /* this is important to keep all same height and big content out of sight */
z-index: 1; /* this is important too, see later */
background: white url("imagebackground.jpg") 0 0 repeat-x; /* need to explain? */
}
Then the .inner container, which actually will help to keep the layout in order if we hover the elements
.inner {
position: absolute; /* please don't move */
width: 100%; /* to fill the whole parent container */
height: 100%; /* same */
}
And the content :
.content {
position: relative;
background: white url("imagebackground.jpg") 0 0 repeat-x; /* not redundant though */
width: 100%; /* helps to fill the gaps with small content */
height: 100%; /* same, specially if using image backgrounds */
/* other styles, etc */
}
NOTE: we should apply same border-radius properties to the three containers and box-shadow to .sccontainer and .content for consistency
Now, what happens when we hover ?
.sccontainer:hover {
overflow: visible; /* show the full content */
z-index: 999; /* place me on top of the others if needed (which lower z-index, remember?) */
}
.sccontainer:hover .content {
height: auto; /* as it really is, including background image */
}
NOTES : this effect will happen regardless if the content's height is smaller than the parent container's height. You may not like the effect mostly if you are using borders and shadows (could be shown as smaller box inside the parent container) so we could add an extra class to .sccontainer like
<div class="sccontainer withhover">
and apply the hover effects only if that class exist like
.sccontainer.withhover:hover {
overflow: visible;
z-index: 999;
}
... and use a bit of jQuery to remove that class for shorter content, so it won't be affected :
jQuery(document).ready(function ($) {
$(".sccontainer").hover(function () {
var $contentHeight = $(this).find(".content").height();
if ($(this).innerHeight() > $contentHeight) {
$(this).removeClass("withhover");
}
});
});
See JSFIDDLE
When one column has a long value, without spaces, the table breaks out of any container with a set width (or percentage). Currently, I'm needing a table with 50% width, and the long value breaks the table out of the 50% width container.
This jsFiddle simplifies my issue, with a width of 70%, and any custom CSS I've used overriding typical DataTables.net CSS (besides visual styling).
http://jsfiddle.net/mswieboda/8qVh4/
HTML:
<div class="container">
<table class="grid"></table>
</div>
CSS:
.dataTable {
width: 100% !important;
margin: 0;
}
.dataTables_wrapper {
position: relative;
}
.dataTables_scrollHeadInner {
width: 100% !important;
}
.container {
position: relative;
width: 70%;
border: 1px solid #f0f;
}
.container .grid {
position: relative;
overflow-x: hidden;
}
Note: I realize I shouldn't use !important, but that's an issue for another day.
Please see the jsFiddle for the specific JS, and DataTables.net options I'm using.
I'd like to cut off/truncate the long value with ellipses using CSS. I probably need something like:
.dataTable tbody td {
text-overflow: ellipsis;
overflow: hidden;
}
The only solution that's worked for me is to have a div in the td and setting a max-width/width on the div, but I don't want to set a fixed width, since I want it to be figured out from DataTables.net options, using the sWidth option.
I've done some research, but haven't come up with any solid solutions yet. Does anyone have a solution for this?
Add this CSS. The CSS must be applied before the table is renderd.
table { table-layout: fixed; }
td {
overflow: hidden;
text-overflow: ellipsis;
}
jsfiddle
If you don't really need to show ellipses, you can force a line break inside the td.
table { table-layout: fixed; }
td { word-wrap:break-word; }
So I have a script I found that allows me to hide a div within an outer div. When the outer div is hovered over the inner div appears. However both the outer and inner div are set to 100% width in CSS and without the script they work properly, spannning the entire width of the screen. With the script they span to only the min-width I set.
This is meant to be a menu bar that spans the entire width of the site at the very top.
I'm wondering if anyone knows a solution to get the div back to the full width of the screen? Hoping it's something simple I missed.
<div id="menu_outer_wrapper"
onmouseover="document.getElementById('menu_strip_wrapper')
.style.visibility = 'visible';"
onmouseout="document.getElementById('menu_strip_wrapper')
.style.visibility = 'hidden';">
And here is my CSS:
#menu_outer_wrapper {
height: 40px:
width: 100%;
float: left;
position: relative;
min-width: 800px;
}
#menu_strip_wrapper {
height: 40px;
width: 100%;
min-width: 800px;
background: #f1f1f2;
border-bottom: 1px solid #ccc;
position: relative;
float: left;
font-size: 1.3em;
}
Change : to ; and see if it will work.
#menu_outer_wrapper { height: 40px: }
jsfiddle.net/7maCW/