I have html
<div style="width: 1000px;">
<table >
...
</table>
</div>
Table is very large and not all fields fit into div. How to automatically reduce the text to the entire table is placed in a div?
If I understand your question right, you're trying to fit text into a table and change font size according to the table size. Wich would require working with em or %.
There's a great article on A List Apart. You should check that out.
Also; add a Stylesheet Reset to ensure everything looks the same in different browsers.
Related
FIXED HEADER TABLE ____When Clicking on scrollbar icon in ie11 flickers when using positioning as i cannot change the structure as it is dynamically coming from different sources and gets in table body structure
<tbody><tr></tr><tr></tr></tbody>
here is the fiddle attached works fine in chrome but when i check in ie it flickers horriblly when clicking on div vertical scrollbar below or above icon
Any Css or html solution is also acceptable until if there is no change in html structure
DEMOJs Fiddle Demo
JQUERY
$(document).ready(function() {
$('#theDiv').on('scroll', function () {
$('#headerRow td,#headerRow th').css({'position':'relative','background':'red','top':$('#theDiv').scrollTop()-1});
});
});
First we wrap #theDiv in a #theDivWrap (using jQuery) and use the css to style it...
The idea is to duplicate header row into a new div appended to #theDivWrap via JS
Now loop through table heading elements and create a div based similar styled heading which will come over table and is prepended to #theDivWrap and stays there forever even on scroll because wrap is not overflow auto...
https://jsfiddle.net/5dqnumh6/39/
Adjust negative margin bottom of .headerRow to suit your needs ;)
As Ie doesn't support overflow property for table group elements. So we can add a workaround to support the required behaviour. Add this css to your fiddle and try it will work.
tbody{display:block;height:auto;}
This will make your flicker go away in ie older versions. Although its a hack to make it work but there is no other pure css way. For more details and explanation you may want to read this link.
Updated fiddle is here.
But as you told me flickering not goes away.A workaround exists but it requires changing in ie settings. Go to internet options, navigate to advanced and scroll down until you see browsing section and uncheck "enable smooth scrolling". But I don't know whether it suits your requirement or not
This has been noted to be an IE11 bug, and according to this other SO question from 2014, shows up under the following conditions:
Three things can cause IE 11 flickering/choppy/delay for fixed
position element while scrolling:
If you have an "overflow: auto;" on the parent container element,
remove it.
Remove background-attachment:fixed; from the fixed position
element.
Remove border-radius from the fixed position element (mobile
IE only).
(Accepted answer by #Adamy)
Well, removing auto-overflow from your code takes away the whole purpose, so it's not the best solution here, and the others don't apply. What seems to work however (according to this MS Connect bug) is some HTML changes, separating the header row, and adding a custom scroll function to the actual table body. This JsFiddle page (kindly provided by folks that responded to the MS bug) has a working example:
https://jsfiddle.net/84y0vtyx/
(Including only part of the example with relevant comment. Full explanation requires reviewing the JsFiddle example.)
/* Only WinIE will fire this function. All other browsers scroll the TBODY element and not the DIV */
/* This is to hide the SELECT elements from scrolling over the fixed Header. WinIE only. */
/* toggleSelectBoxes added on 2005-01-28 */
/* Terence Ordona, portal[AT]imaputz[DOT]com */
window.onload = function() { addIEonScroll(); }
Hi here is my update based on your comment.
I copied the HTML part from your js Fiddle and just added this style tag to the above the table div and it works perfectly in microsoft edge and other browsers with no Jquery needed:
<style>
#headerRow
{
position: fixed !important;
top:0px;
background:Red;
}
</style>
////OLD
I apologies as you have mentioned that you cannot change the html table structure that comes down however see my old answer below which i wrote without this consideration. Can you consider using css to traverse the fixed table that comes down and apply a fixed position to the top header row? I have read that you can give a fixed position and a background color to a table row so that it remains fixed and the background prevents the text from overlapping How to make table row fixed at the top
You can use css to select the top row of the table:
Css:
table tr:first-child
{
position: fixed;
top:0px;
background:#FFF;
}
/// old answer:
Please may i suggest that you forget about using a document scroll event and just create a header with an absolute position if it is a div with an overflow scroll or a fixed position if it is just to remain fixed as the window scrolls. you can specify widths for your colums so that the fixed header lines up. so something along these lines (im just typing on my phone):
<table style="position:fixed; width:100% ">
<tr>
<th width="50%">
Test1
</th>
<th width="50%">
Test2
</th>
</tr>
</table>
<table style="margin-top:25px; width:100% ">
<tr>
<td width="50%">
a
</td>
<td width="50%">
b
</td>
</tr>
<tr>
<td width="50%">
c
</td>
<td width="50%">
d
</td>
</tr>
</table>
Especialy if we are talking cross browser compatibilty here- the simpler and most basic html/ css implementation the better. Css has provided us with a fixed class. There is no need to use jquery to watch your documents scroll.
I use this one my site:
https://raw.githubusercontent.com/jmosbech/StickyTableHeaders/master/js/jquery.stickytableheaders.min.js
Simply load it in your <head></head> section of the page and it will float the header of any table loaded on that page. It's cross-browser and gets the job done with no additional tricks, just plug & play.
I'm working on a little project to learn html/CSS and use the Columnizer plugin.
The problem:
The project is a responsive table. If I resize the window the layout changes and adapts to the new window size. I want to prevent the "category titles" from being at the end of a column. For example like this.
Ideally I'd set manual rules. For example make the title stick to the first two rows of the table (and let it only break/split anywhere after that) and make it impossible that the last two lines are alone at the top of a column.
What I've tried:
Columnizer includes two CSS classes called "dontsplit" & "dontend" (both apply javascript) that I'm trying to use. According to the documentation it does that:
Any node that has the CSS class “dontsplit” won’t be split into multiple columns. This is handy to make sure that tables, etc, aren’t chopped in half if they land at the bottom of a column.
&
Any node that has the CSS class “dontend” will never be put at the end of a column.
The problem is that I can't seem to make it work. For example adding the "dontend" to the Category Title will not change anything. And the dontsplit (I use it in a ) always automatically applies "dontsplit" to everything as if the wouldn't have a closing tag.
Didn't work:
<div class="dontsplit">
<h2>Category Title</h2>
<table class="table table-hover" >
<tr><td WIDTH="67%"><a href="http://www.google.com" class="title" >Title Here</a></td><td class="vert-align">Description</td></tr>
<tr><td><a href="http://www.google.com" class="title" >Title Here</a></td><td class="vert-align">Description</td></tr>
<tr><td><a href="http://www.google.com" class="title" >Title Here</a></td><td class="vert-align">Description</td></tr>
</div>
How can I use them correctly? Or is there another simple way to do this?
Thanks
http://jsfiddle.net/vqsd8x16/
var defaults = {
// default width of columns
width:400px,
change in your code to have pixels will fix your problem.
I have two divs that contain two other divs each. One containing DIV's display is set to none. I have a button that toggles the containing DIVs so I can alternately hide/show the containing div and thus the two divs inside. The inside DIVs are set the 49% width, floated left/right. Problem I have is the fist time the visible DIV is hidden and the hidden one displayed the inside two divs are way too wide. If I resize the width of the browser just a tiny bit with my mouse they are the desired size and any time I toggle the visibility from here on out all is fine. If I reload the page it is wrong on the first toggle. Works the same in IE 10 and Chrome so don't think a browser issue.
The inner two divs both contain high charts that are generated and rendered to the inner divs I want them to be side by side and almost (99%) the width of my page.
Here is snipped of my DIVs to be hidden and shown that contain the inner DIVs with highcharts
<div id="highChartsNG" style="width:99%;display:none;">
<div id="FillRateHigh" style="border:2px solid black;width:49%;float:left;"></div>
<div id="WaitTimeHigh"style="border:2px solid black;width:49%;float:right;"></div>
</div>
<div id="LowChartsPEAK" style="width:99%">
<div id="FillRateLow" style="border:2px solid black;width:49%;float:left;"></div>
<div id="WaitTimeLow"style="border:2px solid black;width:49%;float:right;" ></div>
</div>
This is a snippet of the javascript function I call on a button click to toggle on/off on the display of two containing DIVs
document.getElementById("highChartsNG").style.display = "none";
document.getElementById("LowChartsPEAK").style.display = "block";
Fiddle showing problem, see comment of mine below on how to reproduce http://jsfiddle.net/rplace/UTTz4/1/
Okay, after hours of searching I finally found the problem (I think). I was determined to find the solution =).
The problem is multiple-fold.
The first problem was the display:none; property on the second chartcontainer. For some reason the widths calculated for the charts and their containers were incorrect for the hidden div. So I removed the property from the HTML, and instead hid it dynamically with document.getElementById("LowChartsPEAK").style.display = "none"; in the JS right after the chart rendering functions. If you do this, your SVG's will fit your containers already, although the last one has a slight shift.
Apparently HighChart doesn't like percentage-based parent containers. When you go to your updated fiddle , run the fiddle with both:
<div id="wrapper" style="width: 800px;">
<div id="wrapper" style="width: 100%;">
Open the console and check the results (container name - SVG width - container width). When the wrapper is given a pixel width, all container widths are equal (as it should be). Now check the wrapper with percentage width: your last SVG will be about 6 to 20 pixels smaller. The only solution I have found for eliminating that small shift in the last container, is that somewhere a top container must have a pixel-width.
EDIT: pt's and em's also work. It's only % that causes problems
If you are hiding DIV, you should be aware that browser won't calculate %-based widths with display:none. Then if browser won;t calculate DIV, then also Highcharts are not able to do it ;)
Check this FAQ - when showing chart update his size or call reflow().
I will be very appreciative if anyone has a lead how to solve this:
Problem description:
we have Dynamically generated “floating divs” with even witdh but not even heights.(content based) .
the “Parent container” will have diffrent width parameters to allow 2,3,4 (in attached example 2 columns and 3 )divs to fits it’s width.
divs order is left to right, always by hirarchical order 1,2,3 etc...
How can we achieve this without creating gaps? ( casued by traditional floats method).
Number of divs is dynamically created and not limited...
Solution should be ie8,ie9 compatible
thanks, Jonathan. ![enter image description here][1]
example illustration can be found here:
https://app.box.com/s/6y89dlan1jt8bpjvcgb9
Have you considered using something like Masonry?
Pure CSS solution - Cross Browser (IE6+)
Use a column layout instead of floating.
This Working Fiddle demonstrate a 3 column layout, but you can easily change it to N column.
For a N Column Layout, you'll need to create N containers, each of 100/N width, and fill them accordingly.
You just have to build your dynamic content in the right order. (put the dynamic div in the right column each time).
Here's the basic HTML & CSS for the 3 column layout
<div class="Container">
</div>
<div class="Container">
</div>
<div class="Container">
</div>
.Container {
float: left;
width: 31.33%;
margin: 1%;
}
The script in the fiddle is for the sole purpose of adding dynamic content.
and although the content that I had have a fixed height, it will obviously work with changing heights as well.
BTW: for a 2 column layout, you Don't need this. just make the odd item float left, and the even items float right. Like This
I am trying to create a grid like system with div's with content floated left. The problem is that the height of each div is not static since the content is different in each one. Since the height is different.. things get outta whack if one is taller then another in one row.
Is there some sort of css way or js (prefer javascript) way to get around this. I really want to avoid setting large heights on the divs to get them to line up.
You can see the example here: http://www.foreclosurejournalinc.com/index.php?option=com_hotproperty&view=type&id=1
First off - it is not correct to use a table in this situation: The table structure defines a relationship between data in the same row, and data in the same column. Since the second column is the same type of data as the first, there's no table relationship here.
You shouldn't use a table because you're defining your layout in markup, so you can only ever have two columns. For example, if the client decides they want three columns, or you want to show a single-column list for a mobile view or print stylesheet, you need to change the markup (or even have several sets of markup for different purposes).
Flexible markup
OK - let's look at your markup. At the moment, you have almost got a table structure, because you're wrapping each row in a DIV. Again, this means you can't ever have a single column or 3 or 4 columns side-by-side.
A more flexible solution is to markup your data as a list. Because it's sorted, an ordered list is the right choice:
<ol id="list_properties">
<li class="property">
<h3 class="propertyTitle">08-CA-001731</h3>
<dl class="details">
<dt>Plantiff</dt>
<dd>Bob's Mortgages</dd>
<dt>Defendant</dt>
<dd>Harry Skinflint</dd>
</dl>
</li>
<li class="property">
<h3 class="propertyTitle">08-CA-001731</h3>
<dl class="details">
<dt>Plantiff</dt>
<dd>Bob's Mortgages</dd>
<dt>Defendant</dt>
<dd>Harry Skinflint</dd>
</dl>
</li>
</ol>
You'll have one <li class="property"> per item in your 'grid'. I've suggested some nicer markup for the details, too - help yourself to that if you like.
Now to finish it off: Sadly, this can't be done in a cross browser fashion without a bit of final tweaking with Javascript. That said, the JS is unobtrusive, so it really only acts as a bit of polish at the end.
Base styling
Your base styles will look like:
#list_properties {
list-style:none;
margin:0;
padding:0;
width:960px;
float:left;
}
#list_properties li.property{
width:430px;
float:left;
margin:0 50px 50px 0;
min-height:16em; /* For FF, Safari, Opera, IE8 */
_height:16em; /* For IE6 */
*height:16em; /* For IE7 */
}
That recreates the columns - at this stage, if all of the boxes had a height less than 16em, this would be all you need.
Javascript polish
To make sure everything is rock solid, I'd use the equal heights plugin for jQuery: http://www.cssnewbie.com/equalheights-jquery-plugin/ Basically, you pass it your container (#list_properties) and it scans each of the children (li.property), and sets the height of each one to the height of the tallest item.
So, for instance, one item has extra information and needs 18ems of height, all of the other items are set to 18em too.
The linked site has documentation for getting it going, but once you've got jquery and the plugin ready, you need only do:
$(function(){
$('#list_properties').equalHeights();
});
Once you get it set up this way, you can modify the number of items in the column just by changing the width of the li.property.
A last thought...
I'm just thinking, what is the advantage of displaying this list in columns, anyway? After all, the user can sort the list - wouldn't a single-column list be easier to scan? I'm assuming the user will be looking for a particular item, rather than just browsing through semi-randomly.
Floating <div> elements are tricky to work with, especially if you're aiming at multiple browsers.
If it's important that they line up in a grid format, I'd use a <table> instead; <div>s are meant for dynamic content that may or may not line up with everything else, and it seems like a misuse to expect them to line up perfectly, especially if their sizes are unspecified.
Also, since the float CSS property modifies how block-level elements interact with other floating and non-floating elements, I'd float the <table> element and give it a set width.
Check CSS display: table; for layout:
http://www.onenaught.com/posts/201/use-css-displaytable-for-layout
I think if you add a cleared element after every two entries that would help.
<div style="clear:both"></div>
That is, you have hp_prop twice then insert the cleared div.
The
<br class="clearboth">
is not having any effect in the position that you have them.
You might want to look into some of the grid-oriented CSS layout "frameworks" out there. The general idea is to have a bunch of classes that are applied to blocks of content so that you're not dropping little numbers all over the place. There are various different approaches; a google search for "CSS grid framework" should get you started.
Here's another idea: do you know how many tables are in a row? Well, can you not wrap each row of <div> boxes in another "row" <div>, with that one set to overflow: hidden so that it stretches out around the floated boxes inside it? The outer <div> elements would not need to float at all (though they could, if need be). That would have the effect of making each row as big as the biggest cell in it.
There are two options:
Mark the end of each "row" with a <div>or <hr> which "clears" both sides by using the css "clear" attribute. You can learn more about hit here: http://www.w3schools.com/Css/pr_class_clear.asp
Do what Pointy said and use a CSS framework. I would specifically recommend 960 Grid (http://960.gs) and/or BluePrint CSS (http://code.google.com/p/blueprintcss/). Both are simple, small, and easy to use. They basically use the above technique to achieve the result as well as offering you a bunch of other nice features (easy to create symmetrical and nicely proportioned layouts).