I am in the process of finding a rich text editor to add to my application and came across TipTap. It looks great so I followed a tutorial I found on YouTube however no styles are being loaded on my site.
I have been searching for a solution for ages but can't find a replication of this problem.
No styles are being loaded on render so the editor is no more than a line of text indicating the menu buttons and a blank box (which is editable) for the input area.
All of the buttons behave as expected but there are no styles.
I noticed that if I try to render a simple HTML button on another page it also comes without default styling. Is there something obvious I'm missing here? I have been searching for a solution for a few hours now.
This is how my editor looks
This is how it should look
This is a HTML button also showing without a default style I tried to render on another page
<button type="button">Where is the style?</button>
I tried deleting the cache on Chrome however nothing changed
If anyone is in the same boat I have found a solution, each element on the page needs to be defined explicitly within the css file. Default behaviour wasn't working as expected so for the buttons I added to the style sheet:
button {
border: 2px solid black;
padding: 3px;
border-radius: 2px;
}
and styles appeared.
Adding .ProseMirror to each element had no effect on its styling so I had to style elements globally. This affected other components I had made such as a Button component, to overcome this I added editor to the class name of each button in the Editor component
<button
//
className={editor.isActive('underline') ? 'is-active' : 'editor'} //default is '' but 'editor' added
>
This allowed me to style the Editor buttons separately
button.editor {
border: 2px solid black;
padding: 6px;
width: 80x;
border-radius: 8px;
background-color: ##C1BCAC;
}
Related
I found several posts on this but none had an answer that works for my scenario. This post was the closest I could find.
Currently, the tooltips on my ASP.NET web pages have been formatted (using CSS) and display correctly when hovered over, but also appear (using jquery 1.12.1) at the foot of the page as a list of DIVs each time a tooltip displays - on some pages there are over 20 so the page gets very 'busy' if the user hovers over multiple items.
Following the suggestions in the linked post, if I add the link to the js ui file (as below) in the HEAD section of my pages, the divs stop appearing but the formatting for the tooltips is partially lost.
<link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
This is the CSS for the tooltip:
.ui-tooltip {
background-color: #E8EFFD;
padding: 4px;
position: absolute;
z-index: 9999;
max-width: 300px;
-webkit-box-shadow: 0 0 5px #5787D2;
box-shadow: 0 0 5px #5787D2;
font-size: 0.9em;}
body .ui-tooltip {
border-width: 2px;}
Initially I though the only difference after adding the link was the font being larger, but when hovering over a disabled control, I noted the background colour and the html formatting is being lost. For enabled controls, these have retained the background colour of the tooltip.
I added a disabled class for the tooltip, but that didn't make any difference:
.ui-tooltip:disabled {
display: none;
}
Does anyone know how I retain the existing font size, background colour and formatting using this logic?
The tooltip when it creates the divs:
The tooltip when the divs are removed:
The tooltip over an enabled control:
The tooltip over a disabled control:
Is my only option to go back to 1.10.? of jquery which doesn't add the DIV tags, but if so, will it still cause the same issues with the disabled controls?
Many thanks
Martin
I am using ng-click on a div element in an ionic app as such:
<div class="thediv" ng-click="showActionsheet()"><p>26</p></div>
This works well, but I have some CSS setup:
.thediv.activated {
background-color: #d18027;
border: 2px solid #ffc666;
}
The CSS activates if I press the div long enough, but when I just tap it nothing happens. I would also like to keep it activated until the actionsheet closes. Not sure how to go about that either...
I'm afraid that you can't solve the delay. That's one of the bad things of working with building hybrid mobile apps. Ionic framework is very good, but in my opinion it will never be as fast as native apps (mainly if it's not a very new-fast-modern device).
About keeping it activated, you can create a variable like $scope.isActivated and at the beginning of your method showActionsheet() give it a true. When you close the action sheet set it to false.
And in your div you can do something like
<div class="thediv" ng-click="showActionsheet()" ng-class="active: isActivated"><p>26</p></div>
In your CSS do also
.thediv.activated,
.thediv.active, {
background-color: #d18027;
border: 2px solid #ffc666;
}
I have made a div clickable using jquery. Is there a way to also tell the browser to display the target of the clickable div like it does for anchors? (example in the bottom left of the image below)
In answer to those suggesting using an anchor tag - That's not the question I asked. I want to avoid using anchor tags as that requires changing a lot of html, rather than a small amount of jquery. And even if changing the html to use anchors is the correct thing to do - it will still be useful to know if this is possible.
Edit it seems this is not easilly possible, but an alternative suggested by Pete, using jquery to wrap the div in an anchor works fine (better than I thought it would)
Just use a normal link and hide it:
a {
opacity: 0;
font-size: 100px;
}
div {
width: 100px;
height: 100px;
border: 1px solid red;
}
<div>
hidden link
</div>
I'm having some difficulty with the jQuery date picker control. In my application, I'm using the most basic method to invoke the calendar:
$('#elmt').datepicker();
The target element is an input text box on a pop-up div. Whenever I click into the textbox, the calendar shows up as see-through: http://s17.postimage.org/4knyxgvjz/see_thru_calendar.png
I've tried some suggestions already on Stackoverflow to adjust the z-index of the ui-datepicker class:
.ui-datepicker { width: 17em; padding: .2em .2em 0; display: none; z-index: 9999 !important; }
But that hasn't made a difference either. My test environment is running Internet Explorer 7 (the calendar does render OK on the sample index.html provided by jQuery-UI).
Has anyone seen an issue like this with the jQuery UI datepicker?
You are not loading the relevant CSS for the jQuery UI datepicker, and that is causing the Calendar to be as "see-through".
To test it, edit the CSS file for the jQuery UI and change this class background:
.ui-widget-content {
background: #000;
}
If the datepicker gets a black background, the style sheet is being
loaded, but the path for the images might be wrong.
If no black background, the style sheet isn't being loaded.
Another method to confirm if the problem lies on the style sheet is to include the CSS directly from the jQuery CDN:
http://code.jquery.com/ui/1.8.20/themes/redmond/jquery-ui.css
My company is building a CMS. As a front-end web developer, I am asked to build a 'in-context editing' feature.
You can see an example here http://www.concrete5.org/documentation/general-topics/in-context-editing/
I want to know what kind of program should we know to build this? Can this be achieved with just JavaScript or some front end tools or does it need some server-side language?
Thanks.
For single line edits, here is a simple way to enable inline editing with just CSS (and a little JavaScript for IE7). In your edit-mode page, use a textbox to display the text, whether in edit mode or view mode.
Here's the css to make a form field look like plain text until it is hovered or focused:
.inContextEdit
{
border: solid 1px transparent;
margin: -2px -3px;
padding: 1px 2px;
}
.inContextEdit.focus, /* IE7 doesn't recognize :focus */
.inContextEdit:focus,
.inContextEdit:hover
{
border-color: #ccc;
}
Then, some JavaScript for IE7:
function focusInput(el)
{
el.className += " focus";
}
function blurInput(el)
{
el.className = el.className.replace(/ *focus\b/g, "");
}
And here is the markup you would use:
<input name="PageTitleInput"
value="Page title"
class="inContextEdit"
onfocus="focusInput(this);"
onblur="blurInput(this);" />
This trick will work with a <textarea> instead of an <input>, but you'll probably be better off finding an existing control for your multi-line text. The css could be tricky and hiding the scroll bar in view mode will be difficult. There are several existing controls out there with rich text capabilities.
Will need both front end and back end tools.
I assume you are talking about an in place editor.. jquery has quite a few plugins for it.
If you need a rich text editor, try out TinyMCE. I've used it, and liked it too.