i am generating html from an xml using xslt 1.0, but when i pass the html from one transformation to another ;
it is getting the content displayed and not preserving the actual html with nodes
<tr>
<td>Text1</td>
<td>Text2</td>
<td>Text3</td>
<td>Text4</td>
<tr>
is displaying as Text1Text2Text3Text4, but it should not be
XSLT Code code that i am using is
<ns1:EmailContentAsString>
<div class="rvps8"><table border='1' cellpadding='4' cellspacing='0' style='border-width: 0px; border-collapse: collapse;margin-left:48px'><tr valign='top'><td width='96' valign='top' style='border-width : 1px; border-color: #000000; border-style: solid; background-color: #cccccc;'><p><span class='rvts8'>NV Business Id</span></p></td><td width='230' valign='top' style='border-width : 1px; border-color: #000000; border-style: solid; background-color: #cccccc;'><p><span class='rvts8'>Business Entity Name</span></p></td><td width='180' valign='top' style='border-width : 1px; border-color: #000000; border-style: solid; background-color: #cccccc;'><p><span class='rvts8'>Actions/Amendments</span></p></td><td width='79' valign='top' style='border-width : 1px; border-color: #000000; border-style: solid; background-color: #cccccc;'><p><span class='rvts8'>File date</span></p></td></tr><tr><td colspan='4'><table cellspacing='0' cellpadding='0'><xsl:apply-templates select="/ns2:ExtendedCorpDetails/ns2:ExtendedFinalCorpDetails"/></table></td></tr></table></div>
</ns1:EmailContentAsString>
<xsl:apply-templates select="/ns2:ExtendedCorpDetails/ns2:ExtendedFinalCorpDetails"/>
is used for generating rows shown above
resolved this by modifing the html tags '<' with &lt;
Related
I found this site for Bootstrap pretty scrollbars. I tried to apply it to my div but nothing happened :
<style>
#collapseVehicules {
height:250px !important;
}
</style>
<div class="collapse scrollbar-primary" id="collapseVehicules" style="padding-left: 15px;padding-right: 15px;overflow-y: scroll;">
<table id="list" class="table table-borderless table-striped table-sm" style="margin-bottom: 0px;width:100%;">
...
</table>
</div>
So what is wrong ?
You need to add the styles in your css. scrollbar-primary isn't a bootstrap css class style.
As shown on the page, they created the scrollbar-primary css class style.
.scrollbar {
margin-left: 30px;
float: left;
height: 300px;
width: 65px;
background: #fff;
overflow-y: scroll;
margin-bottom: 25px;
}
.scrollbar-primary::-webkit-scrollbar {
width: 12px;
background-color: #F5F5F5;
}
.scrollbar-primary::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color: #4285F4;
}
I want to create tooltip with vue's style binding. I am thinking to use attr() function from CSS which takes attribute value which is a reactive object dynamicColor. The code which I have now is:
<div class="test">
<span class="marker" :style="{'background': dynamicColor}" :color="dynamicColor">
smallText
</span>
</div>
<style>
div.test span.marker {
position: absolute;
width: 28px;
height: 15px;
border-radius: 2px;
display: block;
top: -25px;
font-size: 10px;
text-align: center;
}
div.test span.marker::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 6px;
border-style: solid;
border-color: attr(color) transparent transparent transparent;
}
</style>
But it does not work. I don't want to use bootstrap due to some reasons. I tried to look if I can find for pseudo selector in vue style binding but could not find much. Any ideas on how to achieve this? Thanks.
As suggested by #Stephan-v in comments, I added separate element for arrow. The final code looks like something below:
<div class="test">
<span class="markertip" :style="{'border-color': dynamicColor + ' transparent transparent transparent'}"></span>
<span class="marker" :style="{'background': dynamicColor}">
smallText
</span>
</div>
<style>
div.test span.marker {
position: absolute;
width: 28px;
height: 15px;
border-radius: 2px;
display: block;
top: -25px;
font-size: 10px;
text-align: center;
}
div.test span.markertip {
content: "";
position: absolute;
top: -45%;
margin-left: -5px;
border-width: 6px;
border-style: solid;
}
</style>
Rendering a table, with boarders, to PDF using phantomjs leaves each individual cell bordered but with a gap between each cell. The table is displayed correctly, without such gaps, on a web page.
in my CSS I've tried setting:
border-collapse: collapse;
border-spacing: 0px 0px;
to no avail, I need to get rid of those gaps between cells in my PDF.
Any ideas would be gratefully received.
Yours Allan
Be sure to add the border-spacing and border-collapse rules to the <table> and not the <td>. This is my phantomjs-specific rules:
.table {
border: 1px solid black;
border-spacing: 0px 0px;
border-collapse: collapse;
}
.table th,
.table td {
padding: 5px;
border: 1px solid black;
margin: 0;
}
Note that this is a bit different than 'normal' (not phantomjs-pdf) css where your border-collapse can be located on the <td> element.
Here is my code:
HTML:
<div class="main">
<img class="in" alt="" src="https://lh6.googleusercontent.com/---lrEvAvGGs/U2i572OasiI/AAAAAAAACVw/zKSuueH1n5Q/s720/1024x1024.jpg">
</div>
CSS:
.main{
height:240px;
width: 240px;
background: #F00;
border: 1px solid #CCC;
border-radius: 30px;
position: relative;
overflow: hidden;
}
.in {
width: 240px;
height: 240px;
}
Live example: Jsfiddle
As you see in the example, there is a little background color (red) around at the corners of the image.
How to remove these but keeping border-radius attribute?
Just remove the styles
background: #F00;
border: 1px solid #CCC;
from the class main.
http://jsfiddle.net/3Nzp3/3/
see this fiddle
Remove both line
background: #F00;
border: 0px solid #CCC;
just remove background: #F00; and border: 1px solid #CCC; from your class main. You will get your output
like
.main{
height:240px;
width: 240px;
border: 0px;
border-radius: 30px;
position: relative;
overflow: hidden;
//you can use border: 0px;
}
just remove the code below from the main class
background: #F00;
border: 1px solid #CCC;
i think this will help you .
I have applied rounded corners styles to my ASP.Net button & text box controls and also to fieldset and legend.
Here is my CSS-
fieldset
{
width:605px;
margin-bottom:20px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
}
fieldset legend
{
background: #606060 url(images/bluelines.gif) repeat-x center left;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
margin: 7px;
padding: 10px 10px 0px 5px;
}
fieldset legend:hover{
background: #606060 url(images/blue-lines.gif) repeat-x center left;
}
fieldset legend img
{
padding: 0px 6px 0px 0px;
position: relative;
bottom: 5px;
}
.txtBox
{
border: 1px solid #DDDDDD;
height:15px;
width: 200px;
padding: 5px;
background: #ffffff;
-moz-border-radius: 5px;
border-radius:5px;
-webkit-border-radius: 5px;
}
.txtBox:focus{
border: 2px solid #50cff1;
box-shadow: 5px 1px 1px 5px #000;
}
.buton{
background: #50cff1 url(images/nav-act.gif) repeat-x center left;
border: none;
color: #ffffff;
border-radius:5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.buton:hover
{color: #000000;}
Here is skin code-
<asp:TextBox runat="server" CssClass="txtBox" SkinID="textBox" />
<asp:Button runat="server" CssClass="buton" SkinID="button" />
But these styles aren't working in Internet Explorer(8,7,6). Please let me know any solution so that all of these styles will apply on these elements(asp.net button & textbox, fieldset & legend) in IE too!
Regards,
nzahra
IE8 and below don't support CSS3, only IE9 does. To mimic CSS3, you'll need to use filters, .htc files (behaviors), images, or some combination thereof for any CSS3.
You can use conditional comments to hide the IE stuff from other browsers. Here's some info on filters, and one way of rounding corners in IE..