I want to have multiple div with different background URLs.
My inline razor for this code seems to be wrong:
<table>
#foreach (var item in fa.get_albums()) {
<tr>
<td>
<div style="background-image:url('#item.picture');">
///something
</div>
</td>
</tr>
}
</table>
What's the right way to put inline razor in to background-imag:url()?
The issue you have is that MVC will happily fix the relative paths inside an img src attribute but not for style. You should map that virtual path using Url.Content():
<div style="background-image:url('#Url.Content(item.picture)');">
Related
I'm using a custom css class called 'td-group' to customize td with a rowspan, to be more specific [attr.rowspan] since i'm using angular. In short words, the css style doesn't always get applied correctly, i've looked everywhere and tried everything and still didn't figure it out
The bug only occurs on chrome and never in edge
Here the image of the bug
<tr *ngFor="let r of list; let i = index">
<ng-container *ngIf="group && r.representative.show">
<td class="td-group" [attr.rowspan]="r.representative.height">
{{r.representative.name}}
</td>
</ng-container>
<td *ngFor="let c of cols">
{{r[c.name]}}
</td>
</tr>
Stackblitz https://stackblitz.com/edit/angular-yr3pxq?file=src/app/app.component.html
We are building a dynamic table with Thymeleaf.
Some cells, of null values, are holding "-" sign, while cells with values hold some data from the object:
<td th:text="${person.getAddress()} ? ${person.getAddress().getCity() : '-'"}
So the current state is this:
<table border=1>
<tr><td>John</td><td>London</td></tr>
<tr><td>Paul</td><td>-</td></tr>
</table>
Now, we like to add a tooltip, that when hovering the relevant table cell, more data can be seen (e.g. the person's full address).
We found this CSS example for tooltip and we figure out our final result should be something like that:
<td class="tooltip">London
<div class="tooltiptext">
<div>Street: Green</div>
<div>Number: 123</div>
</div>
</td>
But when trying to implement it in Thymeleaf we got stuck.
This is what we tried:
<div th:switch="${person.getAddress()}">
<div th:case="null"><td>-</td></div>
<div th:case="*">
<td> // now what? how to both inject value and the sub divs? </td>
</div>
</div>
Another option we thought of is to create by concatenation the full HTML within a td th:text=...
But both of the ways seems very cumbersome.
You can use the safe navigation operator in combination with the elvis operator instead of your null check.
No need for switch or any logic like this. Create a couple extra tags and move your logic deeper into the html.
Don't use .getAddress(), you can just use .address for properties with correctly named getters/setters.
For example:
<td>
<span th:text="${person.address?.city} ?: '-'" />
<div th:unless="${person.address == null}" class="tooltiptext">
<div>Street: Green</div>
<div>Number: 123</div>
</div>
</td>
Without all the fancy stuff, you could also simply do something like this:
<td th:if="${person.address == null}">-</td>
<td th:if="${person.address != null}">
<span th:text="${person.address.city}" />
<div class="tooltiptext">
<div>Street: Green</div>
<div>Number: 123</div>
</div>
</td>
Hi I want to make a row in a table inactive. Even if it is easy to hack by myself and add a custom css with the same colour of the inactive elements of my current theme I think it can be handles by bootstrap itself.
Any suggestions?
Bootstrap has a few elements you might find helpful:
Use contextual classes to change row colors:
<!-- On rows -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>
<!-- On cells (`td` or `th`) -->
<tr>
<td class="active">...</td>
<td class="success">...</td>
<td class="warning">...</td>
<td class="danger">...</td>
<td class="info">...</td>
</tr>
http://getbootstrap.com/css/#tables-contextual-classes
Use contextual colors to change the color of text:
<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>
http://getbootstrap.com/css/#helper-classes-colors
The disabled element is primary for form elements and buttons. Check that out here,
I've created a custom class table-inactive:
.table-inactive td {
background-color: #ececec;
color: #b9b9b9;
}
Does the table row contain any inputs? If so, add the disabled HTML5 attribute to the input and perhaps make the text in that row greyed out to show it is inactive? Just an idea..
I.E.
<tr>
<td style="color:grey;">Sample Text</td>
<td><input type="text" disabled/></td>
</tr>
I have worked with Twitter Bootstrap a bit and did not see any of these features though.
Bootstrap 4 requires you to add "table-" to the class.
<tr class="table-danger">...</tr>
https://getbootstrap.com/docs/4.4/content/tables/#contextual-classes
The below table code in razor in a MVC View, generates a standard table lay out of rows and columns. What I am looking for is a way to style the rows so that they look different.... like a customised divs that have rounded corners and with color etc... Basically I dont want it look like a table at all, I want the data outputted in blocks/chunks (?) (one block for one row).. I hope I am making this easy to understand... for example a typical google page when you search has options on the left to click (for images, news, Videos etc) and once you click on a link the list on the right pane changes with entries .. I want my rows to look like that ..like blocks of data and not as a row and column structure...
<table>
#foreach (var item in Model)
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.Name)
</td>
<td>
#Html.DisplayFor(modelItem => item.Descr)
</td>
<td>
#Html.DisplayFor(modelItem => item.Number)
</td>
</tr>
}
}
</table>
I would suggest you don't use tables. If you want maximum flexibility, you're better off using <div> and <ul> elements and styling them accordingly, e.g.:
<ul class="item">
<li>
<div class="name">#Html.DisplayFor(m => m.Name)</div>
<div class="description">#Html.DisplayFor(m => m.Descr)</div>
<div class="number">#Html.DisplayFor(m => m.Number)</div>
</li>
</ul>
Then you probably do not want to use <table> instead you can try to use <ul>.
I have a Table (or a region) and want to set it's Width and Height value to another Div (or region).
The second one is actually a Ajax Indicator modal which display a loading text when the page is asynchronously post back. here is the example
<table id="MainTable">
<tr>
<td>
Content ....
</td>
</tr>
</table>
<div id="Progress">
Ajax Indocator
</div>
the following javascript didn't work
document.getElementById("Progress").style.width = document.getElementById("MainTable").style.width;
document.getElementById("Progress").style.height = document.getElementById("MainTable").style.height;
It should work both on IE and FireFox. how to correct it.
I checked some other solution in StackOverFlow but I couldn't fix it.
I'm waiting to hear from you.
Update : I use this
<script>
function SetSize(regionToChange, mainRegion) {
$(document).ready(function() {
$('#regionToChange)
.width($('#mainRegion).outerWidth())
.height($('#mainRegion).outerHeight());
});
}
</script>
and I call it like
<asp:Button ID="btnReset" runat="server" SkinID="Button" Text="Reset" OnClick="btnReset_OnClick" OnClientClick="SetSize('Progress', 'MainTable');" />
But it shows me an error which can not find the object
Update 2 I see this error
and in debugger I face with this
spoken in jQuery:
$(document).ready(function(){
$('#Progress')
.width($('#MainTable').outerWidth())
.height($('#MainTable').outerHeight());
});
in jQuery you can do
$("#Progress").css('width', function(){
return $("#MainTable").width()+'px';
});
and so with the height...
edit
on javascript,
this
document.getElementById("Progress").style.width = document.getElementById("MainTable").style.width;
document.getElementById("Progress").style.height = document.getElementById("MainTable").style.height;
will work if your html is something like this for id="MainTable"
<table id="MainTable" style="width: 500px; height: 300px;">
<tr>
<td>
Content ....
</td>
</tr>
</table>
because you are accessing style attribute...
edit2
function SetSize(regionToChange, mainRegion) {
$(regionToChange)
.width($(mainRegion).outerWidth())
.height($(mainRegion).outerHeight());
}
//you can use it as
SetSize('#Progress','#MainTable'); // prefix '#'if it's an ID