I am trying to format a page where I have an image, then NEXT to it, a heading... and then under the heading, I want some descriptive text.
I am trying this:
<div class="panel">
<div class="panel-heading">
<div class="row">
<div class="col-xl-2">
<img src="~/images/user_error.png" />
</div>
<div class="col-xl-10">
<h1>#Model.Heading</h1>
</div>
</div>
</div>
<div class="panel-body">
<div class="row">
Hello
</div>
</div>
</div>
But the image stays on it's own row. How can I get the heading NEXT to the image?
<div class="col-xs-2">
Here is a jsfiddle for people to see the difference: http://jsfiddle.net/692UC/
Related
What I'm trying to do is to save a custom form and after that be able to open it from the default page in for of a button, I have a form to create the custom forms, meaning, that in this page you are meant create a new .aspx page to be accessed through the default page, and i don't know how to create nor save it and I don't also know how to modify or update the default page to be able to access the custom .aspx pages saved.
This is what is meant to be on each created .aspx file (This is an example, this is generated on one of these pages)
<div id="MainContent_div1" class="panel">
<div id="Section 1" class="panel panel-warning">
<div class="panel-heading">Example</div>
<div class="panel-body">
<h3>Example</h3>
<p>Sample description</p>
<div>
<img src="http://www.kiplinger.com/kipimages/pages/18048.jpg" alt="" height="600" width="900">
</div>
<hr>
<div class="row">
<div class="col-sm-3">
<a class="btn btn-default" href="#Section Test1">Test1</a>
</div>
<div class="col-sm-3">
<a class="btn btn-default" href="#Section Test2">Test2</a>
</div>
<div class="col-sm-3">
<a class="btn btn-default" href="#Section Test3">Test3</a>
</div>
</div>
</div>
</div>
<br>
<div id="Section Test1" class="panel panel-warning">
<div class="panel-heading"> Sample Section 1</div>
<div class="panel-body">
<h3>Sample Section 1</h3>
<p>Sample description 2</p>
<div>
<img src="http://www.kiplinger.com/kipimages/pages/18048.jpg" alt="" height="600" width="900">
</div>
<hr>
<div class="row">
<div class="col-sm-3">
<a class="btn btn-default" href="#Section Sample1">Sample1</a>
</div>
<div class="col-sm-3">
<a class="btn btn-default" href="#Section Sample2">Sample2</a>
</div>
<div class="col-sm-3">
<a class="btn btn-default" href="#Section Sample3">Sample3</a>
</div>
</div>
</div>
</div>
</div>
Any help, edits or suggestions will be much appreciated.
I'm trying to display a grid of cards with information retrieved by the backend, but it seems that the bootstrap classes are not working as intended. The layout.cshtml view appears to display bootstrap properly, and other views I have do too. Don't know if its just something with the .card and row/col classes or is a larger issue.
<div class="row">
#foreach (var product in Model)
{
<div class="col-4">
<div class="card" style="width: 18rem;">
<img class="card-img-top" style="width: 18rem;" src="#product.Url" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">#product.Title</h5>
<p class="card-text">#product.Price</p>
</div>
</div>
</div>
}
</div>
What the page looks like:
https://imgur.com/a/8yEDxee
I've been trying to get menu item from menu-id="2" to put some JavaScript in each item in it, but unfortunately it doesn't work.
I would appreciate some help.
<section id="footer">
<div class="container">
<div class="row text-center text-xs-center text-sm-left text-mdf left">
<div class="col-xs-12 col-sm-4 col-md-4">
<h5>Information</h5>
<vc:menu menu-id="2"></vc:menu>
</div>
</div>
</div>
</section>
The width of the Select tag helper in the following veiw remains fixed no matter what value I change in its style attribute style="width:10000px;". Whether it's set to 10px or 10000px the width remains the same. On the other hand, in the same example below, the input tag ProjectNumber along with the Instructions message (correctly) occupies the entire width of the computer screen. Note 1: It's a multi select dropdown (but I think that should not mater). 2. I'm using VS2015-Update3 that comes with built-in Bootstrap functionality:
<div class="row">
<div class="col-sm-3">
#await Component.InvokeAsync("MainLeftMenu")
</div>
<div class="col-md-9">
<form id="target" asp-controller="myTest" asp-action="myAction" method="post" class="form-horizontal">
<div class="form-group">
<label asp-for="SelectedIDs" class="col-md-2 control-label"></label>
<div class="col-md-10">
<select asp-for="SelectedIDs" asp-items="Model.myList" style="width:10000px;"></select>
</div>
</div>
<div class="form-group">
<label asp-for="ProjectNumber" class="col-md-2 control-label"></label>
<div class="col-md-2">
<input asp-for="ProjectNumber" class="form-control" />
<span asp-validation-for="ProjectNumber" class="text-danger"></span>
</div>
<div class="col-md-5">Instructions: Add number in the format such as: ABC-123-xyz-000</div>
</div>
<button type="submit" class="btn btn-default">Submit Test</button>
</form>
</div>
</div>
In bootstrap for the select in form you can add class="form-control" like input type text.
For reference: http://getbootstrap.com/css/#forms
Issue resolved by adding style="min-width:700px;overflow:auto;" to the select tag helper. You can change 700px to whatever width you need.
I have a simple form that posts to a different controller action, on the my development machine it works fine, however after publishing the app to Microsoft azure app service it blow up with the following error
502 - Web server received an invalid response while acting as a gateway or proxy server.
<form action="/Contractors/MyTasks/EditTaskCompletionTaskSheet/" enctype="multipart/form-data" method="POST" class="form-horizontal">
<div class="modal-body">
<div class="panel panel-default">
<div class="form-group">
<label class="col-sm-2 control-label" for="ContractorNotes">Notes</label>
<div class="col-sm-8">
<textarea id="ContractorNotes" name="ContractorNotes" class="form-control" style="width: 100%; height: 130px;"></textarea>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="ContractorAttachments">Attachments</label>
<div class="col-md-8">
<input type="file" id="ContractorAttachments" name="ContractorAttachments" multiple="multiple"
accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel, .pdf, .doc, .docx" />
</div>
</div>
</div>
</div>
<div class="modal-footer">
<div class="row">
<div class="col-sm-4 text-left">
<button data-dismiss="modal" class="rounded-button" type="button">Close</button>
</div>
<div class="col-sm-8 text-left sm-text-right">
<input type="submit" id="EditfinishTaskButton value="SaveChanges" class="rounded-button rounded-green" />
</div>
</div>
</div>
</form>
Any thoughts?