I try to put a form upload imgage for user img example
But when I put the form its turn to be like this [img]. Code:
<dl class="row">
<dt class="col-sm-4">Profile Detail:</dt>
<md-card-content>
<div class="user" >
<img src="https://lh3.googleusercontent.com/-W2XryVdi-lA/U6tSAh3SsbI/AAAAAAAAFGY/ZHJiUEcR_Zs/w480-h480/avatar%2Bmaterial%2Bdesign.png" alt="user avatar" class="user-avatar" />
<md-button class="md-icon-button user-avatar-edit" ng-click="browserAvatar()">
<md-icon>photo_camera</md-icon>
</md-button>
</div>
</md-card-content>
<dd class="col-sm-8">
<dl class="row">
<dt class="col-sm-6">@Html.DisplayNameFor(m => Model.profile.UserName)</dt>
<dd class="col-sm-6">@Html.DisplayFor(m => Model.profile.UserName)</dd>
</dl>
<dl class="row">
<dt class="col-sm-6">@Html.DisplayNameFor(m => Model.profile.UserEmail)</dt>
<dd class="col-sm-6">@Html.DisplayFor(m => Model.profile.UserEmail)</dd>
</dl>
<dl class="row">
<dt class="col-sm-6">@Html.DisplayNameFor(m => Model.profile.PhoneNumber)</dt>
<dd class="col-sm-6">@Html.DisplayFor(m => Model.profile.PhoneNumber)</dd>
</dl>
<dl class="row">
<dt class="col-sm-6">@Html.DisplayNameFor(m => Model.profile.HomeAdress)</dt>
<dd class="col-sm-6">@Html.DisplayFor(m => Model.profile.HomeAdress)</dd>
</dl>
<dl class="row">
<dt class="col-sm-6">@Html.DisplayNameFor(m => Model.profile.BirthDate)</dt>
<dd class="col-sm-6">@Html.DisplayFor(m => Model.profile.BirthDate)</dd>
</dl>
<a asp-action="EditProfile" class="btn btn-primary btn-sm">Edit</a>
</dd>
</dl>
Is there anyway the place to upload images vertically like is this space :
Try this way
<dl class="row">
<dt class="col-sm-4">
Profile Detail:
<md-card-content>
<div class="user text-center">
<img src="https://lh3.googleusercontent.com/-W2XryVdi-lA/U6tSAh3SsbI/AAAAAAAAFGY/ZHJiUEcR_Zs/w480-h480/avatar%2Bmaterial%2Bdesign.png" alt="user avatar" class="user-avatar" />
<md-button class="md-icon-button user-avatar-edit" ng-click="browserAvatar()">
<md-icon class="text-center">photo_camera</md-icon>
</md-button>
</div>
</md-card-content>
</dt>
<dd class="col-sm-8">
<dl class="row">
<dt class="col-sm-6">@Html.DisplayNameFor(m => Model.profile.UserName)</dt>
<dd class="col-sm-6">@Html.DisplayFor(m => Model.profile.UserName)</dd>
</dl>
<dl class="row">
<dt class="col-sm-6">@Html.DisplayNameFor(m => Model.profile.UserEmail)</dt>
<dd class="col-sm-6">@Html.DisplayFor(m => Model.profile.UserEmail)</dd>
</dl>
<dl class="row">
<dt class="col-sm-6">@Html.DisplayNameFor(m => Model.profile.PhoneNumber)</dt>
<dd class="col-sm-6">@Html.DisplayFor(m => Model.profile.PhoneNumber)</dd>
</dl>
<dl class="row">
<dt class="col-sm-6">@Html.DisplayNameFor(m => Model.profile.HomeAdress)</dt>
<dd class="col-sm-6">@Html.DisplayFor(m => Model.profile.HomeAdress)</dd>
</dl>
<dl class="row">
<dt class="col-sm-6">@Html.DisplayNameFor(m => Model.profile.BirthDate)</dt>
<dd class="col-sm-6">@Html.DisplayFor(m => Model.profile.BirthDate)</dd>
</dl>
<a asp-action="EditProfile" class="btn btn-primary btn-sm">Edit</a>
</dd>
Adjust other css as per requirement