DOMPDF does not support floats.
However I am listing many tables, and they are mainly key & value pairs. I would like 2 of these tables to appear side by side.
i.e. if I could use floats
HTML
<table id="stuff">
...
</table>
<table id="other-stuff">
...
</table>
CSS
table#stuff {
float: left;
}
table#other-stuff {
float: right;
}
What sort of workaround can I do to support this? Or is it impossible?
If anyone has any ideas, there is a place to test here.
It looks like it may be supported in the beta.
You can download that from the Google Code page.
Make a table with 2 cells (50% if needed). Align 1st to left and the 2nd to right.
In each cell you place your tables.
It should look like 2 floats.
Related
guys I have a weird question maybe... I work on a home project using Mysql php and css to make a database program for myself. the idea is I have a Mysql database and using html/php i input the data in to the Mysql database. I get the results in a table... Know to the problem.. I display the whole table in the web page and some fields are to long and don't fit in the table.. i use
table, th, td {
border: 1px solid black;
border-collapse: collapse;
border: 1px solid red;
overflow: hidden;
text-overflow: ellipsis;
}
and now the text fits in the table page BUT! know I can't read the whole text... so I want it to make it like this: when I hover over the text witch doesn`t fit in the table to aper the whole text so I can read it? how do i do that?
and a quick second question... in the text I have a price filed and I would like to make it like this. when the price field is empty hte whole row or the filed "price" would be colored red , and if the filed "price" has a value the field would be green? is there a way to do that using php and css?
Store the text in the title attribute of the TD element of the table. Then when you hover the ellipsised text, a tip will show up with the whole text.
I can't really tell what's going on as I can't see but I can guess what you want to do? I'm guessing you've used text-overflow:ellipsis; to create those dots when there's too much text within a <td>. The easiest method I can see without using javascript is to do the opposite when hovered over with the mouse. Although! The disadvantage of just using CSS is that there's no guarantee this method will show all the text. Here's my simple example:
td:hover{width:auto;height:auto;text-overflow:clip;}
But! Bare in mind that the <td> is restricted to it's parents width and height, so the <td> may still no show the whole text if the parent is too small for the child to be large enough to fit the text in.
Another method would be to use javascript to create an on click event which will display the text in a separate element which can be manipulated to show the entire string from your database.
iv done this:
td:hover{
overflow:visible;
text-decoration: underline;
text-transform: uppercase;
color:blue;
position: absolute;
background-color: #EEEEEE;
margin-top: 10px;
}
d if it
and its working relative fine now I want a filed to be color red if its empty and green if its with value. is there a way to do that? without java? i don`t have much clue of java script.
i want thsi 2 rows to becom red when there is no value inserted
echo "" . " ";
echo "" . " ";
how can it be done?
am working on a website project in which i fetch array from my database and use foreach statement to output its contents.
I want use php script to count how many items are in the array and assign number position to each item so that if the number position of the first item is an odd number i will apply css float:left style to it but if its even number it will float:right
any help please??.
thank you.
Use the modulus operand:
<?php foreach ( $array as $index => $item ): ?>
<div class="<?php echo $index % 2 ? 'even' : 'odd'; ?>"></div>
<?php endforeach; ?>
Then just use those class names in your CSS:
.odd { float: left }
.even { float: right }
CSS3 has nice features (.list:nth-child(odd) {float:left;} .list:nth-child(even) {float:right;} ), but beware that this will not work on many browsers (ie8 and below, older firefox, etc) .. at least every user with WinXP+IE will see just a normal list without the different colors.
jQuery (also noted here) can also select with $('.xy:odd').css({'float':'left'}); , but if you are not using jQuery in your project its just a big (90kb jQuery library) overhead.
Performance is also better if going with php.
So you better go with php and the modulo operand (if $count % 2), see Joseph Silber's answer here.
I think you can also use jquery with :odd selector.
You can do it with css only:
.list:nth-child(odd) {float:left;}
.list:nth-child(even) {float:right;}
I've got a fiddle with the data here:
http://jsfiddle.net/ktpmm5/Z5z8n/
and page is staged here:
http://steppingstonez.com/daretorepair/magazines.php
Basically my paging element gets shoved to the left and lays over top of my heading. This happens only in IE 8 - works fine in Chrome, FF and Opera. I'm going crazy trying to figure out what is wrong. html validates fine.
Any ideas?
Quick solution:
To make it roughly work, change the paging wrapper to have the position: relative, and float the ul.paging right (remove the position).
You'll need to add height into the head_text to include the paging wrapper (as paging_wrapper is now positioned out of the flow, so its height does not count).
Longer solution:
Even with the fix above, you still have the problem that a long title will overlap regardless, so I would define the area/width of the header (making it wrap if too long) and also restrict the area of the paging device (by limiting number of buttons that show).
Another quick solution: Specify the correct width for your .paging CSS class (UL). For example a width of 220px seems correct.
.paging {
...
...
width: 220px; /* new */
}
I think it seems more of an issue with utilizing negative margins. You have both a margin-top on the paging_wrapper and the paging li a. This is probably causing some weirdness for support in IE.
I am building a wordpress plugin which is generating an HTML table and sending to gravityforms html block via shortcode.
My problem is that cell contents can contain:
23.24
1,234.665
123.4
etc...
Notice the differing number of decimal places.
Is there a non-hack & best practice way of aligning this column data by decimal point? In this case, Aligning right will not work.
Inserting 0s is not acceptable because this indicates a degree of accuracy which is not there.
As you can see, I have attempted to use align="char" char="." inside the td elements with no luck.
Any help anybody can help with this would be much appreciated.
Many thanks.
Is there a way of using printf("%8.3f",d1) or similar without actually printing to the screen? e.g. structuring the variable d1 for later use but not actually printing it?
There is no direct way to do this. HTML 4.01 has align=char, but without any browser support. CSS 2.0 had a counterpart, using the text-align property, with equal lack of support, so it was dropped from CSS 2.1. CSS3 drafts have a nice system for such alignment, but indicated as being in danger of being cut from the spec if there are no (correct) implementations.
As a workaround, you could right-pad the values with something invisible (blank) so that when the values aligned to the right, the decimal markers get aligned. There are several ways to try to achieve this:
1) Use digit 0 but set a style on it, making it invisible, e.g.
123.4<span class=s>00</span>
with
.s { visibility: hidden; }
2) Use FIGURE SPACE U+2007, defined to have the same width as digits (when digits are of equal width), e.g.
123.4
For this to work, you need to set the font so that it contains U+2007. According to http://www.fileformat.info/info/unicode/char/2007/fontsupport.htm even Arial contains it, but I’m afraid this might not apply to old versions of Arial still in use.
3) Use a no-break space and set its width to the desired number of digits, using the ch unit (define to have the width of digit 0), though this unit is relatively new and not supported by old browsers. Example:
123.4<span class=d2> </span>
with
.d2 { width: 2ch; display: inline-block; }
I would probably use the first method. As a matter of principle, it has the drawback that when CSS is off, the data contains zeroes, which imply wrong information about accuracy, whereas in other methods, switching CSS off “only” messes up the layout.
(It’s probably obvious that digits must be of equal advance width, so that you can align numeric data at all. This just means that the font used for the values must have that property. Most fonts will do in this respect, but e.g. Georgia, Constantia, and Corbel won’t.)
I wrote a jQuery plugin that solves this. It's found here: https://github.com/ndp/align-column
Using your raw HTML table, it will align a column by decimal points:
$('table').alignColumn(3);
It does this by adding another column, but does its best to not corrupt the other spacing. There's also a reference to a different solution on the Github page.
Would it be acceptable to put the value into two columns?
Use sprintf() to convert the value into a string, and then put the bits up to the decimal point in the left column (but right aligned), and the decimal places in the second column.
See http://jsfiddle.net/alnitak/p4BhB/, but ignore the JS bit...
The thing is, you've gotta ensure that they all have the same number of digits after the decimal.
Once you do that, use text-align. All it will take is a: style='text-align: right'
Better still, you could use a css class instead of inline styles. Your markup would look like this:
<tr><td>Item 1</td><td>15</td><td class='price'>£123.25</td></tr>
Then in your stylesheet:
td.price{
text-align: right;
}
With php, you can format a number as a string with number_format. You don't have to echo it or print it, just wrap your variable in that function. For example:
$table .= "<td class='price'>£" . $price . "</td></tr>";
becomes:
$table .= "<td class='price'>£" . number_format($price,3) . "</td></tr>";
It might be overkill but I needed the same thing and just solved with a length of the output and adding whitespace based on that length.
I.e.:
if (strlen($meal_retail) == 5) {
echo " ";
}
else (strlen($meal_retail) == 6) {
echo " ";
}
This lined up my decimals correctly with a bit of extra doing, and i'm sure an array could clean the above code up even nicer.
Additionally, i've been conforming my numbers adjusting with:
echo money_format('%i',$meal_retail) (makes it a two decimal money number)
Just wanted to provide my solution as I was looking at this page before coming up with my own resolution.
this is my solution, hope it help!!
<style type="text/css">
td{
font-family: arial;
}
.f{
width: 10px;
color: white;
-moz-user-select: none;
}
</style>
<table>
<tr><td><span class="f">00</span>1.1<span class="f">00</span></td></tr>
<tr><td><span class="f">0</span>12.34<span class="f">0</span></td></tr>
<tr><td>123.456</td></tr>
</table>
with this, you can't see the zeros and can't select them!
I have used javascript for this, I hope this will help.......
</tr>
</table>
</body>
for(var i=0; i<numarray.length; i++){
var n = numarray[i].toString();
var res= n.split(".");
n = res[0];
if(highetlen < n.length){
highetlen = n.length;
}
}
for(var j=0; j<numarray.length; j++){
var s = numarray[j].toString();
var res= s.split(".");
s = res[0];
if(highetlen > s.length){
var finallevel = highetlen - s.length;
var finalhigh = "";
for(k=0;k<finallevel;k++){
finalhigh = finalhigh+ ' ';
}
numarray[j] = finalhigh + numarray[j];
}
var nadiss = document.getElementById("nadis");
nadiss.innerHTML += "<tr><td>" + numarray[j] + "</td></tr>";
}
I would like to create an app that writes a basic music chord chart to a database and pulls it out onto a different page.
I know the basic to intermediate concepts of inserting and returning data to a database but I am having trouble on this one.
In a textarea I would like the member to be able to insert into the database like so...
{C}I`ve {F}been {G}though {A}the {C}desert
The Letters inside the brackets being the chords and the words outside of the brackets being the lyrics.
This is not the problem though, I know how to do that.
The problem is, I would like the {Chords} to be placed directly above the letter they are preceding while also giving them a class that would allow me to change the font color, size, and weight when rendered on page.
I have been thinking that there is a way to do this with tables, str_replace, and strTok but I cannot figure it out.
Any suggestions?
use regular expression to extract content of {} into an array
str_replace {} to blank (space), in a way you will have plain text except chords letter
use html css, put Chords letters in span tag.change css of span, so it position above the letter. i.e. span position is absolute and parent container position to relative.
if you want to save those chords into table , you can as its already in array
Hope this helps, best of luck
Working with HTML tables can be a real pain. Here's how you could do the HTML part of it without using tables:
<style>
.phrase { display: inline-block; }
.chord { font-size: 20px; }
.lyrics { font-size: 12px; margin-right: 1em; }
</style>
<div class="phrase">
<span class="chord">C</span><br>
<span class="lyrics">I've</span>
</div>
And with a little PHP mixed in:
<?php
$phrases = array(
array('chord' => 'C', 'lyrics' => "I've"),
array('chord' => 'F', 'lyrics' => 'been'),
);
?>
<?php foreach($phrases as $phrase): ?>
<div class="phrase">
<span class="chord"><?php echo $phrase['chord']; ?></span><br>
<span class="lyrics"><?php echo $phrase['lyrics']; ?></span>
</div>
<?php endforeach; ?>
As far as saving/retrieving from the database. You could do some fancy regular expression/string replace thing, but that's probably more work than you really need to do. Just keep it simple and create a structure like this:
Songs Example
--------- -----------
id (PK) 1234
song_title I've been through the desert
Phrases
-----------
id (PK) 1
song_id (FK) 1234
chord C
lyrics I've
order 1
You'll have a lot more rows in your Phrases table, but it will be a lot easier to work with.
Also, as a final, biased, piece of advice: check into Ruby on Rails. I started out learning PHP and wished I would have learned Ruby on Rails earlier in my career. There are a lot of ways that Ruby on Rails makes it easy for a beginner to get started programming.