I am following this example of using a material select field: https://material.angular.io/components/select/overview
I have this list in my ts file:
accessTypes: string[] = [
'New Employee', 'Rehire', 'New Provider', 'New Resident/Fellow', 'Transfer/Job Title Change',
'New Contractor/Vendor', 'New Student/Intern', 'Change to existing user'
];
I'm able to make a simple drop down list and get the value quite easily:
<select class="md-col-6 numberEight" [(ngModel)]="model.accessType">
<option *ngFor="let item of accessTypes" [value]="item">{{item}}</option>
</select>
But when I try to use the mat-select the css from the example is not applied and the list options appear all the way at the bottom of the screen:
<div class="question">
<div class="row">
<h5>8. Type of Access Request</h5><p class="required">*</p>
</div>
<div class="col-md-6">
<mat-form-field appearance="fill">
<mat-label>Access Types</mat-label>
<mat-select [(ngModel)]="model.accessType">
<mat-option *ngFor="let item of accessTypes" [value]="item">
{{item}}
</mat-option>
</mat-select>
</mat-form-field>
</div>
</div>
This is what it looks like:
And then all the way at the bottom of the page the list options appear:
There is no styling at all in my css file that affects anything in the select field. Class question has no styling and required just makes the * red.
Even when I do this in a completely new component with an html file including only:
<mat-form-field appearance="fill">
<mat-label>Access Types</mat-label>
<mat-select [(ngModel)]="this.accessTypes" placeholder="Choose...">
<mat-option *ngFor="let item of accessTypes" [value]="item">
{{item}}
</mat-option>
</mat-select>
</mat-form-field>
It behaves the same.
So why is this happening? Why does the list not appear as it does in the example ?Does the example exclude some styling that is necessary?
I found this similar question: Mat Select appears in the bottom of the page and tried adding #import "~#angular/material/prebuilt-themes/indigo-pink.css"; to the pages css file but this did not fix the problem.
I have
import {MatSelectModule} from '#angular/material/select';
import {BrowserAnimationsModule} from '#angular/platform-browser/animations';
I also am including in package.json:
"#ng-bootstrap/ng-bootstrap": "^9.1.0",
"bootstrap": "^4.5.0",
and in angular.json I include in styles:
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.css",
"src/styles.css"
],
and in scripts:
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/bootstrap/dist/js/bootstrap.js"
]
In my app module. Do I need anything else/are these wrong? Is the bootstrap I already have somehow affecting the style of the select list?
I can't share the entire html page because it makes the question too long, but if you need anything else please let me know.
You code seems to be working properly in my test project, and your imports look correct. You may have something overriding the material select styling, or something is missing in your angular material structure. The use of class="col-md-6" tells me that you are using some sort styling bootstrap framework?
Update:
I spun up a new project specifying .css only, and it looks like I was able to reproduce the issue. It appears that you are indeed missing the material theme structure. I added the #import "~#angular/material/prebuilt-themes/indigo-pink.css"; to the styles.css file and it fixed the problem.
styles.css file:
/* You can add global styles to this file, and also import other style files */
#import "~#angular/material/prebuilt-themes/indigo-pink.css";
html, body { height: 100%; }
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
I am using tiptap-vuetify(https://github.com/iliyaZelenko/tiptap-vuetify) as my wysiwyg edirtor. but I dont want the default styling. Sing it doesn't take class or style as prop how can I style it the way I want(like removing shadows, changing grey color to white etc.)
you need to import customize extension and I search about it
in this package tiptap-vuetify You can only use limited sections in this package such as :
Heading,
Bold,
Italic,
Strike,
Underline,
Code,
CodeBlock,
Paragraph,
BulletList,
OrderedList,
ListItem,
Blockquote,
HardBreak,
HorizontalRule,
History,
Link
this code can help you:
<template>
<div>
<tiptap-vuetify v-model="content" :extensions="extensions" />
</div>
</template>
<script>
import {
// component
TiptapVuetify,
Underline,
Bold,
Italic,
Link,
Paragraph,
BulletList,
ListItem,
History,
} from "tiptap-vuetify";
export default {
components: { TiptapVuetify },
created() {
this.$vuetify.rtl = false;
},
data: () => ({
extensions: [
new Bold(),
new Italic(),
new Underline(),
// new Code(),
// new CodeBlock(),
new Paragraph(),
new BulletList(),
// new OrderedList(),
new ListItem(),
new Link(),
// new Blockquote(),
// new HardBreak(), // Shift + Enter
// new HorizontalRule(),
new History(),
],
content: `
<h1>Most basic use</h1>
<p>
You can use the necessary Extensions.
The corresponding buttons are
<strong>
added automatically
</strong>.
</p>
<pre><code><tiptap-vuetify v-model="content" :extensions="extensions"/></code></pre>
<p></p>
<h2>Icons</h2>
<p>Avaliable icons groups:</p>
<ol>
<li>
<p>Material Design <em>Official</em></p>
</li>
<li>
<p>Font Awesome (FA)</p>
</li>
<li>
<p>Material Design Icons (MDI)</p>
</li>
</ol>
<p></p>
<blockquote>
<p>This package is awesome!</p>
</blockquote>
<p></p>
`,
}),
};
</script>
this link can help you
I'm creating an asp gadget and trying to add tinymce text editor to the text area. But it doesn't appear the editor .So the added code is as follows, Input Fields are showing in the view but doesn't appear the editor
<script src="JavaScripts/jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="JavaScripts/tiny_mce/tiny_mce.js" ></script>
<script type="text/javascript">
// Initialize your tinyMCE Editor with your preferred options
tinyMCE.init({
// General options
mode: "textareas",
theme: "modern",
// Theme options
theme_advanced_buttons1: "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
theme_advanced_buttons2: "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
theme_advanced_buttons3: "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
theme_advanced_buttons4: "insertlayer,moveforward,movebackward,absolute,|,styleprops,spellchecker,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,blockquote,pagebreak,|,insertfile,insertimage",
theme_advanced_toolbar_location: "top",
theme_advanced_toolbar_align: "left",
theme_advanced_statusbar_location: "bottom",
theme_advanced_resizing: true,
// Example content CSS (should be your site CSS)
content_css: "css/example.css",
});
</script>
<div class="form">
<%=Html.Partial("Menu") %><br /><br />
<% Html.BeginGadgetForm("Update"); %>
<label for="message">Title :</label>
<%= Html.TextBox("updatedTitle",Model.Title %>
<label for="message">Message :</label>
<%= Html.TextAreaFor("updatedName",x=>x.Message %>
<input type="hidden" name="id" value="<%= Model.Id %>" />
<input type="submit" value="Update" />
<% Html.EndForm(); %>
</div>
The Text area doesn't apply the tinymce editor
You need to add the tinyMCE class and name to the text field:
TextMode="MultiLine" class="myTextEditor" name="tinymce"
Don't know if you got this working in the end...but I had tons of trouble getting the tinyMCE working. Followed loads of posts to the letter and no joy. In the end I found a post with a simple example that finally worked. No idea what it was about the particular post that was different but do notice you have mode specifying textareas and this example has selector specifying textarea. Just in case it helps you or anyone else who comes across this the question, the below code is working for me:
<div class="textarea mce-tinymce">
<script type="text/javascript">
tinymce.init({
selector: "textarea",
theme: "modern",
plugins: [
"advlist autolink lists link image charmap print preview hr anchor pagebreak",
"searchreplace wordcount visualblocks visualchars code fullscreen",
"insertdatetime media nonbreaking save table contextmenu directionality",
"emoticons template paste textcolor colorpicker textpattern imagetools"
],
toolbar1: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
toolbar2: "print preview media | forecolor backcolor emoticons",
image_advtab: true,
templates: [
{ title: 'Test template 1', content: 'Test 1' },
{ title: 'Test template 2', content: 'Test 2' }
]
});
</script>
#Html.TextAreaFor(model => model.BlogPost)
#Html.ValidationMessageFor(model => model.BlogPost)
</div>
first be sure the java link is correct
<script src="../tiny_mce/tiny_mce.js"></script>
second add new java item and add this code
tinyMCE.init({
// General options
mode: "textareas",
theme: "advanced",
plugins: "safari,pagebreak,style,layer,table,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,inlinepopups",
// Theme options
theme_advanced_buttons1: "newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
theme_advanced_buttons2: "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
theme_advanced_buttons3: "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
theme_advanced_buttons4: "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak",
theme_advanced_toolbar_location: "top",
theme_advanced_toolbar_align: "left",
theme_advanced_statusbar_location: "bottom",
theme_advanced_resizing: true,
// Example word content CSS (should be your site CSS) this one removes paragraph margins
content_css: "css/word.css",
// Drop lists for link/image/media/template dialogs
template_external_list_url: "lists/template_list.js",
external_link_list_url: "lists/link_list.js",
external_image_list_url: "lists/image_list.js",
media_external_list_url: "lists/media_list.js",
// Replace values for the template plugin
template_replace_values: {
username: "me",
staffid: "991234"
}
});
i named this file TMS
<script src="../tiny_mce/utils/TMS.js"></script>
and add the first java link and the second links to your code like this
<script src="../tiny_mce/tiny_mce.js"></script>
<script src="../tiny_mce/utils/TMS.js"></script>
now how we can add editor to textbox :
<asp:TextBox ID="T25" runat="server" TextMode="MultiLine" Width="532px"></asp:TextBox>
thanx