I'm struggling to make Aurelia virtual-repeat.for work with table and tr elements. Here is my markup of the modified Users page of aurelia skeleton app:
<table style="width:500px; height: 200px; overflow-y:scroll; display:block">
<tr virtual-repeat.for="user of users" style="width:500px; height: 50px">
<td>
${user.avatar_url}
</td>
</tr>
</table>
When I scroll the table down, the items below aren't rendered and I see just the empty space all over. What am I missing?
The issue was fixed in version 0.4.3, so the described scenario is working now
Related
I am working on jhipster 5.7.2 project with angular 7 and I am using angular datatables and it's responsive extension is working fine when I have static data, but when I use *ngFor directive in tag it doesn't collapse the column on resizing, just hides the column header but the column is still there.
After I resize to small window size and size back to normal the orientation of the first table row gets distorted and doesn't get fixed until I reload the page.
P.S - Struggled a lot on finding a fix, and tried giving width=100% to the table but the issue still persists.
user-management-component.html
<div>
<table datatable [dtOptions]="dtOptions" class="row-border hover" width="100%">
<thead>
<tr class="tr-bg">
<th>ID</th>
<th>Login</th>
<!-- <th>Last name</th> -->
</tr>
</thead>
<tbody>
<tr *ngFor="let user of users; trackBy: trackIdentity">
<td><span>{{user.id}}</span></td>
<td><span>{{user.login}}</span></td>
<!-- <td><span>Bar</span></td> -->
</tr>
</tbody>
</table>
</div>
Here is the ngOnInit() function where dtOptions are declared.
user-management-component.ts
ngOnInit() {
this.dtOptions = {
responsive: true
};
this.accountService.identity().then(account => {
this.currentAccount = account;
this.loadAll();
this.registerChangeInUsers();
});
}
Full size page table
Table After resizing the window
Thanks in advance for the help!
I have a half answer to your question, the code below adjusts the table, im using it to readjust my tables on sidemenu open/close. Its a half answer because I dont know when should you call it. I hope It helps
datatableElement.dtInstance.then((dtInstance: DataTables.Api) => {
dtInstance.columns.adjust().draw();
})
Here is a sample: JsFiddle
I have a table with 3 columns. Each should have 500px. But my table is resized to fit within the parent div (600px).
The width of my table should be 1500 (3x500) and a scrollbar should be displayed in parent div. How can I resolve this without adding a "width=XXX"?
<div id="container">
<table id="table">
<colgroup>
<col style="width: 500px"></col>
<col style="width: 500px"></col>
<col style="width: 500px"></col>
</colgroup>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
</table>
Apply min-width to the table tag (it doesn't work on col as explained in my comment on the OP).
Updated CSS:
#table {
table-layout:fixed;
margin:3px;
border-collapse:collapse;
min-width: 1500px;
}
Tested in Chrome and Firefox, and should be widely supported (according to caniuse).
Edit I've realised this answer doesn't actually answer your question, as it works around the col tag problem rather than solving it. I hope it helps anyway though.
I am writing relational xpath i need this code to fetch "Tax" Location
<td id="td26" style="width: 16%">
<div class="bglabel" style="width: 150px; clear: both">
Tax
<div style="float: right;">
</div>
</td>
Xpath Code which i have written
td[div[text()='Tax ']] - Not Working
td[div[contains(text(),'Tax')]] - Not Working
The accepted answer changes OP's intended logic.
What OP's trying to do is to find div with text "Tax" inside a td, therefore OP's own answer is on the right track, the accepted answer isn't.
//div[contains(text(),'Tax')] locates it anywhere in DOM, which is likely to cause trouble.
What OP wants is (using . to specify current node):
//td[./div[contains(text(),'Tax')]]
Imagine there is another div also contains text "Tax", //div[contains(text(),'Tax')] will find the one OP doesn't want.
<div>Tax table</div>
<table>
<tr>
<td id="td26" style="width: 16%">
<div class="bglabel" style="width: 150px; clear: both">Tax <div style="float: right;"></div></div>
</td>
</tr>
</table>
#Santhosh.S: Hope this makes sense to you.
I've got a rather wide (1200+px) Telerik Grid in Telerik Extensions for ASP.NET MVC in Razor Syntax and I want to be able to hide / unhide certain columns based on the width of the end user's viewport in their browser. Is this possible?
My wish would be to have 3 columns appear that are otherwise set to .Hidden(true) if viewport width was >1024px.
One possible solution is to use media queries and the technique of responsive design.
The basic principle would be to render all columns so they are all emitted in the HTML (i.e. set Hidden to false on all columns) and then use media queries in the CSS to show/hide the appropriate columns based on the viewport width.
I'm not sure of the exact markup that the Telerik grid emits, but I've created a jsfiddle that demonstrates the concept with a basic HTML table here: http://jsfiddle.net/peRq2/
HTML:
<table>
<thead>
<tr>
<th>Header</th>
<th>Header</th>
<th>Header</th>
<th class="wide">Header (wide)</th>
<th class="wide">Header (wide)</th>
<th class="wide">Header (wide)</th>
</tr>
</thead>
<tbody>
<tr>
<td>Value</td>
<td>Value</td>
<td>Value</td>
<td class="wide">Value</td>
<td class="wide">Value</td>
<td class="wide">Value</td>
</tr>
<tr>
<td>Value</td>
<td>Value</td>
<td>Value</td>
<td class="wide">Value</td>
<td class="wide">Value</td>
<td class="wide">Value</td>
</tr>
</tbody>
</table>
CSS3 (with the media query based on a width of 600px - you can change to 1200px):
#media (max-width: 600px) {
.wide {
display: none;
}
}
The idea is that the ths and tds marked up with the wide class are hidden when the viewport is less than 600px. Try changing the width of the result pane on the jsfiddle to see the result of the media query at work.
One thing to note is the browser compatibility of media queries (basically IE9 and above and all other modern browsers): http://caniuse.com/css-mediaqueries - there's also more here: http://webdesignerwall.com/tutorials/css3-media-queries
Hope this gives you some inspiration!
Sending out mass emails, pretty much the whole thing is inside tables.
CSS affecting the table:
.title {
vertical-align: top;
}
HTML:
<table width="580" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="title" align="left" width="440" valign="top">
<h2><singleline label="Title">Enter your title</singleline></h2>
<p><multiline label="Description">Description</multiline></p>
</td>
<td align="left" valign="top" width="20"><img src="/images/00.gif" height="1" width="20" border="0"></td>
<td align="left" valign="top" width="120"><img src="/images/001.jpg" editable="true" label="Image" width="120" border="0"></td>
</tr>
<tr>
<td colspan="3" align="left" valign="top" width="580"><img src="/images/00.gif" height="20" width="1" border="0"></td>
</tr>
</table>
I need the text inside the tag to be flush with the top of the table. Currently the /images/001/jpg is flush, but the text is 5 pixels below the edge of the table.
I'm using vertical-align: top in the CSS, have tried border-spacing: none, border-collapse: collapse, and border: none. None of them solved the problem.
Using margin-top: -5px; on the tag solved the problem in standard browser testing, but wasn't supported by some email clients.
this is Ros from Campaign Monitor. What isn't entirely obvious is that the <singleline> and <multiline> tags convert into <p>your content</p>
...when imported into the Campaign Monitor editor. It's these <p> tags that are creating this extra padding - here's an example.
The easiest way to avoid this is to add p { margin: 0; padding: 0; } to your CSS styles.
Hopefully this fixes this issue for you. Note that we have a forum for answering questions like this, so feel free to post your template code there in the future.
Many thanks to everyone who contributed here!
Ros' suggestion suffices most of the time, but Gmail removes your header styles which leaves the inserted p tags with gmail's default margin top and bottom.
An alternative to get around this is by adding a div tag within your multiline tag. This will successfully prevent Campaign Monitor from wrapping your content with a p tag.
Here is a structure example:
<multiline>
<div>
Your Content Goes Here.
</div>
</multiline>
Put
valign="top"
on your TD for the text. If the email client doesn't recognize CSS it should recognize the standard HTML attribute.
Also, if that doesn't fix it, can you edit your Q and add the definition for "title" CSS definition that you are using on that .
I'm assuming your referring to the text inside the H2 tag.
Create a class for the <h2>
.noPad {
padding-top: 0px;
}
Or don't use the H2 and just use a span or div element.
It could just be the line-height of the text as opposed to margin/padding - check that as well