I'm making a form using a purchased theme with bootstrap 3. The forms I like from the theme use a CSS class called ".smart-form *" which affects everything inside the form where it's being used. I'm also using Summernote inside the form and, as shown in the picture below, everything seems ok:
The problem comes when opening the image or link attachment modal window. Here's a picture of the class:
And here's a picture of how the modal looks:
Now, if I uncheck those 3 attributes from that class, I get a perfect modal window but the rest of the form gets broken. Here's the correct modal window:
Is there any way of telling Summernote NOT to inherit those 3 CSS attributes?
Thanks!!!
Related
I have an angular application, I am using Bootstrap classes. Whenever I am adding a new component like nav, button, etc. I am not able to see exact color and properties whatever I see in the bootstrap documentation, for eg: if I add a button HTML and added btn and btn-primary classes then I am not getting the exact color which is specified in bootstrap documentation:
Primary button in my application
Primary button from bootstrap documentation
In the inspect page I can see like this:
Inspect page for button
Could someone please help me on this
I am in the process of developing a block based form plugin for WP. The main form block will support nested blocks - the button core component being one of them.
Problem is that whenever I include the button component, the thing that gets rendered in the front-end is an anchor tag instead. I checked - the link & anchor options are empty in the button sidebar options (in editor).
So shouldn't a button have been rendered instead? What am I missing here?
The official Wordpress reference guide states the following -
The presence of a href prop determines whether an anchor element is rendered instead of a button.
Props not included in this set will be applied to the a or button element
Source: https://developer.wordpress.org/block-editor/reference-guides/components/button/#props)
Also, is there any way to disable the anchor options when I am inserting a button component inside my form?
Wordpress version: 5.8
The core/button block only renders an <a> tag. You can see for yourself in the source code. The core/button block was not intended to create an actual <button> element (for submitting a form like in your example).
What you'll need to do is create your own custom block that does output a <button> HTML element.
I want to add a button in my drupal website which can redirect me to any specified article/page. Any suggestion will be helpful.
Use the Link module.
It allows you to add a field to your content type that has an href value and a Text value. Then you can change it's display output to output title as link which will output a hyperlink with the text you selected, and once clicked will redirect you to whatever href you set.
If you want to style it to look like a button you can add a CSS class to the Link field you added in your content type under manage fields >> Edit the link field.
I am using Bootstrap subtheme so the button CSS classes are already there for me. i simply add btn btn-default if I want to show a button instead of a hyperlink.
PS: DO NOT CREATE BUTTONS IN A BLOCK. Classes should never go into a block. And if you have clients who are going to use that site, they can mess stuff up pretty fast.
Create Block and put html code for button in block. Enable block on pages where you want.
While putting html code of button into block, please make sure that you have selected "Full Html" filter.
In the TextImage component, the Style tab has lost the css selection dropdown that used to show up when editing the component. It now just shows a blank area. It should have a dropdown for image alignment (left or right are your choices). This doesn't appear anymore.
This tab is xtype componentstyles (String), so I don't know where it references the source for the dropdown values. My local instance of CQ5 works just fine.
I cannot just add an xtype selection and feed it values because the css that gets added to the JSP code is outside the component's .jsp-specific page
It looks like the componentstyles xtype is driven by the CQ design that is associated to the page. Designs are stored underneath /etc/designs and are assigned through a page's Page properties dialog (cq:designPath property)
Let's look at an example in the Geometrixx website. If you navigate to the English homepage # /content/geometrixx/en.html and add an instance of the TextImage component to the page, you will notice that the Styles tab is empty in the component dialog. Now navigate to the 'Discover Geometrixx' page # /geometrixx/en/company/discover_geometrixx.html and examine one of the two pre-existing instances of the TextImage component. The Styles tab has the image dropdown you mentioned!
So what is the difference between the instances on the 'Discover Page' and the 'Home' page? The answer is in the design definition. If you open up CRXDE Lite and navigate to the Geometrixx design page for the Content Page template (which the 'Discover Geometrixx' page adopts), you will see the following nodes:
/etc/designs/geometrixx/jcr:content/contentpage/par/textimage
/etc/designs/geometrixx/jcr:content/contentpage/par/textimage/cq:styles
/etc/designs/geometrixx/jcr:content/contentpage/par/textimage/cq:styles/imagealign
/etc/designs/geometrixx/jcr:content/contentpage/par/textimage/cq:styles/imagealign/image_left
/etc/designs/geometrixx/jcr:content/contentpage/par/textimage/cq:styles/imagealign/image_right
The design for the Homepage template (which the 'Home' page adopts) is missing this definition.
If you want to continue to use the out of box TextImage component, it seems you will need to have this design configuration set up on all the paragraph systems and templates where the component can go. So for example, if you want these styles to be available to the TextImage component when it is added to the par paragraph system of the Homepage template, you would add similar style nodes to:
/etc/designs/geometrixx/jcr:content/homepage/par/textimage/cq:styles
Alternatively you could just overlay the component and/or create your own. Then for this custom component you could create your own Styles dialog that is independent of the design. You can simulate the out of box behavior by examining the saved JCR property and setting the appropriate CSS class name in your render script.
The problem is that a design path variable went missing. We don't know why or how, but the solution is as follows.
Open up Content Repository
Go to /content/-sitefolder-/ and expand
Click on jcr:content and view properties
Check for attribute cq:designPath and its value
/etc/designs/-sitefolder-; add to properties if it doesn't exist
I'm having some problems with Jquery UI Dialog and TinyMCE.
Passing data to a text area works well with UI Dialog and Jquery.
So setting data in text area like this works fine:
$("#MessageDialog #messageDto_Body").val(messagedata.Body);
$("#MessageDialog").dialog("open");
When I attach a tinyMCE editor to the text area it correctly adds the editor (and without the UI window the content of the text area is preserved):
tinyMCE.execCommand('mceAddControl', false, 'messageDto.Body');
With UI Dialog the area is empty.
From what I have seen the tinyMCE works hiding the real text-area and adding a new one.
I have also tried setting the content directly but no luck:
tinyMCE.activeEditor.setContent(messagedata.Body, {format : 'bbcode'});
Any advice?
UPDATE: substituted Jquery UI Dialog with jqModal and everything works. I think the problem could rely not in TinyMce but in the Jquery UI Dialog
Perhaps the jQuery TinyMCE plugin will be helpful.
tinyMCE hides the textarea and adds multiple elements using the textarea's ID appended with '_' + element type. To access the contents of the iframe try something like this.
$("#content_ifr").contents().find("body").html(messagedata.Body);
Where #content is the ID of your textarea.
I solved this by initializing the editr with the TinyMCE jQuery plugin with $('#myTextBox').tinymce(..., after opening the dialog. CLosing and reopening the dialog doesn't seem to cause a problem with jQ UI 1.8.16.