I have the booleans defined in my guided Marketo template and they're appearing for the content editors to use. Basically, it's just a toggle that adds a class to some elements. The intent is, if the toggle is ON and the text says "Visible", it shows the image and rich text editor in a 2-column layout (by default in my CSS, hence an empty string for the "true_value"). If the toggle is OFF and the text says "Hidden", it hides the image and shows only the rich text editor because the false value adds a class to the element.
Meta declaration:
<meta class="mktoBoolean" id="row_img" mktoname="Row Image" default="true" false_value="content-only" true_value="" false_value_name="Hidden" true_value_name="Visible">
Use in HTML:
<section class="module ${row_img}">
The documentation says this:
"default: Boolean string. "true" or "false" controls if the value
starts in the ON or OFF position. "false" if not provided.
Despite the HTML starting off correctly in the ON position (since my default is set to "true" and I can see the page in the 2-column layout when I first create it from the template), the toggle in the right-hand sidebar appears to start in the OFF position when it should be in the ON position to match the content.
The toggle itself works fine, I just have to toggle them all ON (and nothing happens because now it matches) after creating the page. Toggling it back to OFF also works as intended. So it's really just the default starting position of the toggle that always defaults to false regardless as to what I specify it as.
Is there something I'm missing to make the default work or is this an actual Marketo bug?
Looking at the meta tag, the value for true_value is "", This means that in the default situation, it will set the value to empty.
Try providing a blank space like this true_value=" ".
<meta class="mktoBoolean" id="row_img" mktoname="Row Image" default="true" false_value="content-only" true_value=" " false_value_name="Hidden" true_value_name="Visible">
Related
I work in solid-js and I would like to add a floating button to the far right of a screen in my application. After reading this article on creating floats in Tailwindcss..., I wrote the following code:
export default function SearchEngine() {
return (
<>
...
<BsChatLeftTextFill size={41} class="float-right text-blue-500 "/>
</>
);
}
This did create a button on the far right of my app, but when I scroll down the tab bar, my button position is influenced by it. In my opinion, given that this is a floating button, the button should remain visible at the far right of my application despite scrolling the page, in its initial position and this is the behavior I expected. I looked on the Tailwindcss documentation, but the property I'm using is indeed the correct property.
Here is my solution:
<BsChatLeftTextFill size={41} className="fixed bottom-3 right-14 text-blue-500 " />
The word to remember is the word fixed which allows you to maintain the same position despite scrolling. The words bottom-3 and right-14 are used to determine the position of the fixed element relative to the left and the bottom. It is also possible to determine the position relative to the top and to the right thanks to the keywords top-x and left-x
Is there a way to Zoom In an image when it's clicked or hovered in powerapps?
Here is the code in the HTML Text Control:
Concatenate(
"<b><font color=black>", currentWorkItemId, "</font></b> ", LookUp(extendedWorkItemList, Id = currentWorkItemId, Title),
"<br></br><br></br><br></br>",
"<b>Test Case</b>",
"<hr>",
LookUp(workItemDetails, WorkItemId = Value(currentWorkItemId), TestCase)
)
Here is the generated HTML Text:
<b><font color=black>36066</font></b>Test<br></br><br></br><br></br><b>Test Case</b><hr><span style="display:inline !important;">Test Case<br><br><span style="display:inline !important;">This a just a Test :)<span> </span></span>TestUrl<br style="box-sizing:border-box;"><span style="display:inline !important;"><br></span><br></span><img src="https://media.geeksforgeeks.org/wp-content/uploads/20200403151026/adblur_gfg.png" alt='Geeks Image'><br><br>
And here is how it looks like:
link
Thanks in advance for your help!
This is how I do did it by clicking on the original image.
Please read through this whole response before trying.
7.3 steps
Step 1
Original image is 'Html text' control called 'Image' with HtmlText set to the following (including the quotes around in the string remove the space after the first <). :
"< img src="&ThisItem.Image&" width="&Self.Width&">"
(yours might be your whole html output since it in not just a single image but rather a whole html string)
ThisItem.Image refers to the selected SPO List Item in the form refencing a column called 'Image'. That is a 'Hyperlink or Picture' column set to Hyperlink. You may not need this, since you are already getting the URL from a another type of column.
Step 2
Set a variable on the OnScreen or App OnStart function to
Set(varImageLargeVisible, false)
Step 3
Set the original image OnSelect to
UpdateContext({varImageLargeVisible:true})
Make sure image DisplayMode is set to Edit
Step 4
Create a new HTML Text control. Set it to the size you want. If you want to block behind it off make the background color white or something to block out what is behind the control.
Step 5
Add an Icon, the X or something obvious so the user knows how to close the large image.
Set OnSelect to
UpdateContext({varImageLargeVisible:false})
Step 6
Change the Visible function for both the new Html Text control AND the icon to
If(varImageLargeVisible = true, true)
Step 7
Set the HtmlText to:
Substitute(Image.HtmlText, "width=443","width="&App.Width&"")
"width=443" is the width of the original control found on the right info panel.
7a-
Replace "Image" in 'Image.HtmlText' with the referenced image. (This references the original control called 'Image')
7b-
Replace the "443" in "width=443" with the width of your original control
7c-
Replace the "&App.Width&" in "width="&App.Width&" with the new size you want the image to be. If it will be a static size you can put in a number here instead of the dynamic size. "& &" breaks up the html within PowerApps so if you put in a static number, removed that as well.
Notes
I think you will need to define a width in your html output so the replace has something to replace.
<img src="https://media.geeksforgeeks.org/wp-content/uploads/20200403151026/adblur_gfg.png" alt='Geeks Image' width="0000"> (replace the 0000 with the size your image currently is.)
Hope that makes sense.
I have a footer, and a rectangle, which contains textboxes for terms and conditions. It's visibility is based on a conditional. The problem is that the terms and conditions take up more than 1 page, so they get cut off. Is there a way to add additional pages after a footer?
Here's the visibility code with the conditional :
=IIf(First(Fields!IsUSA.Value, "PurchaseOrder"), false, true)
Or IIf(Globals!PageNumber=Globals!OverallTotalPages, false, true)
You could place the terms and conditions onto a rectangle (or multiple rectangles) and play with the size so they fit a new page perfectly.
The PageBreak properties can be of use here.
Simply place this rectangle at the very bottom of your report body (not the the page footer).
If you place it at the very bottom this will always be on the last page of the document. So you don't need an expression to have it appear only at the end.
However, you could define an expression for the Visibility property of the rectangle if you wish to have more control over it. So you can hide it based on a parameter value instead of having to create another second report without them.
If you sized the rectangle correctly and defined the right BreakLocation you should be able to get the desired behavior.
I got a form in the following URL http://netaimg.co.il/%D7%A6%D7%95%D7%A8-%D7%A7%D7%A9%D7%A8/ (Hebrew)
whenever someone clicks the "name" tag (the right most one, I've added a picture with the name field highlighted) while using Google chrome the field disappears.
I've noticed that there is a background-position property being added (which I didn't specify).
I'm using "Contact form 7" for WordPress on this site, any help will be greatly appreciated.
click here for the image
What I notice is than when I click on any of the inputs, the cursor is outside of the text box. It looks like it's because the width of the .texttab is wider than it's parent. BUT, if you apply box-sizing: border-box to the .texttab class. And add some padding, the issue seems to be resolved.
I have a website where I want the following page to function - it currently works fine on a full page refresh (since each div is populated from a database) - but I'm starting to build in AJAX to update the database behind the page without the browser leaving the page. The following image shows what I want to achieve. Refreshing the whole page can be a bit slow due to the header information and item information might have a lot of images etc.
I can get it working OK by having my form submit button write out the results in each div area, however when a user returns to the page I want it to show the latest version of the page. Is there a way to change what my submit button on the form does (i.e. when pressed - refresh the "guess" and "guess_info" div areas of the webpage?
My AJAX/Jquery for the form is:
<script type="text/javascript">
$(document).ready(function(){
$("#myform").validate({
debug: false,
rules: {
guess: {
min: 0,
number: true
}
},
messages: {
guess: "Please enter a valid guess.",
},
submitHandler: function(form) {
// do other stuff for a valid form
$.post('process.php', $("#myform").serialize(), function(data) {
$('#results').html(data);
});
}
});
});
</script>
process.php just takes the form inputs (e.g. item_id, user_id, guess), and updates the database for new information.
I'm also having difficulties with the CSS side of things, my header and footer are generated by wordpress, however all the dividers detailed below are my own, (which i put inside the "content" divider.
I have managed to split the "content" into 3 columns, but I'm struggling to split my middle column into the divisions shown..
So my "content" divider is 900px, so I have the "middle" as 500px and each column as 200px.
So now I'm looking to divide up my 500px column into 3 rows (which can be as long as needed), first row one column 500px, second row 2 columns, say 150px (the thumbnail is 100px wide) and 350px, the final row would be split, say 100px, 100px, 300px. Can anyone advise me on this? I've tried following a lot of CSS tutorials, but I seem to struggle getting them to sit on top of each other!! :(
Regarding the submit button there are some ways of disabling the default of it.
The first one is
<form action="whatever" method="whatever" onsubmit="return myJSFunction();return false;">
Or, for keeping your code cleaner you can do:
<form action="whatever" method="whatever" onsubmit="return myJSFunction();">
For the last one you will need to add in your myJSFunction the following code at the start of it:
if(!event) var event = window.event //to prevent browser problems
event.preventDefault();
Remember that if everything works in your js function you need to return false. If you return true it might trigger the default call of your submit button.
Once you did this you should call your AJAX request and write/override your html in js.
Regarding the css I don't see why it doesn't work so I will give you a default solution (the following divs should be placed in your "middle" container):
<div id="item_info" style="width:500px; height:50px;background-color:green"></div>
<div id="description" style="float:right;width:350px;height:100px;background-color:blue"></div>
<div id="thumbnail" style="width:150px;height:100px;background-color:red"></div>
<div id="guess_info" style="float:right;width:300px;height:100px;background-color:black"></div>
<div id="item2" style="float:left;width:100px;height:100px;background-color:yellow"></div>
<div id="guess" style="float:left;width:100px;height:100px;background-color:pink"></div>
I tested this in my editor and it seems to work. Don't bother the colors I used them to get some visibility.
Sorry for the CSS being inlined but just copy the style attribute and put in in your .css page.
If you want each of your rows (the ones that are splitted) to have the same height as their neighbourgs you'll need to change the css a little bit and use some different tricks (but you will have to chose which one could have the biggest height).
Hope this helped.