I have a full-display revolution-slider with afew of layers on a Webpage. Any time I resize the height of the viewport, the layers moving from the left Side to the center. How can I stop this behavior?
This is my code:
`
<div class="rev-slider-mask"></div>
<!-- main text layer -->
<div class="tp-caption tp-resizeme sliderMainText"
id="slide-layer-01"
data-frames='[{"delay":200,"speed":2000,"frame":"0","from":"y:[100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;opacity:0;","mask":"x:0px;y:[-100%];s:inherit;e:inherit;","to":"o:1;","ease":"Power2.easeInOut"},{"delay":"wait","speed":500,"frame":"999","to":"auto:auto;","ease":"Power3.easeInOut"}]'
data-type="text"
data-whitespace="nowrap"
data-x="['left','left','left','left']" data-hoffset="['70','20','50','30']"
data-y="['middle','middle','middle','middle']" data-voffset="['50','100','85','120']"
data-width="auto"
data-height="auto"
data-fontsize="['70','60','60','40']"
data-lineheight="['80','80','80','50']"
data-letterspacing="['0','0','0','0']"
data-responsive="off"
data-responsive_offset="off"
data-paddingtop="['0','0','0','0']"
data-paddingbottom="['15','8','8','8']"
data-paddingright="['0','0','0','0']"
data-paddingleft="['0','0','0','0']"
style="text-shadow: 0 0 20px rgba(0,0,0,0.3); font-weight: 700; color:#fff;">Some Text to show!
</div>
<!-- btn layer -->
<div class="tp-caption tp-resizeme btn_1"
data-actions='[{"event":"click","action":"scrollbelow","offset":"3130px","delay":"","speed":"300","ease":"Linear.easeNone"}]'
id="slide-layer-03"
data-x="['left','left','left','left']" data-hoffset="['70','20','50','30']"
data-y="['middle','middle','middle','middle']" data-voffset="['260','310','282','225']"
data-whitespace="nowrap"
data-type="button"
data-responsive="off"
data-responsive_offset="off"
data-frames='[{"delay":1200,"speed":1000,"frame":"0","from":"y:[100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;opacity:0;","mask":"x:0px;y:[-100%];s:inherit;e:inherit;","to":"o:1;","ease":"Power2.easeInOut"},{"delay":"wait","speed":300,"frame":"999","to":"auto:auto;","ease":"Power3.easeInOut"}]'
data-textAlign="['center','center','center','center']" style="line-height: 1; padding: 10px 15px; font-size: 16px;font-weight: 600;">Button_Text
</div>
</li>
`
I have searched for parallax-parameters, but I couldn't find any useful ones.
I am using jsreport with my Asp.Net Core MVC project. It is working all right except for page numbers.
I am using a partial view for footer.
Here is the partial view:
<table style="font-size: 10px; padding-bottom: 5px; padding-top: 0in; padding-left: 0.25in; padding-right: 0.25in;">
<tbody>
<tr>
<td style="width: 1.5in; text-align: left;"><b>#($"{DateTime.Now}")</b></td>
<td style="width: 8.2in; text-align: center;">Brand Name</td>
<td style="width: 1.5in; text-align: right;">Page <span class="pageNumber"></span> of <span class="totalPages"></span></td>
</tr>
</tbody>
</table>
Unfortunately, the page number part is not working at all. I just see "Page of " in the rendered PDF.
I am using the Chrome-PDF recipe and do not wish to use pdf-utils for the footer.
Even if I put the following line in the main report body view, I still do not get any page numbers.
Page <span class="pageNumber"></span> of <span class="totalPages"></span>
Any help will be appreciated.
The header html needs to be passed to the Template.Chrome.HeaderTemplate property, you need to also enable header printing using Template.Chrome.DisplayHeaderFooter and also make a space for the header using margins.
Here is how the controller action can look like
[MiddlewareFilter(typeof(JsReportPipeline))]
public async Task<IActionResult> InvoiceWithHeader()
{
var header = await JsReportMVCService.RenderViewToStringAsync(HttpContext, RouteData, "Header", new { });
HttpContext.JsReportFeature()
.Recipe(Recipe.ChromePdf)
.Configure((r) => r.Template.Chrome = new Chrome {
HeaderTemplate = header,
DisplayHeaderFooter = true,
MarginTop = "1cm",
MarginLeft = "1cm",
MarginBottom = "1cm",
MarginRight = "1cm"
});
return View("Invoice", InvoiceModel.Example());
}
And how the Header view
<div style='text-align:center; font-size: 10px; width:100%'>Page number <span class="pageNumber"></span> of <span class="totalPages"></span></div>
You can find an example repository here
https://github.com/jsreport/jsreport-dotnet-example-webapp
I have:
<li class="nav-item">
<b-popover
target="search-button"
placement="topleft"
title="Search"
triggers="click"
content="Placement"
container="nav-container"
>
<template slot="title">Interactive Content</template>
<template slot="content">Interactive Content</template>
</b-popover>
<a class="nav-link" href="#" title="Popover Title" id="search-button">
<i class="material-icons md-48">search</i>
</a>
</li>
I want to add a class to the popover, but ideally have it scoped to this component. When I try to do:
<style scoped>
.nav {
background: white;
border-top: 0.1px solid silver;
}
.nav-pills .nav-link {
border-radius: 0;
}
.popover {
width: 100%;
background: red;
}
</style>
It seems to have no impact on the actual popover.
Version 2.0.0-rc.26 (which is to be released soon) adds support for tooltip/popover variants as well as applying custom classes to the tooltip/popover root element.
You can see a preview at https://bootstrap-vue.netlify.com/ (and will appear at https://bootstrap-vue.js.org/ once released)
Its not possible to give class to <b-popover>, you can read here.
But as I mentioned in comment you can use querySelector and give class or styling.
Cheers.
I did the following to make my navigation bar always collapsed. However, when you click on it, it's taking up the whole width of the screen. And when you click on Menu, the dropdown is occupying a small part only.
What I want is when I click the navigation icon in the right, it will expand but will not take the whole width of the screen. Instead I want it to display as it displays when the screen width is small just like in the picture
#media (max-width: 2000px) {
.navbar-header {
float: none;
}
.navbar-left,.navbar-right {
float: none !important;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
navbar-fixed-top {
top: 0;
border-width: 0 0 1px;
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin-top: 7.5px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.collapse.in{
display:block !important;
}
}
This is what I need:
Ok, so I'm still not sure why you want a menu inside a menu, but you could use a nav instead of a dropdown if you're looking for full width. The dropdown has a width of 160px. Use collapse to show/hide the submenu.
<a href="#" data-toggle="collapse" data-target="#menu1" role="button" aria-haspopup="true" aria-expanded="false">
<span class="glyphicon glyphicon-menu-hamburger" aria-hidden="true"></span>
<span>Menu</span>
</a>
<ul class="nav collapse" aria-labelledby="menu" id="menu1">
<li>
<div class="menu-content">
<ul class="nav nav-stacked">
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li>Item4</li>
</ul>
</div>
</li>
</ul>
http://bootply.com/cv3l6gxjZn
I have an <a> tag in html, and I want it to be ellipsis. But when I add a <div> inside the <a> tag, 'text-overflow' doesn't work.
HTML:
<div class=boxed>
<h1>text-overflow Attribute Sample</h1>
<a href="#" class="caption">
<!----><div style="width:100px;height:20px;border: 1px solid red"></div>
Each box (div element) below contains the following text:
</a>
</div>
CSS:
div.boxed {
width: 200px;
height: 200px;
border: 1px solid blue;
font: 14px Times New Roman, serif;
overflow:hidden;
'position:relative;
}
a.caption {
overflow:hidden;
white-space: nowrap;
text-overflow: ellipsis;
display:block;
text-decoration:none;
float:left;
text-align:left;
}
http://jsfiddle.net/nPzsy/
After removing the <div>, the 'text-overflow' works again.
First of all, div is a block level element and a is an inline level element, so you cannot use a div inside an anchor tag b...so you should use any other inline tag (like small , span etc)
Secondly, if you have to use a div inside div, you can wrap your text in another tag like this ....
<div class=boxed>
<h1>text-overflow Attribute Sample</h1>
<div class="caption">
<!----><div style=" width:100px;height:20px;border: 1px solid red"></div>
<span class='textTrunc'>Each box (div element) below contains the following text:</span>
</div>
and css of class textTrunc:
.textTrunc{
overflow:hidden;
white-space: nowrap;
text-overflow: ellipsis;
display:block;
}