Text filed of jasper report alignment issue in IE8 - jasper-reports

I am using iReport to create JR reports, and I would like to know if there is a way to set the text alignment for IE8. I have already set textAlignment="Left" but it does not work for IE8. Right now in IE8 it display at the center of total size of text field.
My text field is located at Is it any other property Page Footer band. Is it any different property present for IE? Is any other property present so that my text field automatically resize with respect to total text present in text box?
Following is my code:
<textField isBlankWhenNull="true">
<reportElement x="0" y="0" width="413" height="30">
<property name="net.sf.jasperreports.export.pdf.tag.td" value="full"/>
</reportElement>
<box leftPadding="10"/>
<textElement textAlignment="Left" verticalAlignment="Middle">
<font size="12"/>
</textElement>
<textFieldExpression><![CDATA["Created By: "+ $P{CREATED_BY}]]></textFieldExpression>
</textField>

I solved ii by some jquery trick. it is not a exact solution but it works for me
Alter jasper report render on jsp page. it structure like this
<td>
<p>
<span> Created By:
</span>
</p>
</td>
Using jquery I have find out specific span for "Created by" text. then parent of span i.e and apply text align property left.
<script type="text/javascript">
$(function(){
$('span').each(function() {
//alert($(this).html());
if($(this).html().indexOf("Created By") == 0)
{
$(this).parent().css("text-align","left");
}
});
});
</script>

Related

Magento 2 Different Swatch Types in the Category and Product Page

Would it be possible to use 2 different Swatch Types in the Category and Product Page?
My view.xml as follows. I'd like to use the swatch_image in the Category Page and swatch_image_base in the Product page for the swatches.
<images module="Magento_Catalog">
<image id="swatch_image" type="swatch_image">
<width>30</width>
<height>30</height>
</image>
<image id="swatch_thumb" type="swatch_thumb">
<width>110</width>
<height>90</height>
</image>
<image id="swatch_image_base" type="swatch_image">
<width>60</width>
<height>60</height>
</image>
Is this possible to do?

How to use a button to control material ui v5 datepicker dialog open/close?

In my react app, I would like to control open/close of a material ui v5 Datepicker by clicking an icon button:
function handleShowCalendar() {
setState({ showCalendar: true })
}
<TextField
{...params}
autoFocus={props.autoFocus}
fullWidth
placeholder="Enter a task..."
variant="outlined"
size="small"
InputProps={{
...params.InputProps,
onKeyUp: handleKeyUp,
endAdornment: addTodo.isLoading ? (
<Box position="absolute" top={10} right={10}>
<CircularProgress size={16} />
</Box>
) : (
<Box position="absolute" top={-4} right={0}>
<IconButton
onClick={handleShowCalendar}
disabled={state.text.length <= 0}
>
<CalendarToday />
</IconButton>
</Box>
),
}}
/>
...
<DatePicker
open={state.showCalendar}
value={state.due}
onChange={handleChangeDate}
onClose={() => setState({ showCalendar: false })}
disableHighlightToday
// DialogProps={{ sx: { postition: "inline" } }}
renderInput={(params) => <Fragment {...params} />}
showToolbar={true}
ToolbarComponent={() => (
<AppBar position="static">
<Toolbar>
<Typography variant="h6">Due Date</Typography>
</Toolbar>
</AppBar>
)}
/>
</Fragment>
The problem is the position of the Datepicker is always at the top left corner. Can anyone help why the Datepicker won't show like inline, what I am missing in above code? Thanks.
As an answer to the question in the title, it seems that the code you have posted does open and close the DatePicker.
It sounds like the second question is the one that needs answering, whether it will show "inline".
It seems that the "absolute" position of the Box surrounding the IconButton and the hardcoded top and right values are preventing the borders of the DatePicker from being inside of the TextField.
Here's a Code Sandbox illustrating a DatePicker within a TextField.
If you would like to clarify the positioning you prefer, please do so.

Classnames mismatch using Material-UI and NextJS

