i have like 4 textbox with required and i have a button name ‘add’ and another button for open a new page ..
the problem is where i’ m clicking at the button who open the new page they tell me to fill the text box .. is there any way to make the required working just for the « add » button ?
ps: í’m using content place holde and i already triyed to use but still not working
set the line width to zero...
series: {
5: {
type: 'line',
lineWidth: 0
}
}
Related
I am using deltaDecorations to show errors in my editor.
here is my code: https://gist.github.com/dinager/41578bd658b60cc912a6023f80431810
Here is the result:
I am trying to add resize property to the editor by adding to the style
resize: both;overflow: auto;
But then the hover message is partly hidden by the edges of the editor
As you can see in below attached image - the editor can resize now (bottom right), but the hover message is partly hidden
How can I add resize property to not hide elements?
Another question: can I make the hover message float inside the editor, meaning if it's at the top line it should float to the bottom, if at the side of the editor float to the middle, etc..
Attaching the code adding the markerDecorations (exists also in the gist link at the top):
this.markerDecorations = codeEditor.deltaDecorations(this.markerDecorations, [
{
range: new monaco.Range(pos.startLine, pos.startColumn, pos.endLine, pos.endColumn),
options: {
className: 'squiggly-error',
minimap: {
color: { id: 'minimap.errorHighlight' },
position: monaco.editor.MinimapPosition.Gutter,
},
overviewRuler: {
color: { id: 'editorOverviewRuler.errorForeground' },
position: monaco.editor.OverviewRulerLane.Full,
},
stickiness: monaco.editor.TrackedRangeStickiness.AlwaysGrowsWhenTypingAtEdges,
zIndex: 1,
hoverMessage: { value: parseResponse.error, isTrusted: false },
},
},
]);
solved it by adding fixedOverflowWidgets: true on monaco.editor.create options.
this.editor = monaco.editor.create(el, {
// ...
fixedOverflowWidgets: true
});
While using DataTables for my project, When i align the Export buttons to the right side of the table using float:right. It is not properly aligned with the right edge of the table. Whereas it is properly aligned when i set float:left.
Please suggest a solution for this.
$(" #adminMainTable,#managerMainTable").DataTable( {
scrollY: '50vh',
scrollCollapse: true,
paging: false,
dom: 'frtpB', //This changes the position to Bottom
buttons: [
{ extend: 'excelHtml5', text: 'To Excel' },
{ extend: 'csvHtml5', text: 'To CSV' },
{ extend: 'pdfHtml5', text: 'To PDF' }
]
});
//The below code is for changing the position of buttons to right side of the table
$("div#adminMainTable_wrapper,div#managerMainTable_wrapper").find($(".dt-buttons")).css("float","right");
Using a similar approach to your code for floating right, you can do this:
$(your selector in here).find($(".dt-buttons button.dt-button:nth-child(3)")).css("margin-right","0");
In other words, remove the right-padding from the final button.
Instead of :nth-child(3), you can use :last-child. That may be safer if the number of buttons ever changes.
Is there a way in Angular 2 Material force align (say a chip with very long text) and not mess up with the form element under it?enter image description here
Fixed this by declaring a fixed width upon opening the dialog.
let dialogRef = this.dialog.open(ModalComponent, {
width: '250px'
});
First question.
This is how my editor looks like:
tinymce.init({
selector: "div.Body",
content_css : '/style/core.css',
inline: true,
force_br_newlines : true,
force_p_newlines : false,
forced_root_block: '',
plugins: [
"save advlist autolink lists link image charmap print preview anchor",
"searchreplace visualblocks code fullscreen",
"insertdatetime media table contextmenu paste"
],
toolbar: "save insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
save_onsavecallback: function ()
{
console.log("Sending body to database");
var list = {};
list.Id = "#Model.Id";
list.Body = $("#PageBody").html();
$.post("/home/SaveChanges", list, function (message) {
$('#save').attr('disabled', true);
$("#message").html("<strong>" + message + "</strong>");
});
}
});
When I open the editor, the button Save is disabled because "save_enablewhendirty" is set to "true" in the plugin. If I start editing the text, the Save button enables. If I click on the Save button, it is still enabled, it becomes disabled only if I click once more somewhere in the editor. The problem is that I have to make the Save button disabled right after clicking on the button. Is that possible?
Second question.
The Editor is showing up in a div where the text for editing is located. And I have a problem - if I write too much text, I cannot scroll to see the text on the beginning because the div stays as it is, it doesn't depend on the text size. How can I put a scroller so I can see all the text even if I write a large paragraph?
This is how the HTML looks like:
<div id="PageBody" contenteditable="true" class="Body">
<span id="text1">#Model.Body</span></div>
And the CSS:
#Body, #PanelContent #PageBody {
border-top: 0.5em solid #009B7B;
padding: 0.25em 0.5em 0.25em 0.5em;
background: linear-gradient(to bottom, rgba(0,155,123,0.2) 0%,rgba(0,155,123,0.1) 50%,rgba(0,155,123,0) 100%);
position: relative;
width: 17.5em;
min-height: 100%;
margin-right: 1.25em;
margin-bottom: 1.25em;
clear: left;
float: left;
In your code that is called on save you can add a call to set the dirty status:
tinymce.activeEditor.setDirty(false);
or
tinymce.editors[0].setDirty(false);
As for your question on the DIV and scrolling - the default behavior for inline editing would be for the DIV to grow vertically.
Are you using CSS to control the layout of the DIV?
What HTML are you using to define the DIV?
A TinyMCE Fiddle or Codepen showing the issue would likely help people solve your problem faster.
If clearing the dirty flag doesn't work, trying calling the nodeChange function too. This works for me:
editor.setDirty(false)
editor.nodeChanged()
I have been working on an application using sencha touch 2 .
I have a toolbar on top which contains a button .
When i click this button i will have a panel overlay .
In this panel,i want to have two items :
var shareButton = {
xtype : 'button',
ui: 'action',
width:'36px',
height:'36px',
handler : function(){
var panel=Ext.create('Ext.Panel',{
right: 0,
top: 20,
modal: true,
hideOnMaskTap: true,
hidden: true,
width: 260,
height:'70%' ,
styleHtmlContent: true,
scrollable: true,
items: [
{html:'Tweet</body>',},
{html:'<div ><class="fb-like" data-href="http://test.com" data-send="false" data-layout="button_count" data-width="4" data-show-faces="false"></div>'}]});
Ext.Viewport.add(panel);
panel.show();}};
But this is not working.
In fact,i want the first one to direct me to twitter to share the URL (www.google.com).
And the second one to facebook to share "test.com".
Unfortunately ,nothing is displayed in the panel .
Thank you.
Since the overlay is called after the page is loaded, the facebook and twitter buttons should rendered again
This is the code that should be added after the overlay is shown
FB.XFBML.parse();//facebook
$.ajax({ url: 'http://platform.twitter.com/widgets.js', dataType: 'script', cache:true}); //twitter
This works for me. THe only problem is that the Facebook like button has not got a size, so you cannot see it.
Ensure your floating panel is not scrollable. If it is scrollable, give it a fixed width and height.
Update
Here is an example on Sencha Fiddle: http://www.senchafiddle.com/#jgXtj
Ensure you are adding the panel into Ext.Viewport.