I have the following code :-
#foreach (var item in Model)
{
<div class="comment-box">
<div class="comment-head">
<div class="comment-name">
#item.FromUser
</div>
<div class="comment-date">
#item.DaysAgo
</div>
</div>
<div class="comment-content">
#item.Message
</div>
</div>
}
I want to show this by webgrid. But problem is webgrid shows the data in columns, how to do it in div structure.
This is my new code for using webgrid :-
#{
var grid = new WebGrid(Model);
}
<div>
#grid.GetHtml()
</div>
The following thing worked for me :-
#{
var grid = new WebGrid(Model);
}
<div>
#grid.GetHtml(tableStyle: "table-comment",
columns: grid.Columns(
grid.Column("", "", #<text><div class="comment-box">
<div class="comment-head">
<div class="comment-name">
#item.FromUser
</div>
<div class="comment-date">
#item.DaysAgo
</div>
</div>
<div class="comment-content">
#item.Message
</div>
</div></text>)))
</div>
Related
I have the following HTML and I want to select the value "1933".
I tried $('div.mydata dl:nth-of-type(1)').text() but that returns "1933110 m243" where I'd expect "1933". What am I doing wrong?
I checked here already.
console.log($('div.mydata dl:nth-of-type(1)').text());
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mydata">
<div>
<div class="left">
Year: Lot size: Total: Cars: Motors:
</div>
<div class="right">
<div>
<dl>1933</dl>
</div>
<div>
<dl>110 m<sup>2</sup></dl>
</div>
<div>
N.A.
</div>
<div>
<dl>4</dl>
</div>
<div>
<dl>3</dl>
</div>
</div>
</div>
</div>
The selector: $('div.mydata dl:nth-of-type(1)').text() is essentially selecting the first of every <dl> inside of div.mydata.
If you just want the contents of the first <dl> on the page use:
$($('div.mydata div dl').get(0)).text()
I'm writing a code where there's an arrayList having two names in it i.e.Bob & Steve and i want to display them such that if Bob is displayed it should be green in color and if Steve is displayed it should be REd in color.
Component.CSS
.Bob{
font-weight:bold;
color:green;
}
.Steve{
color:red;
}
Component.HTML
<div class="container">
<div class="row" *ngFor="let st of Names;">
<div class="col-2">
<p class="Bob">{{st}}</p>
</div>
<div class="col-2">
<p class="Steve">{{st}}</p>
</div>
</div>
</div>
in Component.Ts
Names:string[]=['Bob','Bob','Steve','Bob','Steve']; in Component.Ts
You can provide class based on condition .
Modify your code like below :
<div class="container">
<div class="row" *ngFor="let st of Names;">
<div class="col-2">
<p [ngClass]="(st=='Bob')?'Bob':'Steve'">{{st}}</p>
</div>
</div>
</div>
Here is the working example :
Working Stackblitz Example
When we have a large number of elements and we can showed it with different background we can adopt several approaches.
Has an array of styles/background and use the index
colors=['red','yellow','green'...]
<div *ngFor="let item of items;let index=i>
<div [style.background-color]="colors[i]">item.data</div>
</div>
The background was a "property" of "items"
items=[{data:...,color:'Red'},{data:...,color:'yellow'},...]
<div *ngFor="let item of items;let index=i>
<div [style.background-color]="item.background">item.data</div>
</div>
We can use
[style.css_property]="value"
//or
[className]="class"
//or
[ngClass]="{'class':condition}"
In your case, Aman, I think that it's better that your "items" has a property "class" that was, e.g.
{data:...,class:'bold-true green-true'}
So, when you want add a item, you can make a function
getClass()
{
let class="";
if (this isBold)
class="isBlod-true";
if (this.isCut)
class=class+" isCut-true";
if (this.isGreen)
class=class+" isGreen-true";
...
return class
}
And when you add an item, you can do
items.push({data:...,class:this.getClass()})
Then the code
<div *ngFor="let item of items;let index=i>
<div [className]="item.class">item.data</div>
</div>
make the trick
I need to search for a keyword in the span element (class "D") and then based on the matching criteria, I want to click on the Choose input element button.
Assuming I am searching for "Test", I would like to see working code on how to achieve this.
Example markup:
<div class="A">
<div class="B">
<input class="C" type="submit" onclick="AddFacility(this)" data-facilityid="300075" value="Choose">
</div>
<div class="D">
<span class="js-open-more-info">Test</span>
</div>
</div>
Below is an code sample in java
//Get the text from span
String text = driver
.findElement( By.xpath("//span[#class='js-open-more-info']") )
.getText();
//if the text is equal to Test then click on the button
if( text.equals("Test") ){
driver.findElement( By.xpath("//input[#class='C']") ).click();
}
EDIT
For dealing with multiple divs of same structure sample html(just tweaked ur html and added multiple divs)
HTML
<html>
<body>
<div class="A">
<div class="B">
<input class="C" type="submit" onclick="AddFacility(this)" data-facilityid="300075" value="Choose">
</div>
<div class="D">
<span class="js-open-more-info">Test1</span>
</div>
</div>
<div class="A">
<div class="B">
<input class="C" type="submit" onclick="AddFacility(this)" data-facilityid="300075" value="Choose">
</div>
<div class="D">
<span class="js-open-more-info">Test2</span>
</div>
</div>
<div class="A">
<div class="B">
<input class="C" type="submit" onclick="AddFacility(this)" data-facilityid="300075" value="Choose">
</div>
<div class="D">
<span class="js-open-more-info">Test3</span>
</div>
</div>
</body>
<script>
document.getElementsByClassName('C')[2].addEventListener("click", myFunction);
function myFunction() {
alert('deleted');
}
</script>
</html>
Code in Java
//get all the divs into a list
List<WebElement> divs = driver.findElements(By.xpath("//div[#class='A']"));
//loop through the list
for(int i=0;i<divs.size();i++)
{
//get text of all the span elements inside multiple divs
String text=divs.get(i).findElement(By.xpath(".//span[#class='js-open-more-info']")).getText();
System.out.println(text);
//if text of span element is equal to Test3 click on the respective delete button
if(text.contentEquals("Test3")){
divs.get(i).findElement(By.xpath(".//input[#class='C']")).click();
}
}
Hope this helps you....Kindly get back if you need any further help
This is my code:
<div class="row">
<div class="col-xs-4">
<h2>Some header text</h2>
</div>
<div id="div1" class="col-xs-8">
<div class="pull-right">
#using (Html.BeginForm("ChangePageSizeAction", "myController"))
{
#Html.AntiForgeryToken()
<small>Page Size</small>
#Html.DropDownList("pageSize", null, htmlAttributes: new { #class = "form-control", onchange = "this.form.submit();" })
}
</div>
<div id="div2" class="pull-right" style="padding-right:10px">
#Html.PagedListPager(Model, page => Url.Action("Index", new { page }),
new PagedListRenderOptions()
{
MaximumPageNumbersToDisplay = 3,
DisplayPageCountAndCurrentLocation = true,
PageCountAndCurrentLocationFormat = "Page {0} of {1}",
})
</div>
</div>
</div>
This is the output:
I want to align the PagedListPager to bottom beside the DropDownList like this:
I tried to set div1 style to position:relative and div2 style to position:absolute; bottom:0 but didn´t work.
After Morpheus comment I looked for the difference in his jsfiddle example and mine, so I found an error (margin:0) in my css classes.
So, sorry for the wrong question.
I have a form and im getting confused with rows.
Where should I put in rows? Do I need them? Do I need one for a modal? One for the entire form or each form input?
Here's what I have:
<div class="container">
<div id="modal" class="modal fade">
//modal stuff
</div><!-- /.modal -->
<h1>Title Here</h1>
<form id="content-add-form" class="form-horizontal" role="form" name="content-add-form" enctype="multipart/form-data">
<div class="form-group">
<label for="title" class="col-md-2 control-label">Title:</label>
<div class="col-md-4">
<input name="title" type="text" class="form-control" placeholder="Title">
</div>
</div>
<div class="form-group">
<label for="date" class="col-md-2 control-label">Date:</label>
<div class="col-md-2">
<div class='input-group date' id='date-picker'>
<input type='text' class="form-control" name="date" value="{{ date("d-m-Y") }}" data-format="dd-MM-yyyy" readonly/>
<span class="input-group-btn">
<button class="btn btn-default datepicker-invoker" type="button"><i class="icon-calendar"></i></button>
</span>
</div>
</div>
</div>
</form>
You use <div class="row"> whenever you start a section of cols for an example, lets say I have have 3 sections. The first row I require 12 columns. I wrap those twelve columns in a row I listed below an example counting to 12. The second I need 3 columns, In those columns lets say for an example I need a nav-menu, some text-content and an image, I will wrap the columns in a row. Same like the first two, the third column I need only a image and some content. I follow the same rules.
<div class="row">
<div class="col-md-1">one</div>
<div class="col-md-1">two</div>
<div class="col-md-1">three</div>
<div class="col-md-1">four</div>
<div class="col-md-1">five</div>
<div class="col-md-1">six</div>
<div class="col-md-1">seven</div>
<div class="col-md-1">eight</div>
<div class="col-md-1">nine</div>
<div class="col-md-1">ten</div>
<div class="col-md-1">eleven</div>
<div class="col-md-1">twelve</div>
</div>
<div class="row">
<div class="col-md-4">nav-menu</div>
<div class="col-md-4">content</div>
<div class="col-md-4">image</div>
</div>
<div class="row">
<div class="col-md-6">image</div>
<div class="col-md-6">content</div>
</div>
You do need the rows because if you don't follow the structure defined in the documentation-
<div class="container-fluid">
<div class="row">
<div class="col-md-12">form</div>
</div>
</div>
-the grid won't behave as expected. There are a couple ways of working around this, neither of them ideal.
You can wrap the form around the container and then create the whole grid structure inside that container putting your form groups inside the columns. You might have to set the form width to 100%. Another limitation is that your form groups need to be inside columns and can't wrap them. Therefore if you really need to control widths inside form groups then you need to create a new container inside the group. This is fairly easily managed if you wrap containers in columns with factors of 2, 4 or 6 then in is clear where the columns in your new container will align with the columns in the outer container.
Send your inputs using javascript. Then you don't need a form.
I think I can see the confusion. A form has many fields, on different rows, but you wouldn't necessarily use a Bootstrap "row" for each.
What we can do is use just one Bootstrap "row", and then put each label/field pair in its own div. Within that div the label and the field have their own divs, with Boostrap col- information. This will give us a form with many rows, and will give the desired wrapping effect you are expecting with Bootstrap.
The example below is an MVC form. Don't let the MVC syntax confuse you - you can replace the #Html.Label & Editor with HTML labels & input fields.
<div class="container">
<div class="row">
#using (Html.BeginForm("MyAction", "MyController", Model))
{
#Html.AntiForgeryToken()
<div class="form-group">
<div class="col-md-4">
#Html.LabelFor(model => model.PersonFirstName)
</div>
<div class="col-md-8">
#Html.EditorFor(model => model.PersonFirstName, new { htmlAttributes = new { #class = "form-control", placeholder = "Enter your first name" } })
#Html.ValidationMessageFor(model => model.PersonFirstName, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-md-4">
#Html.LabelFor(model => model.PersonSurname)
</div>
<div class="col-md-8">
#Html.EditorFor(model => model.PersonSurname, new { htmlAttributes = new { #class = "form-control", placeholder = "Enter your surname" } })
#Html.ValidationMessageFor(model => model.PersonSurname, "", new { #class = "text-danger" })
</div>
</div>
}
</div>
</div>