I'm trying to view notifications on razor view. I used foreach loop to get the data from the model.I want to display both "invitations" and "Requests" divs on the view like in the two table columns.One invitation down after another invitation.one request down after another request..(in one column all the invitations and requests on the other).. i used css float to do this.. but in the divs get mix in the result..why is that? there are some othaer elements in the view like, nav bar,side bar etc...my code is as follows;
foreach (var item in Model)
{
if (#item.CreatedBy == item.UserId)
{
<div style="float: right; width: 580px;">
<div class="panel panel-info" style="width:500px;margin-right:50px">
×
<div class=" panel-heading">
<h3 class="panel-title">Notification #counter1</h3>
</div>
<div class="panel-body">
<p>Event is created by yourself .Budget of the event is #item.Budget <p>
#if (item.IsAccepted)
{
<p>You have accept the invitation!!!</p>
}
#if (!item.IsAccepted)
{
<p>You haven't accept the invitation yet!!!!</p>
}
#{counter1++;}
</div>
</div>
<br />
</div>
}
else
{
<div style="width: 580px; float: left">
<div class="panel panel-info" style="width:500px;margin-left:250px;">
×
<div class=" panel-heading">
<h3 class="panel-title">Notification #counter2</h3>
</div>
<div class="panel-body">
<p>Event is created by #item.Email .Budget of the event is #item.Budget <p>
#if (item.IsAccepted)
{
<p>You have accept the invitation!!!</p>
}
#if (!item.IsAccepted)
{
<p>You haven't accept the invitation yet!!!!</p>
}
#{counter2++;}
</div>
</div>
<br />
</div>
}
}
What you need is css attributes "clear: right" and "clear: left" for your div's.
However, once you use them you will find next problem - there will be vertical gaps between your div's on the right and left side. That is because you are placing new div's right into body element of html page in your foreach loop. To make it right, you should first create two containers (divs) to which you should respectively add your divs containing data.
Unfortunately, with your current implementation you would have to iterate over your Model twice - once to fill up the right container with divs, and then once again to fill up the left container.
A better approach would be to create a ViewModel containing two collectios of objects which you are currently using, e.g.:
public class MyViewModel
{
public IList<MyModel> Invitations { get; set; }
public IList<MyModel> Requests { get; set; }
}
and use it as your View's model
#model MyApplication.Models.MyViewModel.
With this approach, you also remove some logic from the view, which is a good thing.
Here is an updated code for your view using the ViewModel as View's model:
#model MvcApplication1.Controllers.MyViewModel
#{
int counter1 = 0, counter2 = 0;
}
<div style="float: right; width: 580px; clear:right">
<span>Invitations</span>
#foreach (var item in #Model.Invitations)
{
if (#item.CreatedBy == item.UserId)
{
<div>
<div class="panel panel-info">
×
<div class=" panel-heading">
<h3 class="panel-title">Notification #counter1</h3>
</div>
<div class="panel-body">
<p>Event is created by yourself .Budget of the event is #item.Budget <p>
#if (item.IsAccepted)
{
<p>You have accept the invitation!!!</p>
}
else
{
<p>You haven't accept the invitation yet!!!!</p>
}
#{counter1++;}
</div>
</div>
<br />
</div>
}
}
</div>
<div style="float: left; width: 580px; clear:left">
<span>Requests</span>
#foreach (var item in #Model.Requests)
{
<div>
<div class="panel panel-info">
×
<div class=" panel-heading">
<h3 class="panel-title">Notification #counter2</h3>
</div>
<div class="panel-body">
<p>Event is created by #item.Email .Budget of the event is #item.Budget <p>
#if (item.IsAccepted)
{
<p>You have accept the invitation!!!</p>
}
else
{
<p>You haven't accept the invitation yet!!!!</p>
}
#{counter2++;}
</div>
</div>
<br />
</div>
}
</div>
Good luck :)
Edit: a quick lookup to how the page looks after using provided solution:
https://jsfiddle.net/nh8Ls531/
Related
my landing page component declares in it a header component like so
<div class="container-fluid">
<div class="intro-section">
<div class="background">
//some stuff
</div>
<div class="content">
<app-page-header></app-page-header>
<div class="row">
<div class="col-12 text header mt-3">
Hello World
</div>
<div class="col-12 text-center mt-4 mb-4">
<button class="btn know-more-btn text" (click)="scroll(subscriptions)">Tell me More</button>
</div>
</div>
</div>
</div>
<div #subscriptions></div>
<div id="others" class="otherSection">
//other stuff
</div>
</div>
the scroll function in landing-page.component.ts is
scroll(el: HTMLElement) {
el.scrollIntoView({behavior:"smooth"});
}
I've also tried this
scrolling() {
(document.getElementById('others')).scrollIntoView({behavior:"smooth"});
}
I want to have a button in my app-page-header component that triggers or perform the same action an "scroll(subscriptions)" i.e in the landing page scroll to subscriptions. How can I achieve this?
Create an EventEmitter inside you app-page-header like
#Output() onButtonClicked: EventEmitter<any> = new EventEmitter();
The button in your app-page-header will emit the action to the parent component like:
buttonClicked() {
onButtonClicked.emit();
}
On your landing page add this to call the scroll function whenever the event is emitted.
<app-page-header (onButtonClicked)="scroll(subscriptions)"></app-page-header>
I want to hide the li when clicking the plus button. here my data are passing but li is not clearing .(my output is like when clicking the plus button the datas are move but still the li is there.i want to remove the li instance)
my html code is
<div class="searchResult-Container">
<ul>
<li *ngFor="let stocks of products"
[class.selected]="stocks === selectedStock"
(click)="onSelected(stocks)">
<div class="row searchItem" style="margin:0px;">
<!--search item starts-->
<div class="col-md-10 col-sm-10 col-xs-12">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-12 hidden">
<label>Item</label>
<span>{{stocks.ItemID}} </span>
</div>
and my TS code is
onSelected(IComboDetails: IComboDetails): void {
this.selectedStock = IComboDetails;
}
Looks like you want to remove all items you click plus
onSelected(comboDetails: IComboDetails): void {
const index = this.products.indexOf(comboDetails);
if (index !== -1) {
this.products.splice(index, 1);
}
}
I am having trouble trying to have a responsive grid of 3 boxes with some aligned content inside using the library Bulma. I would like to make it work still maintaining the level inside a box if possible.
Any help would be appreciated.
This is the result I expect:
But when decreasing the width, it breaks:
This is the code I am using:
<div className="columns sub">
{this.props.options.map(option => (
<div className="column is-one-third" key={option.id}>
<div
name={option.id}
className={
`box ` +
(this.props.optionToBeChosen === option.id
? "box-is-active"
: "")
}
onClick={() => this.props.onClick(option.id)}
>
<div className="level is-mobile">
<div className="level-item level-left">
<div>
<p className="box-text-title">{option.title}</p>
<p className="box-text-small">{option.description}</p>
<p className="box-text-small">{option.description2}</p>
</div>
</div>
<div className="level-item level-right has-text-right">
<div>
<p className="box-text-demo">{option.cta}</p>
</div>
</div>
</div>
</div>
</div>
))}
</div>
The Bulma levels are explicitly told not to shrink
.level-left, .level-right {
flex-basis: auto;
flex-grow: 0;
flex-shrink: 0;
}
You'll have to override that to get the levels to not break out of the .box elements.
Rather than overriding ALL level items, I suggest you add a custom class to those levels that you want to be able to shrink.
Something like
<div class="level is-mobile level-is-shrinkable">
Level items here...
</div>
<style>
.level-is-shrinkable .level-left,
.level-is-shrinkable .level-right {
flex-shrink: 1;
}
</style>
In my case, I had to add a third styling condition for centered level-item elements:
.level-is-shrinkable .level-left,
.level-is-shrinkable .level-item,
.level-is-shrinkable .level-right {
flex-shrink: 1;
}
Many thanks to just-a-web-designer for his|her answer.
got an issue with updating partial views within my application.
Basically, after the login procedure the user will be redirected to a selection of archives to choose.
It should lead to a searchmask to enter some criterias to search for.
What I got is this:
#_Layout.cshtml
<div id="_pview">
<div class="container body-content">
<div class="_pviewcontent">
#RenderBody()
</div>
</div>
<footer class="footer">
<hr />
<a class="copyright">#Html.ActionLink($"© Copyright 2006 - {#DateTime.Now.Year} MyCopyright", "Index", "About")</a>
</footer>
<div id="loading_image" class="loading" style="display: none;"></div>
</div>
#ArchiveSelection/Index.cshtml
<div id="container">
<div id="_divpartialview">
#{Html.RenderPartial("_ArchiveSelection", Model);}
</div>
</div>
#ArchiveSelection/_ArchiveSelection.cshtml
<table class="table">
#{
if (Model != null) {
foreach (var item in Model.FileCabinetList) {
<tr>
<td>
#Ajax.ActionLink(item, "Index", "SearchMask", new {filecabinet = item}, new AjaxOptions {UpdateTargetId = "_divpartialview", LoadingElementId = "loading_image"})
</td>
</tr>
}
}
}
</table>
#RenderBody/RenderPartial() will show the list below the navigation bar.
After updating the div container with a partial view, it moves into the navigation bar.
#SearchMask/_SearchMask.cshtml
<div style="height: 500px;">
<div>
<div style="height: 500px; width: 330px; float: left; background-color: aqua"></div>
<div style="height: 500px; width: 330px; float: left; background-color: gray"></div>
<div style="clear: both;"></div>
</div>
</div>
As you can see the container div (_divpartialview) moves right into the navigation bar after updating it.
Any idea what I am missing or doing wrong?
Regards
Finally resolved it on my own.
I now feel pretty embarassed, because it was so simple. It was just a css template, that was colliding with bootstrap css.
Due to improper naming of some css classes this was the result.
Im kinda new to this, so don't laugh at me too hard :D
I have a json with some objects. Using #foreach from Razor, I want to expose the results on a template, along with some filters that will filter my results.
The problem is that I can't render the template correctly. I want my sidebar/widget to be rendered one time one the right, and the results to be rendered one bellow another, and to look as you'd expect.
CODE:
#{int i = 0;}
#{
var client = new WebClient();
var json = client.DownloadString("http://example.com/raw/a5N8mJ2Y");
var results = Json.Decode(json);
}
<div class="container">
<div class="row">
#foreach (var result in results)
{
i++;
if (i == 2)
{
<!-- Left sidebar goes here -->
<aside id="sidebar" class="col-sm-3">
<section id="filters">
<h3>Filtre</h3>
...
</section>
</aside>
}
<div style="border-style: groove; " class="col-sm-9">
<!-- objects from json go here -->
</div>
}
</div>
</div>
Screenshot:
If you want your sidebar to appear only once, it's pointless being in the foreach loop. It's getting put to the right and pushing the next item down because you're placing it between the results columns.
I think you should set it out so there is one aside element outside of the foreach loop and one column that contains the json items, e.g.
<div class="container">
<div class="row">
<!-- Left sidebar goes here -->
<aside id="sidebar" class="col-sm-3">
<section id="filters">
<h3>Filtre</h3>
...
</section>
</aside>
<div class="col-sm-9">
#foreach (var result in results)
{
<div class="item-result">
<!-- object result here -->
</div>
}
</div>
</div>
</div>
Then just style your .item-result class like:
.item-result{
border-style: groove;
display: block;
margin-bottom: 15px;
}