I am having issues styling the buttons in the Primefaces text editor. I was able to find the documentation here: link to quill. Unfortunately, I can' figure out how to do the styling for a simple dark mode. Every icon and text in the menubar should be white, the background should be dark. So far I've tried inline style, assigning a class. Nothing seems to lead to success. Even primetek itself doesn't seem to be very successful with that.
Minimal reproducible example:
<p:textEditor widgetVar="editor1" value="#{editorView.text}" height="300" />
<p:textEditor
widgetVar="editor2"
value="#{editorView.text2}"
height="300"
placeholder="Enter your content"
>
<f:facet name="toolbar">
<span class="ql-formats">
<select class="ql-font" />
</span>
<span class="ql-formats">
<button class="ql-bold" />
<button class="ql-italic" />
<button class="ql-underline" />
</span>
<span class="ql-formats">
<select class="ql-color" />
<select class="ql-background" />
</span>
<span class="ql-formats">
<button class="ql-script" value="sub" />
<button class="ql-script" value="super" />
</span>
<span class="ql-formats">
<button class="ql-code-block" />
</span>
<span class="ql-formats">
<button class="ql-list" value="bullet" />
</span>
<span class="ql-formats">
<button class="ql-link" />
</span>
</f:facet>
</p:textEditor>
Simply add this code to a JSF-page and try to style the top toolbar with bold, italic, etc.
Related
am using angular 10 and included ngx quill editor to show the rich text editor.
when we save the html content into database, it saves with html class type like below:
<li class="ql-indent-2">lbmlkfdnblblfdsb</li>
and when we send an email through our app, we send the above content in the email body but the css class won't available.so it is not displaying the style.
How can we achieve this in Angular ?
I tried below code and didnt get any luck :
https://github.com/quilljs/quill/issues/1451
<quill-editor #body name="body" id="body" [(ngModel)]="studyNotification.messageText" (onSelectionChanged)="editorSelectionChanged($event)"
(onEditorCreated)="editorCreated($event)" [style]="{height: '250px', background: 'white'}">
<div id="toolbar-container" quill-editor-toolbar>
<!-- Text Size -->
<span class="ql-formats">
<select class="ql-font"></select>
<select class="ql-size"></select>
</span>
<!-- Text Formatting -->
<span class="ql-formats">
<button class="ql-bold"></button>
<button class="ql-italic"></button>
<button class="ql-underline"></button>
<button class="ql-strike"></button>
</span>
<span class="ql-formats">
<select class="ql-color"></select>
<select class="ql-background"></select>
</span>
<!-- Subscript/superscript -->
<span class="ql-formats">
<button class="ql-script" value="sub"></button>
<button class="ql-script" value="super"></button>
</span>
<!-- Text Block format -->
<!-- Header Sizes -->
<span class="ql-formats">
<button class="ql-header" value="1"></button>
<button class="ql-header" value="2"></button>
<!-- <button class="ql-blockquote"></button>
<button class="ql-code-block"></button> -->
</span>
<!-- Ordered List / Bullets -->
<!-- Indenting -->
<span class="ql-formats">
<button class="ql-list" value="ordered"></button>
<!-- <button class="ql-list" value="bullet"></button> -->
<button class="ql-indent" value="-1"></button>
<button class="ql-indent" value="+1"></button>
</span>
<span class="ql-formats">
<!-- <button class="ql-direction" value="rtl"></button> -->
<select class="ql-align"></select>
</span>
<span class="ql-formats">
<button class="ql-link"></button>
<button class="ql-image"></button>
<button class="ql-video"></button>
<!-- <button class="ql-formula"></button> -->
</span>
<!-- <span class="ql-formats">
<button class="ql-clean"></button>
</span> -->
</div>
</quill-editor>
I'm having hard time reducing the input width and making it responsive. Right now, my form looks like this:
As you can see the inputs are having full width. I tried giving it a style of width:33% and textAlign: "center" to the parent but it didn't work. I just want the form to be centered and responsive.
Here's the code.
<div className="field">
<p className="control has-icons-left has-icons-right">
<input
onChange={this.handleChange}
name="username"
value={this.state.username}
className="input is-rounded"
type="text"
placeholder="Username"
/>
<span className="icon is-small is-left">
<i className="fas fa-user"></i>
</span>
<span className="icon is-small is-right">
<i className="fas fa-check"></i>
</span>
</p>
</div>
You are supposed to wrap your input fields in column that is width controlled as below;
<div class="column is-3">
<!-- your code here -->
</div>
I want to use the JQueryUI spinner widget on inputs that are loaded using the udash repeat method. I have tried the following approach:
val integers = SeqProperty(Seq[Int](5, 7))
val rootNode =
div(
button(onclick:= add, "Add"),
repeat(integers) { p =>
val in = input(value := p.get, cls := "my-spinner").render
$(in).spinner()
in
}
)
def add = { () =>
integers.append(Random.nextInt(10))
}
def main(args: Array[String]): Unit = {
dom.document.getElementById("root").appendChild(rootNode.render)
// $(".my-spinner").spinner()
}
But this does not produce the complete jquery-ui dom that is required. When I inspect my dom tree all I get is this:
<div>
<button>Add</button>
<input value="5" class="my-spinner ui-spinner-input" aria-valuenow="5" autocomplete="off" role="spinbutton" />
<input value="7" class="my-spinner ui-spinner-input" aria-valuenow="7" autocomplete="off" role="spinbutton" />
</div>
Whereas if I comment out the last line, to apply the spinner after the dom is loaded, I get the complete xml:
<div>
<button>Add</button>
<span class="ui-spinner ui-corner-all ui-widget ui-widget-content" style="height: 21px;">
<input value="5" class="my-spinner ui-spinner-input" aria-valuenow="5" autocomplete="off" role="spinbutton" />
<a tabindex="-1" aria-hidden="true" class="ui-button ui-widget ui-spinner-button ui-spinner-up ui-corner-tr ui-button-icon-only" role="button">
<span class="ui-button-icon ui-icon ui-icon-triangle-1-n" />
<span class="ui-button-icon-space" />
</a>
<a tabindex="-1" aria-hidden="true" class="ui-button ui-widget ui-spinner-button ui-spinner-down ui-corner-br ui-button-icon-only" role="button">
<span class="ui-button-icon ui-icon ui-icon-triangle-1-s" />
<span class="ui-button-icon-space" />
</a>
</span>
<span class="ui-spinner ui-corner-all ui-widget ui-widget-content" style="height: 21px;">
<input value="7" class="my-spinner ui-spinner-input" aria-valuenow="7" autocomplete="off" role="spinbutton" />
<a tabindex="-1" aria-hidden="true" class="ui-button ui-widget ui-spinner-button ui-spinner-up ui-corner-tr ui-button-icon-only" role="button">
<span class="ui-button-icon ui-icon ui-icon-triangle-1-n" />
<span class="ui-button-icon-space" />
</a>
<a tabindex="-1" aria-hidden="true" class="ui-button ui-widget ui-spinner-button ui-spinner-down ui-corner-br ui-button-icon-only" role="button">
<span class="ui-button-icon ui-icon ui-icon-triangle-1-s" />
<span class="ui-button-icon-space" />
</a>
</span>
</div>
But of course this approach is not sufficient as I need to be able to load my inputs dynamically. Is there a way I can apply the spinner widget dynamically?
I was able to resolve the issue by wrapping my input in a div element and appending a script element after the input. From within this script, I used a callback mechanism to allow code to be run every time a new input gets loaded. The callback mechanism wasn't totally straight forward as I can only call javascript code when defining a script tag. So I added a non-native JS type to take care of this. I generalised the whole approach using a component. I have outlined this solution on ScalaFiddle
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'm building controlgroups out of Jquery Mobile inputs like so:
<div data-role="controlgroup">
<span class="ui-li ui-li-divider ui-bar-a ui-corner-top"><span class="ui-divider-text">Divider</span></span>
<input type="button" data-icon="arrow-r" data-iconpos="right" value="text" />
....
</div>
While this works nicely, I'm often ending up with the input elements also getting corners. I tried overriding JQM by adding data-corners="false" to the input
<input type="button" data-icon="arrow-r" data-corners="false" data-iconpos="right" value="text" />
but since this goes on the div.ui-btn wrapping the input element, it doesn't work.
Question:
Is there a way to tell JQM to not put corner on an element? I can't add classes to the input element (like ui-corner-I-don't-need, because corners will be on wrappring ui-btn and ui-btn-inner, which I can only access by Jquery (don't want).
Any other ideas?
Thanks for inputs!
Try this with your code just give id to div
<script type="text/javascript">
$(document).ready(function(){
$('#buttongp > div.ui-controlgroup-controls > div:first').removeClass("ui-corner-top");
});
</script>
<div data-role="controlgroup" data-inset="true" id="buttongp">
<span id="buttonspangp" data-role="list-divider" class="ui-li ui-li-divider ui-bar-a ui-corner-top"><span class="ui-divider-text">Divider</span></span>
<input type="button" data-icon="arrow-r" data-corners="false" data-iconpos="right" value="text" />
<input type="button" data-icon="arrow-r" data-corners="false" data-iconpos="right" value="text" />
<input type="button" data-icon="arrow-r" data-corners="false" data-iconpos="right" value="text" />
</div>