Using Intersection Observer API I'm trying to render a Material-UI Component by visibility on the viewport.
export default function Index() {
const [onScreen, theRef] = useOnScreen({
rootMargin: "-300px",
ssr: true
});
const classes = useStyles();
return (
<Container maxWidth="sm">
<DummyContainer />
<div
ref={theRef}
style={{
height: "100vh",
padding: "20px",
backgroundColor: "green",
transition: "all .5s ease-in"
}}
>
{onScreen && (
<Box className={classes.rootBox} my={16}>
<Typography variant="h2" gutterBottom>
Content Lazy using Intersection Observer
</Typography>
<Copyright />
</Box>
)}
</div>
<Box className={classes.rootBox} my={4}>
<Typography variant="h2" gutterBottom>
Content no lazy, why this Box loses margin?
</Typography>
<Typography gutterBottom>
If you request this page with JavaScript disabled, you will notice
that has been properly rendered in SSR
</Typography>
</Box>
</Container>
);
}
Basic stuff, onScreen is a toggled boolean using Intersection Observer
In order to be "SEO friendly" I'm using NextJS and I wanted this component to always be visible in SSR and conditional visible in CSR.
The problem arises during rehydration in CSR, it's seems that some classnames after the lazy component are recreated and I'm losing styling in second Box component.
I've created this CodeSandbox to have a look : https://codesandbox.io/s/nextjsmaterialuiclassnamemismatch-1j4oi
Is this a bug in MaterialUI, JSS? Or most probably I'm doing something wrong?

Obtain bounding box of <use> with external reference

I am writing an application that uses D3 to make some SVG charts. This application renders a number of annotations onto the charts.
The annotations appear as icons, so I have made an external XML file containing the icons defined within a <defs> section, and reference them by inserting a <use> element something like this:
<use x="100" y="50" xlink:href="defs.xml#iconname" />
I want to lay out the icons so that they are not overlapping and obscuring each other. In order to find out if they are overlapping, I attempt to obtain their bounding boxes.
My problem is that when I try to obtain the bounding boxes, using either getBBox() or getBoundingClientRect(), the returned rectangles have zero width and zero height.
The following sample illustrates the problem:
a.html:
<?xml version="1.0" standalone="no"?>
<html>
<head></head>
<body>
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<use id="used_icon" x="100" y="100" xlink:href="b.xml#test_icon" />
</svg>
<script>
var u = document.getElementById("used_icon");
var rect = u.getBoundingClientRect();
console.log("getBoundingClientRect = %d,%d - %d,%d", rect.left, rect.top, rect.right, rect.bottom);
var box = u.getBBox();
console.log("getBBox = x=%d,y=%d - w=%d,h=%d", box.x, box.y, box.width, box.height);
</script>
</body>
</html>
b.xml
<?xml version="1.0" standalone="no"?>
<svg width="0" height="0" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<g id="test_icon">
<rect width="50" height="50" />
</g>
</defs>
</svg>
The output of this, in both Firefox is:
getBoundingClientRect = 8,8 - 8,8
getBBox = x=0,y=0 - w=0,h=0
and Chrome:
getBoundingClientRect = 107,107 - 107,107
getBBox = x=0,y=0 - w=0,h=0
If I place the <defs> inline in the same document, this does not occur and I get correct width and height (although incorrect x & y in Chrome due to this bug). But I would prefer not to have them in the same document, so that I can centralize the definition of all my icons.
I assume the reason for this is the asynchronous nature of referencing externally definitions - the browser may have to fetch them. Note that the page is constructed dynamically so it is not just a case of waiting until onLoad or similar event is emitted.
Is there any way I can get a callback when the external references have been loaded?

Catch SurfaceDragDropEventArgs in ScatterViews with different Layers (zIndex)

