How can I make it bring me the first value - razor

I have a question. I have a #Model.budgetComment.comment. And if I leave it like that, it doesn't work for me, because I have to get the first value that it returns. I have been told that I can achieve this with First(), but I can't do it. I have to fetch the first value of that Model. How could I do it? Thanks a lot.
<div style="border: 2px solid black; height: 50px">
Observacion especiales sobre cotizacion: <span></span>
</div>

Related

Did *ngFor usage change?

Before I go into this, the code was working great just awhile back and I haven't made changes, but I am wondering if Angular updated their variable referencing or what.
I have a JSON array that is raw and assigned to an any-type variable siteList.
When I run console.log(siteList) it spits out the JSON object perfectly.
Used to when I ran the code below everything worked and showed up just fine.
<div *ngFor="let site of siteList" class="card mat-elevation-z8" style="margin: 20px; border: 1px solid lightgrey;">
<div class="card-header" style="background: #f88d3d; color: white;">
{{site.Name}} - {{site.Age | date}}
<span *ngIf="site.Location != null">
-
<i class="fas fa-map-marker-alt"></i>
</span>
<mat-radio-button (click)="setSite(site.SiteId)" class="float-right"></mat-radio-button>
</div>
</div>
The strange thing is, it's making the appropriate amount of cards so it is taking in the object correctly. But none of my variable references are working like they used to. Is it because siteList is defined as any and not like a full class? I am just floored because I have not changed anything.

avatars that stay on top of backgrounds never work?

This is a dumb question for some, probably, but I don't know much of HTML so please bear with me.
I'm trying to setup an HTML my friend did for me for a site, an user HTML. But, for some reason, the original code she gave me for my avatar doesnt work. Everything else does, even other images, except the avatar.
This is how it's supposed to look like (this was her screenshot of the preview), but instead, looked like this on my end.
<!---------------- TOP BANNER -------- CHOOSE A SEAMLESS PATTERN ----------------------------------------------> <div class="card border-0 modal-open bg-faded" style="border-radius: 1em; box-shadow: 0px 0px 16px rgba(0,0,0,.2);">
<div style="background: url('https://eskipaper.com/images/cute-flower-pattern-wallpaper-1.jpg') fixed; height: 200px;"
class="card-block" ></div>
<div class="row">
<div class="col-lg-3 pr-lg-0">
<div class="card card-block d-block bg-faded border-0 rounded-0">
<!---------------- 200 x 200 AVATAR IMAGE ---------------------------------------------->
<img src="https://cdn.discordapp.com/attachments/840360608041402441/861941534588010496/unknown.png"
class="bg-faded p-2 rounded-circle d-block mx-auto mb-2" style="max-height: 200px; margin-top: -100px;">
This was the code she sent me (the focus is the avatar part, but decided to upload the entire thing).
After a bit of mumble jumbo, she tried to fix it to something else (the avatar section) to see if the image would show up. And so it did, but not in the original way intended. So she assumed my PC basically hates me.
<!-- 【 Avatar 】
------------------------------------------------ -->
<img src="https://cdn.discordapp.com/attachments/840360608041402441/861941534588010496/unknown.png" class="rounded-circle mx-auto p-2 bg-faded" style="width:200px;margin-top:-75px;">
This was the 2nd code she sent, and worked.
This issue has happened to me before with another entirely different HTML for the same purpose. If I disable WYSIWYG the original code does work, just not how it's supposed to. It ends up separated from the background.
So this boggles my mind. Is it my PC or just really, horrible luck with HTML?
For now I'm sitting with the WYSIWYG disabled, to have at least a readable avatar. Any help on this, if it's something fixable?
Sorry for any bad term, confusion, or something of the like. I'm illiterate when it comes to coding.
EDIT1: I tried to see it in a code preview made for the specific site I'm using, and it does show up like intended (see image 1), but when copy pasting that code for the live site it breaks (img 2). This is making this all more confusing.
A lot of the problem with something like this is that you not only have to worry about the HTML being sent to you but also the styles that are already on your site influencing it after you put it in.
As an example, here's a simplified version that should mostly match the intended look/feel. It only uses inline styles. View it standalone on this site and I bet it's mostly what you want. If you paste it into yours, it MAY work. The point is the MAY. It's not "your PC hates you" but instead that html/css layout can get pretty complex and it's going to take some studying on your part to figure out what's getting applied and how to properly integrate any snippet with your site.
<div style="display: flex; flex-direction: column; align-items: center;background: #222;">
<div style="background: url('https://eskipaper.com/images/cute-flower-pattern-wallpaper-1.jpg') fixed; height: 200px; width: 100%;"></div>
<img src="https://cdn.discordapp.com/attachments/840360608041402441/861941534588010496/unknown.png" style="max-height: 200px; margin-top: -100px;border-radius: 200px; border: 10px solid #222;">
</div>

