I use WordPress-editor and I want to display an icon within a "span"-tag like this:
<div id="question1" class="box-around">
<div class="box-left"><span class="fa fa-search" aria-hidden="true"> </span></div>
<div class="box-right">
<h3>Some Heading</h3>
Some Text
<span id="question1-answer"> </span>
</div>
</div>
Whenever I make a change in "visual", it removes the "span"-tag and looks like this:
<div id="question1" class="box-around">
<div class="box-left"></div>
<div class="box-right">
<h3>Some Heading</h3>
Some Text
<span id="question1-answer"> </span>
</div>
</div>
Oddly enough, the span at the bottom (id="question1-answer") is kept. Am I missing something? I already tried to set a whitespace " " within the tag, which will be converted to a " " (actual whitespace) after changing text in "visual" and used different tags as well.
Thanks!
Add this code in your active theme functions.php file.
function override_mce_options($initArray) {
$opts = '*[*]';
$initArray['valid_elements'] = $opts;
$initArray['extended_valid_elements'] = $opts;
return $initArray;
}
add_filter('tiny_mce_before_init', 'override_mce_options');
A little more specific - allow empty tags if they have an id, name, class or style attribute:
function override_mce_options($initArray) {
$opts = '*[id|name|class|style]';
$initArray['valid_elements'] .= ',' . $opts;
$initArray['extended_valid_elements'] .= ',' . $opts;
return $initArray;
}
add_filter('tiny_mce_before_init', 'override_mce_options');
Maybe I'm doing something wrong, but for me it works. Still I'm sure there's a better solution - it would be nice to be able to add only one specific tag to valid elements.
With the above answers (Val) the function will allow empty tags but this still may not work due to the theme structure or any page builder plugins you may have.
For example, I am using WPBakery page builder with custom functions. For my to allow an empty span with style (background for example) I added the above code to my functions.php and also placed a tag within the block.
The span block has a custom class .break to where the styling is created, I then set a display: none on the tag within the .break class so the styling remains but the extra space is removed.
<span class="break"><br></span>
.break br {display:none;}
Now the empty span tag should display as normal.
Related
I'm trying to get the data from a post using the following snippet:
<div class="marquee-container row marquee-row">
<?php
$post = get_post(415);
if(isset($post->post_status) && $post->post_status == 'publish') {
echo apply_filters('the_content', $post->post_content);
}
?>
</div>
But when I inspect the element, I found some unwanted <p></p> tags which are unnecessarily introducing gaps.
<div class="marquee-container row marquee-row">
<p> </p>
<div class="some-class">Content from the post</div>
<p></p>
</div>
How to avoid this unwanted tags ?
Note: This tags are not being inserted to table, being introduce while trying to get the post.
Thank you for your help.
can you please check that content from admin side in text tab(Where you add the contents for page or post)? If you have pressed Enter key then it will take that as <p></p> tag in content.
Remove blank spaces from editor if it is not necessary.
I have a list :
$scope.list = ["test/test1/test2/test3","test3/test5/test6"];
I would like to apply bold style to / characters when displaying the list :
<div ng-repeat="path in list">
<p style="font-weight:bold">{{path}}</p>
</div>
Do you have any ideas how can I achieve this ?
Fiddle
you can do it simply with str.replace http://jsfiddle.net/k18vgtvw/
<p style="font-weight:bold" ng-bind-html-unsafe="csc(path)"></p>
controller
$scope.csc = function(path) {
return path.replace(/\//g, "<span style='color:red'>/</span>");
}
There are a number of ways to do this. First I'd add a function to your controller, let's say it's called boldSlashes.
function boldSlashes(path) {
return path.replace("/","<b>/</b>")
}
Then change your html to be:
<div ng-repeat="path in list" ng-bind-html>
boldSlashes({{path}})
</div>
The ng-bind-html tells angular to treat the contents as html and not escape it.
You also have to inject ngSanitize into you module in order to use ng-bind-html.
So wherever you create your module, add ngSanitize to the dependencies like:
angular.module('myApp',[ngSanitize])
I'm not sure if this is what you are trying to do but I separated out individual elements. Also the jsfiddle font the bold font looks exactly the same on the / character.
http://jsfiddle.net/3a2duqg4/
1. Updated the view to a list
2. Changed the array to have an individual item per section
3. Added styles to the "/" and realized the font bold property with the fiddle default font didn't look any different.
<div ng-controller="MyCtrl">
<ul>
<li class="list" ng-repeat="path in list">{{path}} <span>/</span></li>
</ul>
</div>
Added the items to a list rather than a paragraph and added some styles. I updated your array to have one value per array item as well.
Let me know if this helps! :)
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.list = ["test/test1/test2/test3","test3/test5/test6"];
$scope.updateString = function(s) {
return s.replace(/\//g, '<span class="bold">/</span>');
};
}
.bold {
font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="MyCtrl">
<div ng-repeat="path in list">
<p ng-bind-html-unsafe="updateString(path)"></p>
</div>
</div>
</div>
I am using the angular drag & drop directive on my divs.
I am also using Bootstrap CSS paneling. The panel header is what I am using as the dnd dragHandle.
<div class="panel-heading dragHandle">
<h4>Click & drag here to move</h4>
</div>
I want the entire div to be draggable based on the header, but once inside the div (where text is displayed), I am using the directive dnd-nodrag. This currently works as you are not able to drag the div when the cursor is inside and not on the panel header; however, I would like to be able to copy the text inside the div.
<div dnd-nodrag class="panel-body" draggable="true">
<p> THIS IS THE TEXT I WANT TO COPY </p>
</div>
As it seems to me, the nodrag directive only allows selection/copying of text inside of an input element. I need to be able to copy the plain text from the div.
Both of the above code snippets are nested inside of a div with the class "panel" and the dnd-draggable directive.
Any work arounds? Any directives I am missing? Please help. Thanks ahead!
Also -- I have tried adjusting the user-select styling in the CSS with no luck.
My attempt:
<div class="panel-body" style="-webkit-user-select: all">
<p> THIS IS THE TEXT I WANT TO COPY</p>
</div>
This issue has been reported in the bugzilla,
Issue Link : https://github.com/react-dnd/react-dnd/issues/178
https://bugzilla.mozilla.org/show_bug.cgi?id=195361
https://bugzilla.mozilla.org/show_bug.cgi?id=800050
However I've fixed this issue using a work around,
When you inspect the Div element, you'll see the below code having draggable attribute set to true hence in firefox you cannot select the text using mouse cursor.
<li ng-repeat="item in models.lists.A" dnd-draggable="item" dnd-moved="models.lists.A.splice($index, 1)" dnd-effect-allowed="move" dnd-selected="models.selected = item" ng-class="{'selected': models.selected === item}" class="ng-scope" draggable="true">
<div dnd-nodrag="" draggable="true">
<div class="theheader" dnd-handle="" **draggable="true"**>A header</div>
<div class="thebody">
Selecting test works on Chrome/Safari. Doesn't work on Firefox/Edge
<input type="text" ng-model="item.label" class="ng-pristine ng-valid">
</div>
</div>
</li>
Workaround :
in html,
<input type="text" ng-model="item.label" class="ng-pristine ng-valid"
ng-click="vm.disableDrag()" ng-blur="vm.enableDrag()">
in JS file,
/**
*find li and disable the draggable feature, so the input can be edited using mouse in firefox
*/
vm.disableDrag= function($event) {
var $li = $event.currentTarget.parentNode;
angular.element($li).attr("draggable", false)
}
/**
* find li element and Enalbe the draggable feature, on blur of the editable input
*/
vm.enableDrag = function($event) {
var $li = $event.currentTarget.parentNode;
angular.element($li).attr("draggable", true)
}
How do i add some CSS to the Scala Helpers, and is it possible to remove the "Required" and "Numeric" text under the textfield?
#inputText(advForm("weeknr"))
#inputText(advForm("jaar"))
#inputText(advForm("datum"))
--------------------EDIT 1------------------
When I add my own CSS, im not getting the error warnings that i used to get when I try to upload an empty form, the text used to turn red. This is the code I changed
MyPlainFieldConstructor.scala.html(only 2 lines of code):
#(elements: helper.FieldElements)
#elements.input
advPlaatsen2.scala.html:
Added this line of code
#implicitField = #{ FieldConstructor(myPlainFieldConstructor.f) }
and this is how i placed the CSS(Foundation 5):
<div class="row collapse">
<div class="small-2 columns">
<span class="prefix">Email</span>
</div>
<div class="small-4 left columns">
#inputText(advForm("email"),
'id -> "right-label",
'placeholder -> "")
</div>
</div>
This way the forms looks how I want it to look but it doesnt show me errors and it doesnt even upload my files
but when i remove this line of code:(which is above the #import helper._)
#implicitField = #{ FieldConstructor(myPlainFieldConstructor.f) }
the form works as it should but looks really bad:
To customize the html and styles of a field you can write your own field constructor. Take a look to play docs here.
I have a page which brings database entries in and displays them, and i have given every other entry/listing this style:
hjl:nth-child(odd) { background: #F2F2F2;}
And this is my HTML/PHP
<a href="paging.php?job_id=<?php echo $rsjobinfo['job_id'];?>">
<div class = "hjl">
<div class = "hjldate">
<p>Posted on:<br /><?php echo $date = date('d M Y', strtotime($rsjobinfo['date']));?></p>
</div>
<div class = "hjljobinfo">
<h1><?php echo $rsjobinfo['job_title'];?></h1>
<h2><?php echo $rsjobinfo['company_name'];?> |</h2>
<p class = "location"><?php echo $rsjobinfo['city'];?>, <?php echo $rsjobinfo['county'];?>, <?php echo $rsjobinfo['country'];?></p>
</div>
</div>
</a>
However, when i try to wrap each entire entry in an anchor tag, every entry changes to the background style listed above, no longer recognising the 'odd'.
This is the HTMl that's generated:
<a href="paging.php?job_id=253">
<div class = "hjl">
<div class = "hjldate">
<p>Posted on:<br />11 Jul 2011</p>
</div>
<div class = "hjljobinfo">
<h1>Entry One</h1>
<h2>Company |</h2>
<p class = "location">New York, NY, USA</p>
</div>
</div>
</a>
I'm not used to using nth-child so i'm not sure how to fix it (i've tried playing around with adding an 'a' to the above but its not making any difference).
Does anyone have any pointers they can kick me towards?
Thanks
Dan
:nth-child works between siblings documentation. That means that the counter (odd in this case) applies to elements with the same parent.
If you wrap each .hjl in a a then they no longer share the same parent so the selector tries to find odd .hjl elements inside the a element and finds just the first one (the only one that exists in the a).
So, you should change your selector to work with a tags (perhaps apply a class as well for more precision)
on another note, placing div and h1/h2 elements inside a a tag is invalid and will cause other issues.
You need to add ":" right in front of it, like so:
YourElement:nth-child( { number expression | odd | even } ) {
declaration block
}
Your element is something like tr, li, or anything like that. Hope that helps.