I'm trying to implement a photo sharing application with two Android phones and a surface application using the toolkit for Windows Touch Beta. Therefore, I created a ScatterView called MainScatterView as basic Layout. Each time a user touches the screen, a Blob will be created in this MainScatterView. The Blob itself is a ScatterViewItem that contains a ScatterView named Blob. This Blob contains the photos of a specific album on the Android phone.
Dragging & Dropping photos between two blobs works well, but if I want to drop an item on the MainScatterView the dependant onDrop method is never called. My assumption is that this problem depends on the different Layers that a Blob ScatterView and the MainScatterView have, but that's only an assumption. Here's my XAML code:
<s:SurfaceWindow
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:s="http://schemas.microsoft.com/surface/2008"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" x:Class="FotoSharing.SurfaceWindow1"
Width="1920" Height="1080" BorderThickness="5" BorderBrush="White" WindowStyle="None">
<s:SurfaceWindow.Resources>
<ImageBrush x:Key="WindowBackground" Stretch="None" Opacity="0.6" ImageSource="pack://application:,,,/Resources/WindowBackground.jpg"/>
</s:SurfaceWindow.Resources>
<s:SurfaceWindow.Background>
<LinearGradientBrush EndPoint="0.5,1" MappingMode="RelativeToBoundingBox" StartPoint="0.5,0">
<GradientStop Color="Black"/>
<GradientStop Color="#FFA784C8" Offset="1"/>
</LinearGradientBrush>
</s:SurfaceWindow.Background>
<s:ScatterView x:Name="MainScatterView" Margin="0" Width="1920" Height="1080" AllowDrop="True" s:SurfaceDragDrop.Drop="OnDrop" PreviewTouchDown="OnDragSourcePreviewTouchDown">
<s:ScatterViewItem x:Name="sviBlob1" Width="600" Height="600" Orientation="0" CanMove="False" CanRotate="False" CanScale="False" Visibility="Collapsed">
<Viewbox x:Name="ViewBoxBlob1">
<s:ScatterView x:Name="Blob1" Width="600" Height="600" AllowDrop="True" s:SurfaceDragDrop.Drop="OnDrop" PreviewTouchDown="OnDragSourcePreviewTouchDown">
<s:ScatterView.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black" Offset="0"/>
<GradientStop Color="#FFA784C8" Offset="1"/>
</LinearGradientBrush>
</s:ScatterView.Background>
<s:ScatterViewItem x:Name="sviBlob1Header" Width="600" Height="40" CanRotate="False" CanMove="False" CanScale="False" Orientation="0" Center="300,20" HorizontalContentAlignment="Center" VerticalContentAlignment="Center">
<s:ScatterViewItem.Background>
<LinearGradientBrush EndPoint="0,0" StartPoint="0,1">
<GradientStop Color="#FFA4B4BD" Offset="0"/>
<GradientStop Color="#FF65438F" Offset="1"/>
</LinearGradientBrush>
</s:ScatterViewItem.Background>
<Canvas x:Name="Blob1Header" Height="40" Width="600">
<Image x:Name="Blob1NavigateLeft" Height="40" Width="50" Source="Icons\navigate_left_256.png" Canvas.Left="480" TouchDown="handleTouchDownNavigateLeft" Visibility="Hidden"/>
<Image x:Name="Blob1NavigateRight" Height="40" Width="50" Source="Icons\navigate_right_256.png" Canvas.Left="535" TouchDown="handleTouchDownNavigateRight" Visibility="Hidden"/>
<Image x:Name="Blob1ZoomIn" Height="40" Width="50" Source="Icons\zoom_in_128.png" Canvas.Left="294" TouchDown="handleTouchDownZoomIn"/>
<Image x:Name="Blob1ZoomOut" Height="40" Width="50" Source="Icons\zoom_out_128.png" Canvas.Left="360" TouchDown="handleTouchDownZoomOut"/>
<Image x:Name="Blob1Pin" Height="50" Width="50" Source="Icons\pin_black_128.png" Canvas.Left="480" TouchDown="handleTouchDownPin"/>
<Image x:Name="Blob1DragDrop" Height="40" Width="46" Source="Icons\dragdrop.png" Canvas.Left="430" TouchDown="handleTouchDownDragDrop"/>
<Image x:Name="Blob1Close" Height="40" Width="50" Source="Icons\delete_blob_128.png" Canvas.Left="535" TouchDown="handleTouchDownClose"/>
<Image x:Name="Blob1Album" Height="40" Width="50" Source="Icons\album_128.png"/>
<Label x:Name="Blob1AlbumName" Content="Label" Width="250" Height="40" Canvas.Left="52" FontSize="26.667" Canvas.Top="-4" FontWeight="Bold" FontStyle="Italic"/>
</Canvas></s:ScatterViewItem>
</s:ScatterView>
</Viewbox>
</s:ScatterViewItem>
<s:ScatterViewItem x:Name="sviBlob2" Width="600" Height="600" Orientation="0" CanMove="False" CanRotate="False" CanScale="False" Visibility="Collapsed">
<Viewbox x:Name="ViewBoxBlob2">
<s:ScatterView x:Name="Blob2" Width="600" Height="600" AllowDrop="True" s:SurfaceDragDrop.Drop="OnDrop" PreviewTouchDown="OnDragSourcePreviewTouchDown">
<s:ScatterView.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black" Offset="0"/>
<GradientStop Color="#FFA784C8" Offset="1"/>
</LinearGradientBrush>
</s:ScatterView.Background>
<s:ScatterViewItem x:Name="sviBlob2Header" Width="600" Height="40" CanRotate="False" CanMove="False" CanScale="False" Orientation="0" Center="300,20" HorizontalContentAlignment="Center" VerticalContentAlignment="Center">
<s:ScatterViewItem.Background>
<LinearGradientBrush EndPoint="0,0" StartPoint="0,1">
<GradientStop Color="#FFA4B4BD" Offset="0"/>
<GradientStop Color="#FF65438F" Offset="1"/>
</LinearGradientBrush>
</s:ScatterViewItem.Background>
<Canvas x:Name="Blob2Header" Height="40" Width="600">
<Image x:Name="Blob2NavigateLeft" Height="40" Width="50" Source="Icons\navigate_left_256.png" Canvas.Left="480" TouchDown="handleTouchDownNavigateLeft" Visibility="Hidden"/>
<Image x:Name="Blob2NavigateRight" Height="40" Width="50" Source="Icons\navigate_right_256.png" Canvas.Left="535" TouchDown="handleTouchDownNavigateRight" Visibility="Hidden"/>
<Image x:Name="Blob2ZoomIn" Height="40" Width="50" Source="Icons\zoom_in_128.png" Canvas.Left="294" TouchDown="handleTouchDownZoomIn"/>
<Image x:Name="Blob2ZoomOut" Height="40" Width="50" Source="Icons\zoom_out_128.png" Canvas.Left="360" TouchDown="handleTouchDownZoomOut"/>
<Image x:Name="Blob2Pin" Height="50" Width="50" Source="Icons\pin_black_128.png" Canvas.Left="480" TouchDown="handleTouchDownPin"/>
<Image x:Name="Blob2DragDrop" Height="40" Width="46" Source="Icons\dragdrop.png" Canvas.Left="430" TouchDown="handleTouchDownDragDrop"/>
<Image x:Name="Blob2Close" Height="40" Width="50" Source="Icons\delete_blob_128.png" Canvas.Left="535" TouchDown="handleTouchDownClose"/>
<Image x:Name="Blob2Album" Height="40" Width="50" Source="Icons\album_128.png"/>
<Label x:Name="Blob2AlbumName" Content="Label" Width="250" Height="40" Canvas.Left="52" FontSize="26.667" Canvas.Top="-4" FontWeight="Bold" FontStyle="Italic"/>
</Canvas></s:ScatterViewItem>
</s:ScatterView>
</Viewbox>
</s:ScatterViewItem>
</s:ScatterView>
The two depending Methods onDrop and OnDragPreviewTouchDown look like this:
private void OnDragSourcePreviewTouchDown(object sender, TouchEventArgs e)
{
if (allowDragDrop == true)
{
if (e.OriginalSource is Image)
{
if ((e.OriginalSource as Image).Parent is ScatterViewItem) // prevent that image of Hederline is handled as foto
{
Image foto = (Image)e.OriginalSource;
string fotoID = (string)foto.DataContext;
ScatterViewItem draggedElement = (ScatterViewItem)(e.OriginalSource as Image).Parent;
double width = draggedElement.ActualWidth;
double height = draggedElement.ActualHeight;
double orientation = draggedElement.ActualOrientation;
ScatterViewItemDataContext context = (ScatterViewItemDataContext)draggedElement.DataContext;
context.originCenter = draggedElement.ActualCenter;
ScatterView dragSource = (ScatterView)draggedElement.Parent;
ScatterViewItem clonedDraggedElement = createScatterViewItemClone(width, height, orientation, context, fotoID);
// Create the cursor visual.
ContentControl cursorVisual = new ContentControl()
{
Content = clonedDraggedElement
};
// Create a list of input devices. Add the touches that
// are currently captured within the dragged element and
// the current touch (if it isn't already in the list).
List<InputDevice> devices = new List<InputDevice>();
devices.Add(e.TouchDevice);
foreach (TouchDevice touch in draggedElement.TouchesCapturedWithin)
{
if (touch != e.TouchDevice)
{
devices.Add(touch);
}
}
SurfaceDragCursor startDragOkay =
SurfaceDragDrop.BeginDragDrop(
dragSource, // The ScatterView object that the cursor is dragged out from.
draggedElement, // The ScatterViewItem object that is dragged from the drag source.
cursorVisual, // The visual element of the cursor.
draggedElement, // The data attached with the cursor.
devices, // The input devices that start dragging the cursor.
System.Windows.DragDropEffects.Move); // The allowed drag-and-drop effects of the operation.
// This if-clause causes, that the scatterviewitems are not deleted on the dragsource!
if (startDragOkay != null)
{
// Set e.Handled to true, otherwise the ScatterViewItem will capture the touch
// and cause the BeginDragDrop to fail.
e.Handled = true;
// Hide the ScatterViewItem.
draggedElement.Visibility = Visibility.Hidden;
}
}
}
}
}
private void OnDrop(object sender, SurfaceDragDropEventArgs e)
{
e.Handled = false;
Console.WriteLine(sender.ToString());
if (sender is ScatterView)
{
// Get drag source SV and drop SV
ScatterView dropScatterView = sender as ScatterView;
ScatterView dragSource = (ScatterView)e.Cursor.DragSource;
// Receive dragged Element from Cursor
ScatterViewItem draggedElement = (ScatterViewItem)e.Cursor.Data;
Image foto = (Image)draggedElement.Content;
// Get informations to clone dragged item
string fotoID = (string)foto.DataContext;
double width = draggedElement.ActualWidth;
double height = draggedElement.ActualHeight;
double orientation = draggedElement.ActualOrientation;
ScatterViewItemDataContext context = (ScatterViewItemDataContext)draggedElement.DataContext;
// Clone dragged item
ScatterViewItem clonedDraggedElement = createScatterViewItemClone(width, height, orientation, context, fotoID);
clonedDraggedElement.Center = e.Cursor.GetPosition(dropScatterView);
// Remove Item from Drag-Source
dragSource.Items.Remove(draggedElement);
// Item was droppeded in the same Blob
if (dragSource.Equals(dropScatterView))
{
dropScatterView.Items.Add(clonedDraggedElement);
// Update Center of Blob with Animation
PointAnimation pa = new PointAnimation();
pa.From = e.Cursor.GetPosition(dropScatterView);
pa.To = context.originCenter;
pa.Duration = TimeSpan.FromMilliseconds(500);
pa.FillBehavior = FillBehavior.HoldEnd;
clonedDraggedElement.BeginAnimation(ScatterViewItem.CenterProperty, pa);
}
else if (dropScatterView.Equals(MainScatterView) == false) // Foto was dropped to another Blob!
{
BlobInfo blobInfoDropSV = (BlobInfo)dropScatterView.DataContext;
// Add new fotoID to array of fotoIDs
blobInfoDropSV.fotoIDs.Add(fotoID);
// Add dragged foto to grid of Blob
FotoSampler fotoSampler = new FotoSampler();
Image dropFoto = fotoSampler.getImageByFotoID(fotoID);
ScatterViewItem sviToDrop = calculateFotoInGridPosition(blobInfoDropSV.fotoIDs.Count-1, dropFoto);
dropScatterView.Items.Add(sviToDrop);
PointAnimation pa = new PointAnimation();
pa.From = e.Cursor.GetPosition(dropScatterView);
pa.To = sviToDrop.Center;
pa.Duration = TimeSpan.FromMilliseconds(500);
pa.FillBehavior = FillBehavior.Stop;
sviToDrop.BeginAnimation(ScatterViewItem.CenterProperty, pa);
// refresh drag-Blob
BlobInfo blobInfoDragSV = (BlobInfo)dragSource.DataContext;
removeFotosFromBlob(dragSource);
int nbrOfFotosBeforeRefresh = blobInfoDragSV.fotoIDs.Count;
int idOfFotoToDelete = 0;
for (int i = 0; i < nbrOfFotosBeforeRefresh; i++) // remove FotoID from List of FotoIDs
{
if (blobInfoDragSV.fotoIDs[i].Equals(fotoID) == true)
{
idOfFotoToDelete = i;
}
}
blobInfoDragSV.fotoIDs.RemoveAt(idOfFotoToDelete); // delete draggedElement
createFotosInBlob(blobInfoDragSV.blobNbr, blobInfoDragSV.fotoIDs, blobInfoDragSV.zoomLevel); // calculate and order fotos again
// send Message mit Item to User
TcpClient client = new TcpClient(blobInfoDropSV.user.ip);
client.sendeNachricht("01#"+fotoID+"#");
}
}
}
I really tried a lot to solve this problem but nothing results in a comfortable solution.
I've recognized, that the ScatterView-Property Background has to be defined. Only if this property is set, events like the SurfaceDragDropEventArgs can be catched. Crazy!