I'm trying to implement a table with editable cells using an approach like this. The cell contains a label or span and also an input box, and I'm using a flag to decide which one to display via ng-show. But when the label is made visible, the cell expands vertically. It's subtle in that demo but you can see the second row moving down slightly.
How can I make it remain the same size, like the editable table rows in this example? I've looked at the styles in that example but I can't figure out how it's being done. The span for non-edit mode seems to have the dimensions as 'auto' but when the input form appears, it has explicit width/height - and they happen to be exactly the same.
PS. I'm open to the idea that the way I'm doing it isn't optimal, in which case any alternative suggestions would be great.
<div ng-controller="MyCtrl">
<table>
<tr>
<td>
<label ng-click="editing=true" ng-show="!editing">{{ mytext }}</label>
<input ng-blur="editing=false" ng-show="editing" ng-model="mytext" />
</td>
</tr>
<tr>
<td>
<label>some more text</label>
</td>
</tr>
</table>
</div>
I found out why the cells don't expand in the xeditable example that I linked to in my question - it's because there's an explicit size set in the css:
div[ng-controller] table tr td {
height: 45px;
/*text-align: center;*/
vertical-align: middle;
}
I didn't find this at first because I was looking in the css file that comes with the package, and I couldn't find any rules in there that would explain it. But it's actually defined in another css file for the demo page itself (https://vitalets.github.io/angular-xeditable/docs/css/docs.css).
Related
I think this maybe a stupid question but I really could not figure out what is wrong with what I am doing
<!DOCTYPE html>
<html>
<body>
<table border="1" height = "300px">
<tr>
<td>Cell A</td>
<td>Cell B</td>
<td>
<div id="myCellContainer">
<select id="mySelect"/>
<label id="myMessage">My label</label>
</div>
</td>
</tr>
</table>
</body>
</html>
When this is rendered I was expecting my label to show up below the select box but it did not. Any help is appreciated.
Thank you
Try using:
<select id="mySelect"></select>
This method won't be a self-closing tag.
You need to close your html correctly. Also you need to give the label a width of 100%
DEMO http://jsfiddle.net/LstNS/36/
You could css the select to { display: block } or you could put a <br/> after the select. As it sits your select is an inline-block and following markup occupies the same line unless it wraps.
The problem is that the <label> is inside the <select> element. Look at the rendered mark-up. The element is not a valid self-closing, or void, element, as described by the spec.
It should be:
<select></select>
Once you fix this however, you'll still need to apply block level display to put the label on it's own line:
#myMessage {
display:block;
}
But the deeper question here is, why are you using a <table> to layout a <form>? Form elements are not tabular data. The information you enter into the <form> may be tabular, but the <form> itself it is not. Perfectly adequate positioning and styling can be achieved purely with CSS and the appropriate containers.
I want this layout where I have a rectangular box. And inside the box on the left there is a text and on the right there is an image. This looks fine in the browser, but when sent out as an html email, in outlook the float right doesn't seem to work. It puts the image in the next line under the text. Any ideas on how to make this work? (I am trying to avoid using tables.)
<div style="width: 100%;border-style:solid;overflow: hidden;">
<span style="float: left;">
<h3> Your appointment Details</h3>
</span>
<span style="float: right;">
<img src="someImage"/>
</span>
</div>
Very late to the conversation, but here is how to "float" in html email using align="" instead.
Example here
Also, if you are looking for resources on html email (I assume you are as the answer you marked correct is very general), here is a huge list of resources.
This is a really good guide from Mail Chimp on Coding for HTML Emails:
http://kb.mailchimp.com/article/how-to-code-html-emails
Some basic tips:
Use tables for layout.
Set your widest table to be maximum of 600px wide.
Don't try and use JavaScript or Flash
Don't use CSS in a style tag as some mail clients will discard it.
Use inline CSS styles only.
Basically code your emails as if it was roughly 2003.
CampaignMonitor provide this rather brilliant guide to all CSS support across multiple email clients, which is also available as a pdf or xls download.
As the answers above say, email support for CSS is very limited, mostly due to Microsoft's descision to use Word as its html rendering engine.
Simple floating images can be like
<img src="yourimage" align="left" />
BUT that way you won't get solid results with padding between text and image, outlook removes margin and padding and your text will stick right next to the image. So try this:
<div style="text-align:justify;">
...a lot of text here untill you want to insert an image that floats left...
<table cellpadding="0" cellspacing="0" align="left" style="float: left;">
<tr>
<td>
<img src="yourimage" align="left" vspace="4" />
</td>
<td width="15"> </td>
</tr>
</table>
...a lot more text here until you need an image that floats right...
<table cellpadding="0" cellspacing="0" align="right" style="float: right;">
<tr>
<td width="15"> </td>
<td>
<img src="yourimage" align="left" vspace="4" />
</td>
</tr>
</table>
... a lot more text here...
</div>
You need to wrap a 'table' element around it to get the padding-margin effect to work in Gmail, Outlook (online), Microsoft Outlook (desktop client),...
Give the table an align=left or right attribute. (Edit answer here: in addition and fallback for other email clients also give the table a float value so do both. They are back-ups to each other. Some clients understand "float", others understand "align", some understand both,...) Your table will float in the text almost like an image does. The only difference is that in outlook a table generates an automatic line break in the text where an image with align left or right does not generate breaks.
For setting the margin, since we are now working with a table, add an extra "td" with a width="15" to the left or right of your image cell and a non-breaking-space in it. (or a transparant gif -> spacer.gif)
You better not leave cells empty because otherwise the width of your cell will not be respected in certain email clients
For top and bottom margin we can use the 'vspace' attribute, don't forget to give the image an align = left or right attribute. Otherwise the 'vspace' will not work.
I've found a way to apply float on Outlook.com.
Just capitalize the tag like Float:left.
<span style="Float:left;">Content to float</span>
Maybe you should use !important too;
I tested it and it worked.
check out https://www.campaignmonitor.com/css/ here it has listed what are all the things supported and not supported in email
Instead of float you can use an outer table and put contents you want to float left in left td of outer table.
this is not an elegant answer but I did it this way
When you are floating something to the right of something the right floating element should allways apear first in code. Like this:
<div style="width: 100%;border-style:solid;overflow: hidden;">
<img src="someImage" style="float: right;"/>
<h3> Your appointment Details</h3>
</div>
Is there a way to position a column in a table so that it doesn't scroll along the x axis, but scrolls along the y? Perhaps some way to use absolute positioning that only effects one (like a spreadsheet. The header stays at the top, like absolute positioning)?
Note: I want to avoid using Javascript
EDIT: I need to have the overflow for the table set to scroll
OK I found an example that works the way I want: http://cross-browser.com/x/examples/xtable.php,
or this one: http://www.disconova.com/open_source/files/freezepanes.htm but I can't figure out what they do to make it work.
I ended up using Javascript anyway.
For fixed columns I found a great Javascript toolkit called DataTables and it has a plug-in called FixedColumns that allows fixed columns. Link.
I'm pretty sure you use
overflow-y: hidden;
For example, take a look at this website.
http://www.brunildo.org/test/Overflowxy2.html
In the following example we can create a table inside a table, not the cleanest idea but it should work.
<TABLE BORDER="2" CELLPADDING="5" CELLSPACING="5">
<TD>
<div style="width:325px; height:48px; overflow-y:scroll;">
<TABLE BORDER="0" CELLPADDING="3" CELLSPACING="3">
<TD>inside the first one<br />
we can add text and enable<br />
overflow-y for vertical<br />
scrolling.</TD>
</TABLE>
</div>
</TD>
<TD> This is a different table. You can edit this to fit your needs.</TD>
</TABLE>
Note: Head over to w3schools to try it on the fly, that way you can test it and learn from it ;) - http://www.w3schools.com/cssref/css3_pr_overflow-y.asp
If you want to do it with tables you would have to do something like this
<table>
<tr><td>col1 name</td><td>col2 name</td></tr>
</table>
<div>
<table>
<tr><td>col1 row1 data</td><td>col2 row1 data</td></tr>
<tr><td>col1 row2 data</td><td>col2 row2 data</td></tr>
<tr><td>col1 row3 data</td><td>col2 row3 data</td></tr>
</table>
</div>
Then you need to set styles appropriatley, make sure that the widths of each cell in the header is the same as the width you set for each column in the second table this will make your header and the data table lign up. Make the div scrollable so the data parts of the table will scroll while the header parts remain static.
You could do a similair thing for row headings too by placing a table to the left of the data table and making sure you offset the column header table appropriatley to the right.
I am not going to write out all the css though as I am sure you can figure this out.
You can wrap the table in a container with a fixed width and set it's overflow property.
<div id="foo">
<table>
<tr>
<td>a</td><td>b</td><td>c</td><td>d</td>
</tr>
<tr>
<td>a</td><td>b</td><td>c</td><td>d</td>
</tr>
<tr>
<td>a</td><td>b</td><td>c</td><td>d</td>
</tr>
</table>
</div>
CSS
#foo {
width: 100px;
overflow: auto;
}
Your table will obviously need to have the data displayed width-wise. Adding more rows won't cause it to scroll unless you specify a height to the container as well.
DEMO
I have a header row which has this structure:
<th...
<a...
<span...
{text}
If you look at the attachement, you will notice that all the headers with this structure are aligned.
Well, when a specific header is clicked for "sorted" status, the structure will be like:
<th...
<a...
<span...
<table>
<tbody>
<tr>
<td>
{text}
</td>
<td>
<div> //with a background image
</td>
</tr>
</tbody>
</table>
Well, in IE8 this sorted column is no longer aligned (see the screenshot please).
I've tried a lot to put some css style (position:relative, etc) to the table inside the span to fix the alignment in IE8 but I failed..
Is here any css guru which can suggest a fix?
Please note that I can NOT change this structure (its some generated code from ICEfaces library) but I can apply css attributes (if I know where...).
Also, there is no css difference (some specific important style) to the sorted column applied. Just plain table inside that span.
Thanks.
Check the vertical-align property, maybe. Here, judging by the screencap, it seems to be in default mode, 'baseline'. (I'm not sure it will do much, though)
Try :
th.stuff {
vertical-align:top;
}
or :
th.stuff {
vertical-align:middle;
}
Also you could make all th slightly higher and gain somme padding to align the content. I think the problem, overall; commes from the select that appears in the th, inside the table.
You can use IE specific style sheets. They are known as conditional style sheets.
http://css-tricks.com/132-how-to-create-an-ie-only-stylesheet/
The idea of course would be to change the CSS for that element for IE only (because it does work already with other browsers).
I have a client form which includes HTML served up from an iframe - I can't edit it. The only thing I can do is apply CSS edits.
I'm trying to apply a simple adjustment which would stack the <td>s in the form so
1. What is your age?
becomes
1.
What is your age?
If you right click the first question and Inspect Element you'll see the rather interesting DOM structure I get to work with. This example it looks like this:
<div id="Age" class="questionlabel">
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>
<span class="questionnumber_questionlabel">1. </span>
</td>
<td>
<label class="required">What is your age?</label>
</td>
</tr>
</tbody>
</table>
</div>
When I inspect that <td> and add a display:table-row; it completely ignores me. This is in Chrome - I can replicate this DOM and get the CSS to do what I want in jsfiddle so I'm thinking there is a reset somewhere I can't see. I even tried display:table-row !important; to no avail. I can apply border:2px solid blue; no problem. I can apply display:none; no problem.
Any ideas as to what is going on here that would prevent this simple CSS param from working?
To re-iterate the ONLY thing I can do is apply CSS - No JavaScript and no HTML edits. Basically I pass in a CSS file in the url to the iFrame. That's all I get. Thanks!
EDIT: I apologize I had to remove the link to the example form on the live site.
Edit - screenshots had to be removed, but the solution is still valid.
Added this code to form-css.css, using Firebug. Beginning or end, it did not matter:
table#form_table div.questionlabel td {display: table-row !important;}
.questionnumber_questionlabel {margin: inherit!important;}
(Note: I reset that margin as the old one (-10px) was causing unsightly overlap.)