How do I add attributes to the buttons in a Quill-base WYSIWIG editor?
This is my code
<div class="quill-wrapper">
<div id="toolbar" class="ql-toolbar-container toolbar">
<div class="ql-format-group">
<span class="ql-bold ql-format-button"></span>
<span class="ql-italic ql-format-button"></span>
<span class="ql-strike ql-format-button"></span>
<span class="ql-underline ql-format-button"></span>
<span class="ql-link ql-format-button"></span>
<span class="ql-format-button ql-color"></span>
<span class="ql-format-separator"></span>
<select class="ql-font">
<option value="Times New Roman">Times New Roman</option>
</select>
<select class="ql-size">
<option value="small">Small</option>
<option value="normal">Normal</option>
<option value="large">Large</option>
</select>
</div>
</div>
<input type="hidden" id="postDesc" name="postDesc" value="pavitar dua">
<!-- Create the editor container -->
<div style="height:300px" class="form-control" id="editor" name="editor">
<div>Hello World!</div>
<div>Some initial <b>bold</b> text</div>
<div>
<br>
</div>
</div>
<div class="counter" id="counter"></div>
</div>
Now if I were to add colours to <span class="ql-format-button ql-color"></span>, I don't know how to do it.
Colors in Quill is a selectable format so you would add it exactly the same way you added font and size. Ex.
<select class="ql-color">
<option value="red">Red</option>
<option value="#00f">Blue</option>
<option value="rgb(255,255,0)">Yellow</option>
</select>
More details here: http://quilljs.com/docs/modules/toolbar/
Related
I am trying to create a search form within a page using Bootstrap 5 and the following code:
<div class="row mb-5">
<div class="col-lg-10 offset-lg-1">
<form class="form-inline" role="form">
<label for="field">Find all where...</label>
<select id="field" class="form-select">
<option value="company_name" selected>Company Name</option>
<option value="federal_ein" selected>EIN</option>
<option value="state">State</option>
<option value="city">City</option>
</select>
<label for="term">includes...</label>
<input type="text" class="form-control" id="term" placeholder="Enter full/partial term" name="term">
<button type="submit" class="btn btn-primary btn-lg">Search</button>
</form>
</div>
</div>
I want the form to be inline, with the text box stretched to fill unused space in the row. I can't figure out how to achieve this. Any help on it? Thanks!
This code seems to work well. Thanks!
<form id="frmSearch" name="frmSearch" role="form" class="was-validated">
<div class="row mb-4">
<div class="col-lg-2 offset-lg-1 text-end">Find companies where...</div>
<div class="col-lg-2 text-start">
<select ID="ddlType" Class="form-control rounded" required>
<option value="" selected>Search by...</option>
<option value="company_name">Company Name</option>
<option value="city">City</option>
<option value="federal_ein">EIN</option>
<option value="state">State</option>
</select>
</div>
<div class="col-lg-1 text-center">contains...</div>
<div class="col-lg-4 d-flex">
<input type="text" ID="tbTerm" class="form-control rounded text-black" required />
</div>
<div class="col-lg-1 mx-auto">
<button type="submit" ID="btnSearch" class="btn-success btn text-white">Search</button>
</div>
</div>
</form>
I'm facing a problem with bootstrap 4 form validation feedback error. I'd like to have the label to change color instead of the invalid-feedback div to appear under the input field. Please how can I achieve my goal? Below there's the form I'm using and boostrap version is 4.5.
Thanks a lot for any help you can give me.
enter code here
<div class="row">
<div class="col-md-12"><!--Grid column-->
<div class="myeditform">
<form action="page.asp" id="add-form" class="add-form" method="post" novalidate>
<input type="hidden" id="action" name="action" value="addnew">
<div class="row">
<div class="col-md-8">
<div class="md-form mb-0">
<label for="ev_title">Title *</label>
<input type="text" class="form-control" name="ev_title" id="ev_title" placeholder="Title ..." required="required">
<div class="invalid-feedback">This field is required</div>
</div>
</div>
<div class="col-md-4">
<div class="md-form mb-0">
<label for="ev_is_active">Status</label>
<select class="browser-default form-control" id="ev_is_active" name="ev_is_active">
<option value="true">ON LINE</option>
<option value="false">OFF LINE</option>
</select>
</div>
</div>
</div><!-- row -->
<div class="row">
<div class="col-md-6">
<div class="md-form mb-0">
<label for="ev_at_place">Location *</label>
<input type="text" class="form-control" name="ev_at_place" id="ev_at_place" placeholder="Location ..." required="required">
<div class="invalid-feedback">This field is required</div>
</div>
</div>
<div class="col-md-3">
<div class="md-form mb-0">
<label for="ev_dance_type">Evening of *</label>
<select class="browser-default form-control" id="ev_dance_type" name="ev_dance_type" required="required">
<option value="">Seleziona...</option>
<option value="op1">op1</option>
<option value="op2">op2</option>
<option value="op3">op3</option>
<option value="op4">op4</option>
<option value="op5">op5</option>
<option value="op6">op6</option>
<option value="other">other</option>
</select>
<div class="invalid-feedback">This field is required</div>
</div>
</div>
<div class="col-md-3">
<div class="md-form mb-0">
<label for="ev_cycle">Frequency *</label>
<select class="browser-default form-control" id="ev_cycle" name="ev_cycle" required="required">
<option value="">Seleziona...</option>
<option value="7">7</option>
<option value="14">14</option>
<option value="21">21</option>
<option value="28">28</option>
<option value="0">One time off</option>
</select>
<div class="invalid-feedback">This field is required</div>
</div>
</div>
</div><!-- row -->
<div class="row">
<div class="col-md-12">
<div class="md-form mb-0">
<label for="ev_description">Description *</label>
<textarea class="form-control" name="ev_description" id="ev_description" rows="10" placeholder="Description required ..." required="required"></textarea>
<script>
CKEDITOR.replace( 'ev_description');
</script>
<div class="invalid-feedback">This field is required</div>
</div>
</div>
</div><!-- row -->
<div class="row">
<div class="col-md-12">
<div class="md-form mb-0">
<label for="ev_notes">Note</label>
<input type="text" class="form-control" name="ev_notes" id="ev_notes" placeholder="Es. ...">
</div>
</div>
</div><!-- row -->
<div class="row">
<div class="col-md-12">
<div class="md-form mb-0">
<button type="button" class="btn btn-primary mybtn float-left" onclick="history.go(-1)">Back</button>
<button type="reset" class="btn btn-warning mybtn float-left">Reset</button>
<button type="submit" class="btn btn-primary float-right" >Add</button>
</div>
</div>
</div><!-- row -->
</form>
</div> <!--myedit form-->
</div><!--Grid column-->
So I want to be able to load the 'Choose' dropdown option, but disable it as soon as a change is made on the drop-down.
I've attempted adding a disabled attribute tag on the selection, but it loads on 'Alabama' and I don't want that.
How would I be able to tackle this?
<div class="row mt-3">
<div class="col-md">
<label for="resident">I am a resident of:</label>
</div>
</div>
Adding hidden and selected to the first option should do the trick.
<div class="row mt-3">
<div class="col-md">
<label for="resident">I am a resident of:</label>
<select class="custom-select" id="resident" required>
<option hidden selected value="">Choose...</option>
<option>Alabama</option>
<option>Alaska</option>
<option>Colorado</option>
<option>New York</option>
<option>South Dakota</option>
</select>
<div class="invalid-feedback">
Select state of residence.
</div>
</div>
</div>
If you want to still see the "Choose..." after the user has made a selection, replace hidden with disabled.
Why don't you disable the first option? (no javascript is needed and the result is like what you want to achieve I think):
<div class="row mt-3">
<div class="col-md">
<label for="resident">I am a resident of:</label>
<select class="custom-select" id="resident" required>
<option value="" disabled>Choose...</option>
<?php foreach (Vars::states() as $abbr => $state): ?>
<option value="<?= $abbr; ?>"><?= $state; ?></option>
<?php endforeach; ?>
</select>
<div class="invalid-feedback">
Select state of residence.
</div>
</div>
</div>
And a demo code snippet of what it looks like:
<select required>
<option value="" disabled selected>Select your option</option>
<option value="1">Alabama</option>
<option value="2">Alaska</option>
<option value="3">...</option>
</select>
I have a bootstrap form and want to add a glyphicon before the SELECT fields.
However, it makes a breakline somewhy.
<form role="form" id="registration-form" onsubmit="return onSubmitContinueButton()">
<div class="row">
<div class="form-group col-md-6">
<label class="sr-only" for="xxx"></label>
<span class="glyphicon glyphicon-name"></span> <!-- <-- there is a breakline after this.... why?-->
<select class="form-control" name="aaa">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div class="form-group col-md-6">
<label class="sr-only" for="xxx"></label>
<span class="glyphicon glyphicon-name"></span> <!-- <-- there is a breakline after this.... why?-->
<select class="form-control" name="aaa">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
</div>
</form>
I want the glyphicon to be just near the select field and not above it.
How can I fix it?
Thanks
If you want to add icons in front of the select field make it an input group like this
<div class="input-group">
<span class="input-group-addon" id="basic-addon1"><span class="glyphicon glyphicon-plus"></span></span>
<select class="form-control" name="aaa">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
For more information look right here: Bootstrap input groups
I am trying to build a simple horizontal search & filtering form using Twitter Bootstrap as can be seen in the image attached.
I am trying to build it so it adapts to different screen sizes as shown in the image. The results that I receive from my code aren't according my expectations.
<div id="search_block" class="panel-body">
<form role="form" class="form-horizontal" method="post" action="">
<div class="form-group">
<label class="col-xs-2 col-sm-2 col-md-1 control-label" for="v_search">Search:</label>
<div class="col-xs-8 col-sm-8 col-md-4">
<input type="text" placeholder="Enter Search Keywords" value="" name="v_search" id="v_search" class="form-control">
</div>
<div class="button-group col-xs-8 col-sm-8 col-md-2">
<button class="btn btn-primary" value="search" name="search" type="submit">Search</button>
<button class="btn btn-default" value="reset" name="reset" type="reset">Reset</button>
</div>
</div>
<div class="form-group">
<label class="col-xs-2 col-sm-2 col-md-1 control-label" for="filters">Filters:</label>
<div class="col-xs-8 col-sm-8 col-md-2" id="filters">
<select class="form-control" name="section_id">
<option value="all">All Sections</option>
<option value="all">Test</option>
</select>
</div>
<div class="col-xs-8 col-sm-8 col-md-2">
<select class="form-control" name="category_id">
<option value="all">All Categories</option>
<option value="71">Test</option>
</select>
</div>
</div>
</form>
My code can be found at: http://jsfiddle.net/NB89d/
You can use the col-*-offset classes to achieve what you want.
Demo: http://www.bootply.com/126439