Edit column style in syncfusion Grid in angularjs

I am trying to make the syncfusion grid breathe a little by adding more margin or padding to the data that is being shown in the grid but completely unable to do it.
I have tried many things like cssClass and then adding a div inside the e-column but nothing is working for me.
I am really stuck at this for a day now. Can you please help me figure this out.
The code is as follows :
<div style="color:black;" ej-grid e-datasource="FarmersModal" e-gridlines="vertical"
e-allowfiltering="true" e-allowpaging="true" e-allowsorting="true" e-enableColumnResizing="true"
e-allowselection="true" e-filtersettings-filterType="excel">
<div e-columns>
<e-column e-type="string" e-field="FarmerId" e-headertext="vis" e-width="10" margin="30px"></e-column>
<div e-column e-type="string" e-field="FarmerId" e-headertext="Farmer Id" e-width="10" ></div>
<div e-column e-type="string" e-field="FarmerName" e-headertext="Farmer Name" e-width="20"></div>
<div e-column e-type="string" e-field="RegistrationId" e-headertext="Registration ID" e-width="20"></div>
<div e-column e-type="string" e-field="RegistrationDate" e-headertext="Registration Date" e-width="30"></div>
</div>
</div>
I was trying different ways to make it work so I was using different tags and trying to know how can I do the stuff. I just want to add margin to the table cells so that the table data doesn't looks cramped.
Thanks in advance and let me know where I am doing the mistake.
So based on your requirement we have prepared a sample and achieved your requirement by using external CSS. Please refer the below code example and sample for more information.
<style>
.e-grid .e-gridcontent .e-rowcell {
padding-top: 20px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 20px;
}
</style>

<a> tag appears in the wrong position in Chrome

I have a repeating partial view in an ASP.NET MVC 5 application that is showing up incorrectly in certain circumstances in Chrome. It's not happening in any other browser, and I'm at a loss to figure out what's going on.
My razor code is pretty straightforward -- just a foreach loop that calls #Html.Partial(). I'm going to skip it for now in the interest of saving space, but the HTML it produces looks like this:
<div id="dataDisplay">
<div id="dataRow39" class="list">
Edit
<span class="normal">AAA Test 1</span>
<span class="large">Test Description 1</span>
X
</div>
<div id="dataRow1" class="list">
Edit
<span class="normal">AHBA</span>
<span class="large">Arkansas Home Builders Association</span>
X
</div>
. . .
</div>
And the page itself looks like this:
When users click the "Edit" link, I use an AJAX call to replace a single div with a different partial view that has input elements for data-entry. That div also has a cancel button that triggers another AJAX call back to the original partial view. That produces nearly identical HTML, but one element gets positioned wrong.
<div id="dataDisplay">
<div id="dataRow39" class="list">
Edit
<span class="normal" style="">AAA Test 1</span>
<span class="large" style="">Test Description 1</span>
X
</div>
<div id="dataRow1" class="list">
Edit
<span class="normal">AHBA</span>
<span class="large">Arkansas Home Builders Association</span>
X
</div>
. . .
</div>
The only difference I can see is those empty style tags. They don't appear in the console when I debug my AJAX, and they don't appear in other browsers. But if I manually go in and remove them, it doesn't seem to fix the layout problem.
I realize I've left out a lot of details. I'm trying to keep this from being really excessively long. I can provide any of the missing details if needed. Does anybody have any idea what could be going wrong?
UPDATE: As I'm playing around with this a bit, I have a feeling it has something to do with the float:right on the .delete-button class. Here's the CSS for that class:
.delete-button {
float: right;
font-size: .9em;
text-align: right;
padding: 0 3px;
margin: auto 0;
color: #888;
}

django thumbnail img url does not correctly rendered in html

This is HTML code piece that in my template:
{%load thumbnail%}
<img style="border: 1px solid #53BCB8; padding: 2px;" src="{%thumbnail 'photodir/photo.jpg' 256x256%}" />
And in my settings.py
MEDIA_URL="http://url.com/static/"
And this is the rendered state of HTML:
<img style="border: 1px solid #53BCB8; padding: 2px;" src="http://url.com/staticphotodir/photo_jpg_256x256_q85.jpg" />
the problem is: in the rendered html, img url does not valid. Trailing slash is missing between "static" and "photodir". How is that happenning and what is the solution? Can anybody explain?
Note: thumbnail template tag belongs to sorl-thumbnail
Have a look, I created a test project for you. It works like a charm with:
Django==1.3.1
Pillow==1.7.6
sorl-thumbnail==11.12
I get /media/cache/77/c6/77c60cc55e126abe02cbe5de48693c80.png as the result. So it seems that your MEDIA_ROOT variable contains a wrong value. Please ensure it has a trailing slash.