So i created a sidenav on one of my page and its working properly there
what i want to do is on another page i want to use that same sidenav.
My side nav code:
<form id="keyword-form" class="side-nav rt-side-nav">
<div>
<center><h5>KEYWORDS</h5></center>
<textarea rows="10" cols="50" id="txtarea" class="keyword-text" placeholder="enter comma seperated values for the products" contenteditable="true">{{keywords}}</textarea>
</div>
<div class="keyword-submit">
<center><button type="submit" class="key-submit btn waves-effect waves-light col m12">SUBMIT</button></center>
</div>
</form>
<a data-activates="keyword-form" class="button-collapse"></a>
<div hidden class="keyword">
</div>
Wrap your navbar code in a template then use that template on each page. See example in the Meteor Todo app tutorial. Or if you are using Iron Router put it in your app body template.
Template example:
<template name="sidenav">
<form id="keyword-form" class="side-nav rt-side-nav">
<div>
<center><h5>KEYWORDS</h5></center>
<textarea rows="10" cols="50" id="txtarea" class="keyword-text" placeholder="enter comma seperated values for the products" contenteditable="true">{{keywords}}</textarea>
</div>
<div class="keyword-submit">
<center><button type="submit" class="key-submit btn waves-effect waves-light col m12">SUBMIT</button></center>
</div>
</form>
<a data-activates="keyword-form" class="button-collapse"></a>
<div hidden class="keyword">
</div>
</template>
Then every time you want to show your sidenav:
{{> sidenav}}
Related
I would like to place Have an account?, Login button, and Link A Link B directly underneath something something something something, Enter Zip Code input field and Enter Zip Code button.
The way I've set up my Bootstrap (version 3.3.7) and HTML, I'd think that it would've appeared underneath but it's actually displaying the complete opposite of what I expect. Instead, it's all the way on the left side as per the picture below.
Why's is carrying out this behavior? If more information is needed please let me know.
picture of what I'm describing
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="col-7">
<form class="pull-right col-12 zipSection">
<h6 class="pull-right">something something something something</h6>
<div class="form-group">
<input type="text" class="form-control" placeholder="Enter Zip Code">
</div>
<button type="submit" class="btn btn-default center-block enterZipCodeButton">Enter Zip Code</button>
</form>
<div class="col-12">
<p class="col-12">Have an account?</p>
<button type="submit" class="loginButton" onclick="document.location = '/'">Login</button>
Link A
Link B
</div>
</div>
</div>
Your form has a class called pull-right (which has been renamed to float-right in Bootstrap 4). What that does is forces the div to the far right. Since this is bootstrap, everything else adapts, which means the div which theoretically should be under, gets forced up to the top row, and to the left (since left-alignment is the default). A solution to that is to use the class of row from the Bootstrap grid system. Every row you want, you make a new div with a class of row. This way, they will now be under each other.
However, the Have an account? would still be on the left. To fix that, give it a class of pull-right.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div class="col-7">
<form class="pull-right col-12 zipSection">
<h6 class="pull-right">something something something something</h6>
<div class="form-group">
<input type="text" class="form-control" placeholder="Enter Zip Code">
</div>
<button type="submit" class="btn btn-default center-block enterZipCodeButton">Enter Zip Code</button>
</form>
</div>
</div>
<div class="row">
<div class="col-12 pull-right">
<p class="col-12">Have an account?</p>
<button type="submit" class="loginButton" onclick="document.location = '/'">Login</button>
Link A
Link B
</div>
</div>
</div>
I am building a Razor Pages web app and I added the CRUD features to it. On my Create page, there's a form to create entries which uses input tags. One of those fields is for comments so obviously it needs to be larger. So I added a width and height styles to it. However, the text only appears in the middle of the comment field and when the text reaches the end of the field, it doesn't wrap.
Create.cshtml.cs
#page
#model HSLogApp.Pages.HSLogs.CreateModel
#{
ViewData["Title"] = "Create";
}
<h2>Create</h2>
<h4>Log</h4>
<hr />
<div class="row">
<div class="col-md-4">
<form method="post">
....
....
<div class="form-group">
<label asp-for="Log.Comment" class="control-label"></label>
<input asp-for="Log.Comment" class="form-control" style="height:250px; width:500px; vertical-align:top; white-space: pre-wrap;"/>
<span asp-validation-for="Log.Comment" class="text-danger"></span>
</div>
<div class="form-group">
<input type="submit" value="Create" class="btn btn-default" />
</div>
</form>
</div>
</div>
<div>
<a asp-page="Index">Back to List</a>
</div>
#section Scripts {
#{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}
How can I get the cursor to flush to the top and how do I get it to wrap?
For multiline input use a textarea element.
There is an ASP.NET Core Tag Helper for it. The usage will be mostly the same as an input. Here is your example with a textarea.
<div class="form-group">
<label asp-for="Log.Comment" class="control-label"></label>
<textarea asp-for="Log.Comment" rows="3" class="form-control"></textarea>
<span asp-validation-for="Log.Comment" class="text-danger"></span>
</div>
Now the use of the rows attributes in the textarea to specify the number of rows of text.
I want to make full with the button on right side.
I added btn-block on button element but it's dont working i don't know why.
Jsfiddle Here
<div class="fieldset">
<div class="field qty">
<label class="label" for="qty"><span>Qlty</span></label>
<div class="control control-qty-cart">
<span class="quantity-controls quantity-minus"></span>
<input type="number" name="qty" id="qty" maxlength="12" value="1" title="Aantal" class="qty-default input-text qty" data-validate="{"required-number":true,"validate-item-quantity":{"minAllowed":1}}">
</div>
</div>
<div class="actions">
<button type="submit" title="In Winkelwagen" class="action primary tocart btn-block" id="product-addtocart-button">
<span>In Winkelwagen</span>
</button>
</div>
</div>
Not sure where you took that bootstrap code from. I tried with this links and it worked. Also better to add it as an external library rather than to put the code there directly.
For bootstrap 3 (css): https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
For bootstrap 3 (js): https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js
For bootstrap 4 get the cdn from this link: https://getbootstrap.com
I recently ran into some problems when trying to use the Materialize modal and dropdown features with Blaze, specifically when there are multiple instances of each.
I have this template called cadcall:
<template name="cadcall">
<tr>
<td class="truncate">{{id}}</td>
<td>FRI</td>
<td>{{time}}</td>
<td>{{type}}</td>
<td>{{location}}</td>
<td>{{notes}}</td>
<td>
<i class="material-icons call-dropdown-button" data-activates="cadcallactions">more_vert</i>
</td>
</tr>
<div id="call-details-modal" class="modal">
<div class="modal-content">
<h4>Call Details</h4>
<div class="row">
<form class="new-call col s12">
<div class="row">
<div class="input-field col s6">
<input id="call-id" type="text" class="validate" disabled>
<label for="call-id">ID</label>
</div>
<div class="input-field col s6">
<input id="call-time" type="text" class="validate" disabled>
<label for="call-time">Time</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input id="call-location" type="text" autocomplete="off">
<label for="call-location">Location</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<textarea id="call-notes" class="materialize-textarea" length="100000" autocomplete="off"></textarea>
<label for="call-notes">Notes</label>
</div>
</div>
<div class="modal-footer">
<button type="submit" href="#!" class="modal-action modal-close waves-effect waves-grey btn-flat center">Submit</button>
</div>
</form>
</div>
</div>
</div>
<ul id='cadcallactions' class='dropdown-content'>
<li><a class="callupdate" href=""><i class="material-icons">update</i>Update</a></li>
<li><a class="callresolve" href=""><i class="material-icons">check</i>Resolve</a></li>
</ul>
</template>
Here is the cadcall events:
Template.cadcall.events({
'click .callresolve'(e) {
Calls.remove(this._id);
},
});
Here is the cadcall onRendered:
Template.cadcall.onRendered(function() {
$(document).ready(function () {
$('.call-details').leanModal();
});
$('.call-dropdown-button').dropdown({
inDuration: 300,
outDuration: 225,
constrainWidth: false, // Does not change width of dropdown to that of the activator
hover: false, // Activate on hover
gutter: 0, // Spacing from edge
belowOrigin: true, // Displays dropdown below the button
alignment: 'right', // Displays dropdown with edge aligned to the left of button
stopPropagation: false // Stops event propagation
});
});
Essentially, for each call there is in the Mongo database, I iterate each call entry. However, if there are multiple calls, the modal doesn't function correctly. If I try to close the modal (by clicking the class callupdate after opening it, the gray area behind it stays.
In addition to the modal not working correctly, the dropdown menu also acts funky, specifically when I try to delete a field (by clicking the class callresolve). Whenever I try to delete a call entry it works, but thereafter the dropdown menus on the other call entries stop working altogether. Furthermore, for some reason when I add an entry then delete it, an error pops up in the Chrome console:
blaze.js:650 Uncaught Error: Must be attached
at Blaze._DOMRange.DOMRange.containsElement (blaze.js:650)
at Blaze._DOMRange.<anonymous> (blaze.js:2612)
at HTMLAnchorElement.<anonymous> (blaze.js:863)
at HTMLTableSectionElement.dispatch (jquery.js:4723)
at HTMLTableSectionElement.elemData.handle (jquery.js:4391)
Presumably, since these problems only occur when I have multiple call entries, I think the HTML may be conflicting with each iteration of the call entry. Is there a way to remedy this issue?
I have a form with some inputs and I can't figure out how to put these inputs inline with Twitter Bootstrap. I am new to Twitter Bootstrap.
Here is my code:
<div class="control-group">
<div class="controls">
<div class="input-prepend">
<span class="add-on"> <i class="icon-lock"></i>
</span>
<input path="q1" class='input-xlarge' type='text' value='Name of my father'readonly="yes"/>
</div>
</div>
</div>
<div class="control-group">
<div class="controls">
<div class="input-prepend">
<span class="add-on"> <i class="icon-lock"></i>
</span>
<input path="r1" class='input-xlarge' type='text' value='' autofocus="autofocus" />
</div>
</div>
</div>
Here is a jsFiddle with my code to well understand my problem: http://jsfiddle.net/XHPMH/1/
Using inline-style attribute I have the result I'm expecting, but I would like to use as many as possible Twitter Bootstrap : http://jsfiddle.net/5Z3rP/
Edit: I'm performing client side validation with jQuery-validation, so I think I have to keep control-group css class
Look at the "Inline Form" section here: http://getbootstrap.com/2.3.2/base-css.html#forms
<form:form class="form-horizontal form-validate form-inline" method="POST" acceptCharset="UTF-8">
http://jsfiddle.net/5Z3rP/1/
I also removed the ".controls" div, which was unnecessary and preventing the inline style.