I would like to combine div table with Ajax.BeginForm:
and what it outputs looks like this:
<div class="Table">
<div class="Title">
<p>This is a Table</p>
</div>
<div class="Heading">
<div class="Cell"><p>Pos</p></div>
<div class="Cell"><p>Value</p></div>
<div class="Cell"><p>Action</p></div>
</div>
<div class="Row" id="Row_1">
<form>
<div class="Cell"><p>1</p></div>
<div class="Cell"><p>Hello</p></div>
<div class="Cell"><p><input type="submit" value="Send" /></p></div>
</form>
</div>
<div class="Row" id="Row_2">
<form>
<div class="Cell"><p>2</p></div>
<div class="Cell"><p>World</p></div>
<div class="Cell"><p><input type="submit" value="Send" /></p></div>
</form>
</div>
Demo
But each row is display only in the first column. How can I fix that?
Thx
Remove the Row divs and promote your forms to have the .Row class
<div class="Table">
<div class="Title">
<p>This is a Table</p>
</div>
<div class="Heading">
<div class="Cell"><p>Pos</p></div>
<div class="Cell"><p>Value</p></div>
<div class="Cell"><p>Action</p></div>
</div>
<form class="Row" id="Row_1">
<div class="Cell"><p>1</p></div>
<div class="Cell"><p>Hello</p></div>
<div class="Cell"><p><input type="submit" value="Send" /></p></div>
</form>
<form class="Row" id="Row_2">
<div class="Cell"><p>2</p></div>
<div class="Cell"><p>World</p></div>
<div class="Cell"><p><input type="submit" value="Send" /></p></div>
</form>
</div>
replace cell class from css with
.Cell
{
float:left;
border: solid;
border-width: thin;
padding-left: 5px;
padding-right: 5px;
width: 200px;
}
check example here
Related
I am new for angular .I wrote below code and I expect below style format with my code but i can't achieve using my below code can some one help me to solve my issue.
home.component.html
<div class="card">
<form [formGroup]="userForm">
<div class="mt-5 box">
<div class="form-row">
<div class="col-md-12">
<div class="form-group mt-4">
<label>Type</label>
</div>
<div class="form-row" style="margin-top:-10px">
<div class="col">
<input type="text" formControlName="type" class="form-control" placeholder="Type">
</div>
</div>
</div>
<div class="col-md-12">
<div class="form-group mt-4">
<label>Session</label>
</div>
<div class="form-row" style="margin-top:-10px">
<div class="col">
<input type="text" formControlName="session" class="form-control" placeholder="Session">
</div>
</div>
</div>
<div class="form-row mt-4">
<div class="col-md-6">
<button type="button" class="btn btn-primary" (click)="addItem()">Add</button> 
</div>
<div class="col-md-6">
<button type="button" class="btn btn-primary" (click)="reset()">Reset</button>
</div>
</div>
</div>
</div>
</form>
<div class="col-md-8 mt-4 mb-4">
<table class="table table-bordered">
<thead>
<tr>
<th>Type</th>
<th>Value</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of listData">
<td><span>{{item.type}}</span></td>
<td><span>{{item.session}}</span></td>
<td><button type="button" class="btn btn-primary" (click)="removeItems(item)">Remove</button></td>
</tr>
</tbody>
</table>
</div>
</div>
home.component.css
.box{
width: 50%;
border: 1px solid rgb(145, 138, 138);
border-radius: 25px;
padding: 0px 20px 20px 20px;
margin-left: 400px;
}
My Result
Expected
angular.json
I'm trying to arrange a div like this but can't get it to work.
What I'm getting is this
My thought was to keep the image in its own column and then split the other columns into smaller rows and insert there but that doesn't seem to work. Here's my code:
<a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
<div class="row d-flex w-100 justify-content-between products-div">
<div class="col-sm-1">
<img [src]="prod.imagePath" class="product-page-images">
</div>
<div class="row">
<div class="col-sm-10">
<h3 class="mb-1">{{prod.name}}</h3>
<p class="products-price-text">${{prod.price}}</p>
</div>
</div>
<div class="row">
<div class="col-sm-10">
<h5 class="mb-1">{{prod.seller}}</h5>
</div>
</div>
<div class="row">
<div class="col-sm-10">
<p class="mb-1">{{prod.description}}</p>
</div>
</div>
</div>
</a>
HTML
<div class="container">
<div class="row">
<div class="main-container clearfix">
<div class="col-md-1">
<div class="img-con">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e4/Small-city-symbol.svg/348px-Small-city-symbol.svg.png" alt="" />
</div>
</div>
<div class="col-md-11">
<div class="row">
<div class="col-md-12">
<div class="clearfix">
<div class="pull-left">
<h3>Name</h3>
<small>Seller</small>
</div>
<div class="pull-right">
<h3>Price</h3>
</div>
</div>
</div>
<div class="col-md-12">
<div class="desc">
description
</div>
</div>
</div>
</div>
</div>
</div></div>
css
.main-container
{
border:1px solid ;
}
.img-con
{
height:100%;
width:100%;
}
.img-con img
{
max-width:inherit;
max-height:inherit;
height:100%;
width:100%;
}
.desc
{
border:1px solid;
}
reference link
and style accordingly.. hope this helps
I have the following bootstrap code:
<div class="container-fluid">
<div class="row">
<div class="col-xs-2 col-md-2 col-sm-2">
<div style="width: 75px; background-color: #ccc">
<img width="75" alt="picture" src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300" />
</div>
</div>
<div class="col-xs-10 col-md-10 col-sm-10" style="">
Right content
</div>
</div>
</div>
On tablets and desktops, this code looks good. However, on smaller devices, xs, the right content flows into the image. I am trying to make the text just wrap on the right and not collide with the image.
I have a fiddle here so you can see what I'm talking about. If you open the fiddle and resize the browser small enough, you'll see the right text overlap onto the image. How can I prevent this?
Try this.
<div class="container-fluid">
<div class="row">
<div class="col-xs-3 col-md-2 col-sm-2">
<div style="width: 75px; background-color: #ccc">
<img class="img-responsive" alt="picture" src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300" />
</div>
</div>
<div class="col-xs-9 col-md-10 col-sm-10" style="">
Right content
</div>
</div>
</div>
It is because of the width set.
Try this.
JSFiddle
HTML
<div class="container-fluid">
<div class="row">
<div class="col-xs-2 col-md-2 col-sm-2">
<div style="background-color: #ccc">
<img class="test-image" alt="picture" src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300" />
</div>
</div>
<div class="col-xs-10 col-md-10 col-sm-10" style="">
Right content
</div>
</div>
</div>
CSS
.test-image{
width:100%;
height:auto;
min-width:25px;
}
Easiest way I know is to apply a direct width to element. You could theoretically alter the bootstrap 3 SCSS or LESS (whichever you use) and add in a special column class, but this is the most direct method.
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div style="width:75px" class="col-xs-2">
<div style="width: 75px; background-color: #ccc">
<img width="75" alt="picture" src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300" />
</div>
</div>
<div class="col-xs-10 col-md-10 col-sm-10" style="">
Right content
</div>
</div>
</div>
It is becaue of the width of the col-xs-2.You can chage that.Or try an alternative solution like this
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<div style="width: 75px; background-color: #ccc;display:table-cell;">
<img width="75" alt="picture" src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300" />
</div>
<div class=" " style="display:table-cell;vertical-align:middle;">
Right content
</div>
</div></div></div>
Or with css flexboxes like
<div class="container-fluid">
<div class="row">
<div class="col-xs-12" style="display:flex">
<div style="width: 75px; background-color: #ccc;flex:1;">
<img width="75" alt="picture" src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300" />
</div>
<div class=" " style="flex:1;vertical-align:middle;">
Right content
</div></div></div></div>
Im trying to copy the following picture with bootstrap
Here's the link if you want to see it https://slack.com/create#teamname
The image does fit the entire page, even though you scroll down , it won't show any extra picture, while mine does have.
My attempt is
<body>
<div class="container">
<div id="Page1">
<h1>Full Name</h1>
<div class="row">
<div class="col-md-5">
<h1></h1>
<form>
<input type="text" placeholder="Enter your Full Name" class="form-control">
Show page 2
</form>
</div>
<div class="col-md-7">
<img src="/img/space.jpg">
</div>
</div>
</div>
</div>
</body>
I add some custom css to the image
img {
width:100%;
height:730px;
}
and I got the following the result
How do i match the first picture in code?
I'm not a frontend guy , if anyone could help me would be really helpful.
Here's the JSFIDDLE --> https://jsfiddle.net/3soreoac/
http://codepen.io/anon/pen/wKQQxb
<div class="left col-md-6"></div>
<div class="right col-md-6"><img class="full" src="https://slack.global.ssl.fastly.net/66f9/img/signup/step1-illi#2x.png"></div>
.rightfull {
width: 100vh;
height: 100vh;
}
.left {
background-color: blue;
}
.right {
background-color: green;
}
This may help
HTML
<div class="container">
<div id="Page1">
<div class="row">
<div class="col-md-5 col-xs-5 leftpanel">
<h1>Full Name</h1>
<form>
<input type="text" placeholder="Enter your Full Name" class="form-control"> Show page 2
</form>
</div>
<div class="col-md-7 col-xs-7">
<img src="https://metrouk2.files.wordpress.com/2014/01/459405755-e1389347715754.jpg">
</div>
</div>
</div>
</div>
CSS
img{
width:100%;
height:732px;
}
.leftpanel{
background-color:grey;
height:732px;
}
Fiddle:here
In the layout below, I would like div1 and div2 to in the same row, but move div3 in next row (below div1). Thanks in advance.
<html>
<body>
<div style="width:50%;">
<div id="div1" style="float:left;
background-color:red;
vertical-align: bottom;">
<label> This is my label</label><br>
<input type ="text">
</div>
<div id="div2" style="padding-left:10px;
padding-right:0px;
float:left;
background-color:green;
vertical-align: bottom;">
<label> </label><br>
<button id="btn" >My button</button>
</div>
<div id="div3" style="background-color:yellow;">This is error</div>
</div>
</body>
Use <br style="clear: both;">
<html>
<body>
<div style="width:50%;">
<div id="div1" style="float:left; background-color:red; vertical-align: bottom;">
<label> This is my label</label><br>
<input type ="text">
</div>
<div id="div2" style="padding-left:10px;padding-right:0px;float:left; background-color:green; vertical-align: bottom;">
<label> </label><br>
<button id="btn" >My button</button>
</div>
<br style="clear: both;">
<div id="div3" style="background-color:yellow; float:none" >This is error</div>
</div>
</body>
jsFiddle