I recently created a new navigation bar using bootstrap. Please note that I am VERY NEW - a novice to bootstrap. When clicking on the links within the navigation bar, the links open a new window. I want the links to open within the same window.
I read somewhere that it may be individual computer settings and I changed my setting in the control panel to ensure that it is checked to "open in current window" but this doesn't seem to work. I also tried adding target=_"self" in the links as well but that seems to break the link altogether.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Company Page Demo</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<style>
.container-fluid {
padding: 60px 50px;
}
.carousel-control.right, .carousel-control.left {
background-image: none;
color: #d3d3d3a4;
}
.carousel-indicators li {
border-color: #006272;
text-align: right;
float: center;
right: 2% !important;
left: inherit;;
}
.carousel-indicators li.active {
background-color: #d3d3d3a4;
}
.navbar {
margin-bottom: 0;
background-color: #006272;
z-index: 9999;
border: 0;
font-size: 12px !important;
line-height: 1.42857143 !important;
letter-spacing: 2px;
border-radius: 0;
font-family: Montserrat, sans-serif;
}
.navbar li a, .navbar .navbar-brand {
color: #fff !important;
}
.navbar-nav li a:hover, .navbar-nav li.active a {
color: #006272 !important;
background-color: #fff !important;
}
.navbar-default .navbar-toggle {
border-color: transparent;
color: #fff !important;
}
</style>
</head>
<body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="60">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li>HOME</li>
<li>PAY</li>
<li>BENEFITS</li>
<li>POLICIES</li>
<li>TA/TM</li>
<li>MANAGER'S TOOLKIT</li>
<li>HR TEAM</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
I don't see anything in the code that suggests it should open in a new window so it might be a browser setting. That said, you have a slight error in your syntax.
This will open in a new window:
Link Text
This will open in the same window:
Link Text
Note that the _ is inside the quotes.
Related
Am still learning on Django and wkhtml2pdf using and I need some help please, I have searched and try much solutions but they don't work with me, I want to set a background image and page number in the footer(I Have use wkhtml2pdf library):
Here it's the code
<!doctype html>
<html lang="en">
<head>
<style type="text/css">
body{
background-image: url('data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEBLAEsAAD/...');
margin:0px;
background-size: cover;
background-position: left top;
padding-top:0px;
height: 1100px;
width: 900px;
}
#divb
{
font-size: 12px;
font-family: Arial;
}
div.footer {
display: block; text-align: center;
position: running(footer);
#page {
#bottom-center { content: element(footer) }
}
}
</style>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body style="border:0; margin: 0;">
<div id="divb">
<p><strong>Materials :</strong> {{ materiel }}</p>
.........(the rest of calling the data)
</div>
<div class='footer'>
Page <span id='page'></span> of
<span id='topage'></span>
<script>
var vars={};
var x=window.location.search.substring(1).split('&');
for (var i in x) {
var z=x[i].split('=',2);
vars[z[0]] = unescape(z[1]);
}
document.getElementById('page').innerHTML = vars.page;
document.getElementById('topage').innerHTML = vars.topage;
</script>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
<script>
window.load = function() {
window.status = 'render-pdf';
};
</script>
</body>
</html>
and here it's the result :
the was a white space between the background image and the origin page , also the number of page appear to me (Page undefined of undefined), How i can adjust the background-image correctly to filled out all the page without white space , also what' wrong with page number in the footer.
see the screenshoot please.
enter image description here
.Thanks In Advance for everyone here.
I fight with printing pdf from QTextDocument object with html format. I generate QString formatted code of html page and it works fine. To test it i make using QFile a html file which have to be printed and it look greats.
But pdf file looks completly different and i don't know why.
Code:
QString html = getHtmlPrintString(FVToPrint, currentCustomer);
QTextDocument document;
document.setHtml(html);
QFile qHtmlFile("D:\\Qt\\projects\\FVGeneratorV2\\fv\\"+QString::fromStdString(FVToPrint.getFVId()) +".html");
if(qHtmlFile.open(QIODevice::WriteOnly))
{
qHtmlFile.write(html.toUtf8());
qHtmlFile.close();
}
QPrinter printer(QPrinter::PrinterResolution);
printer.setOutputFormat(QPrinter::PdfFormat);
printer.setPageSize(QPageSize::A4);
QString fvname = "D:\\Qt\\projects\\FVGeneratorV2\\fv\\" + QString::fromStdString(FVToPrint.getFVId()) + ".pdf";
printer.setOutputFileName(fvname);
printer.setPageMargins(QMarginsF(15, 15, 15, 15));
document.print(&printer);
Html file code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
<style type='text/css'>table, tr, td{border: solid 1px black; border-collapse:collapse;}</style>
</head>
<body>
<div style='width:100%; height:100%; margin:0; padding: 0;'>
<div style='float:left; border: solid 2px black; width:42%; margin-right:2%; margin-left:2%; padding:2%; height:5%;'>
<h2><b>FV_24.01.2022_666_1_480</h2></b>
</div>
<div style='float:left; padding:2%; margin-right:2%; border: solid 2px black; width:42%; height:5%;'>
24.01.2022
</div>
<div style='clear:both;'></div>
<div style='float:left; border: solid 2px black; width:42%; margin-right:2%; margin-top:1%; margin-left:2%; padding:2%; height:15%;'>
kunito</br> Nip: 8712314</br> Phone: 9123412</br> Email: mail#com</br>miejska 12</br>47821 krakow, Polska</br>
</div>
<div style='float:left; margin-top:1%; padding:2%; margin-right:2%; border: solid 2px black; width:42%; height:15%;'>
Customer: </br> Name: test </br> Nip: 12398401</br>miejska 27</br>81293 Krakow, Polska</br>
</div>
<div style='clear:both;'></div>
<div style=' margin: 1% 2% 0 2%; padding:2%; border: solid 2px black; width:90.5%; height:10%;'> Payment data: </br>online transfer</br> Account number: 8912384</br> Title: FV_24.01.2022_666_1_480
</div>
<div style=' margin: 1% 2% 0 2%; padding:2%; width:90.5%; height:30%;'>
<table style='width:100%;'><tr style='background-color:darkgray;' ><td>Nb.</td><td>Name</td><td>Um</td><td>Quantity</td><td>Price netto</td><td>Vat</td><td>Vat value</td><td>Price brutto</td></tr><tr><td>1</td><td>Bulka</td><td>pcs</td><td>1</td><td>1.012</td><td>8</td><td>0.088</td><td>1.1</td></tr><tr style='background-color:darkgray;' ><td colspan='5'></td><td>Netto sum</td><td>Vat sum</td><td>Sum</td></tr><tr><td colspan='5'></td><td>1.012</td><td>0.088</td><td>1.1</td></tr>
</table>
</div>
<div style=' margin: 1% 2% 0 2%; padding:2%; width:90.5%; height:5%;'>
To pay: 1.1 zl </br> Payed: 1.1 zl
</div>
<div style=' margin: 1% 2% 0 2%; padding:2%; width:90.5%; height:5%;'>
<div style='float:left; width: 20%; height:100%; '>
<p align='center'>............................</br>podpis pracownika</p>
</div>
<div style='float:left; width: 20%; height:100%; margin-left:50%; '>
<p align='center'>............................</br>podpis klienta</p>
</div>
</div>
</div>
</body>
</html>
How to pdf look:
pdf printed file
I am developing a form using Html and CSS. I have used grid to place my textboxes. But the problem I am facing is position of submit button. It is placed next to last textbox but I want it to be placed on the separate line at the end.
The complete code of my this form is:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form practice</title>
<style>
.container{
max-width: 1000px;
margin-left: auto;
margin-right: auto;
padding: 1em;
}
.wrapper{
box-shadow: 0 0 20px 0 rgba(72,94,116,0.7);
}
.wrapper > *{
padding: 1em;
}
.form-heading{
background-color: grey;
}
.form-heading h3{
text-align: center;
}
.contact form{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 10px;
}
.contact form label{
display: block;
}
.contact form p{
margin: 0;
}
.contact form .submit-btn{
grid-column: 25%;
}
.contact form button, .conntact form input{
width: 100%;
padding: 1em;
border: 1px solid;
}
.contact input[type=text]{
height: 30px;
width: 90%;
}
.contact form button{
background-color: grey;
color: white;
border: 0;
text-transform: uppercase;
}
.contact form button:hover, .contact form button:focus{
background-color: silver;
color: black;
outline: 0;
/*transition: background-color 1s ease-out; */
}
</style>
</head>
<body>
<div class="container">
<div class="wrapper">
<div class="form-heading">
<h3>Form</h3>
</div>
<div class="contact">
<form>
<p>
<label>First Name</label>
<input type="text" name="firstName">
</p>
<p>
<label>Last Name</label>
<input type="text" name="lastName">
</p>
<p>
<label>Email Address</label>
<input type="text" name="email">
</p>
<p>
<label>Phone Number</label>
<input type="text" name="phone">
</p>
<p class="submit-btn">
<button>Submit</button>
</p>
</form>
</div>
</div>
</div>
</body>
</html>
Please help me in this regard. Thank you for your help.
This does the trick in your case.
.submit-btn {
grid-row-start: 3;
grid-column-start: 3;
grid-column-end: 3;
}
But a few suggestions:
Change your <p> with <div>. <p> is for paragraphs of text.
Don't use grid for displaying a grid. It's very unflexible and makes stuff hard to read. Use display: flex instead. If you want to see a sample on how to use flex to display a grid you might wanna check out the Bootstrap grid system. (Basic grid and implementation for form. Actual Bootstrap CSS)
There is no real reason to invent your own grid system at all. Bootstrap's Grid system is just one of many already working grids. :)
You Should Follow This Grid Layout Documentatoin for manage form element into specific position.
Question
How do I create a <paper-button> group UI element with the following characteristics?
It is a group of <paper-button> elements.
It is stacked vertically.
Each button fills the entire width of the container (without margin, padding or horizontal white space).
There is no margin, padding or vertical white space between the buttons.
Examples:
The effect I am seeking is analogous to <body fullbleed> only scoped to the button's parent container.
Similar to the Bootstrap "Vertical variation" shown here.
If you have Google Drive, hover your mouse over the menu items in the left margin of the page. (Under the red button labeled "New.")
Do a Google search. The dropdown menu that appears from the search field predictively suggesting possible questions you want is also another example of the look/feel I am after.
Attempts:
See below code for my previous attempts to:
stack vertical buttons using <p> tags and
use a <paper-menu>.
Research:
Flexbox documentation
Paper button documentation
Paper menu documentation
Demo: JS Bin
Code:
<!doctype html>
<html>
<head>
<title>polymer</title>
<script src="https://rawgit.com/webcomponents/webcomponentsjs/master/webcomponents-lite.js"></script>
<link rel="import" href="https://rawgit.com/Polymer/polymer/master/polymer.html">
<link rel="import" href="https://rawgit.com/PolymerElements/paper-button/master/paper-button.html">
</head>
<body>
<dom-module id="x-test" noscript>
<template>
<!-- Attempt #1: Stacking Buttons -->
<div id="container">
<p><paper-button>One</paper-button></p>
<p><paper-button>Two</paper-button></p>
<p><paper-button>Three</paper-button></p>
</div>
<!-- Attempt #2: <paper-menu> -->
<paper-menu>
<paper-item>One</paper-item>
<paper-item>Two</paper-item>
<paper-item>Three</paper-item>
</paper-menu>
</template>
</dom-module>
<x-test></x-test>
</body>
</html>
I'm super tired right now, will test an example tomorrow but I think theoretically all you'd have to do is:
<link href="bower/iron-flex-layout/iron-flex-layout.html" rel="import" >
<div class="layout vertical">
<paper-button>foo</paper-button>
<paper-button>foo</paper-button>
</div>
paper-button {
width: 100%;
margin:0;
}
Overview of new way of defining layout attributes with classes with the help of iron-flex-layout.html:
http://embed.plnkr.co/1UKMQz/preview
I got my Vertical and Horizontal mixed up when i wrote this answer:)) so below is for horizontal Stacking. But thinking about its pretty much the same except for couple of changes.
So created a
.vertical-section {
min-width: 130px;
}
and make the buttons inline or flex;
eg
paper-button {
display: inline-block; //or inline-flex
margin-bottom: 24px;
}
To get rid of padding/margin etc see below because it should be the same
I played around with the Css for the paper-buttons demo so the above changes will work
For Horizontal stacking
Looking at the demo here paper-buttons and right click to view frame source the code goes like this
<style is="custom-style">
.horizontal-section {
min-width: 130px;
}
paper-button {
display: block;
margin-bottom: 24px;
}
</style>
<div>
<h4>Raised</h4>
<div class="horizontal-section">
<paper-button tabindex="0" raised>button</paper-button>
<paper-button tabindex="0" raised class="colorful">colorful</paper-button>
<paper-button tabindex="0" raised disabled>disabled</paper-button>
<paper-button tabindex="0" raised noink>noink</paper-button>
<paper-button tabindex="0" raised class="colorful custom"><iron-icon icon="check"></iron-icon>ok</paper-button>
<paper-button tabindex="0" raised class="custom"><iron-icon icon="clear"></iron-icon>cancel</paper-button>
</div>
</div>
</div>
That gives you something like this
Now as you dont want any margin/padding etc and fill the entire width you need to amend the css a bit and inspect the button element.
Take out the padding:24px; from the .horizontal-section eg padding:0;
And take out the paper-button:not margin-bottom:24px; and margin:0 0.25em; from paper-button css
and you end up with this
As you are using a template i beileve the styling may need to go before that.
Sorry i cant do you a demo, i managed to do a demo for someone in 0.5 but not yet for V.1 but its easy to understand the method above.
Demo: JS Bin
Code:
<head>
<meta charset="utf-8">
<title>Polymer Bin</title>
<base href="http://element-party.xyz">
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="all-elements.html">
</head>
<body>
<x-element></x-element>
<dom-module id="x-element">
<style>
paper-material {
xheight: 400px;
width: 400px;
background-color: #ff1101;
margin: 0 auto;
}
paper-button {
width: 100%;
margin: 0;
}
paper-button:hover {
background-color: black;
color: white;
}
</style>
<template>
<paper-material id="material" elevation="3">
<div class="layout vertical">
<paper-button>One</paper-button>
<paper-button>Two</paper-button>
<paper-button>Three</paper-button>
</div>
</paper-material>
</template>
<script>
Polymer({
is: 'x-element',
behaviors: [
Polymer.NeonAnimationRunnerBehavior,
],
properties: {
animationConfig: {
value: function() {
return {
'entry': {
name: 'slide-down-animation',
node: this.$.material
},
'exit': {
name: 'slide-up-animation',
node: this.$.material
}
}
}
}
},
ready: function() {
this.playAnimation('entry');
}
});
</script>
</dom-module>
</body>
</html>
I have a popover functionality to be implemented in my project developed using ember js. I have a button, which when clicked should show a popover with a list of action menus.
I tried an example with bootstrap popover, which looks good to our cause, but I am unable to use that as we are not using bootstrap lib and don't want to include it only for this popover feature.
Is there any inbuilt support from ember js on the popover function yet (we are using ember v0.2.3)? I know it has a modal implementation but that will diable all other functions on the page until closed.
If you are aware of any custom popover impls that can be ported for trial, please let me know.
Thanks!
A nested component would be ideal for this. Rendering into an outlet like the modal examples doesn't make much sense to me.
You will need to handle a click event in your component's .js file.
Use a property on the component like isOpen to keep track of whether the popover should be shown or not.
Use an if isOpen in your component's template to control whether the child component (the popover) gets rendered or not.
Edit: Working JSBin
HTML:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="//builds.emberjs.com/tags/v1.11.3/ember-template-compiler.js"></script>
<script src="//builds.emberjs.com/tags/v1.11.3/ember.debug.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<script type='text/x-handlebars'
data-template-name='application'>
<p>The element below is a component.<br><br><br><br><br><br><br></p>
{{popover-item text='click or hover for popover' class='popover-wrapper'}}
</script>
<script type='text/x-handlebars'
data-template-name='components/popover-item'>
<a href='#' class='popover-link'>{{text}}</a>
{{#if isOpen}}
{{popover-menu isOpen=isOpen}}
{{/if}}
</script>
<script type='text/x-handlebars'
data-template-name='components/popover-menu'>
{{#if isOpen}}
<div class='popover'>
<ul>
<li><a href='#'>popover item one</a></li>
<li><a href='#'>popover item two</a></li>
<li><a href='#'>popover item three</a></li>
</ul>
</div>
{{/if}}
</script>
</body>
</html>
Javascript:
App = Ember.Application.create();
App.Router.map(function(){
return [];
});
App.PopoverItemComponent = Ember.Component.extend({
isOpen: false,
click: function() {
this.toggleProperty('isOpen');
},
openPopover: function() {
this.set('isOpen', true);
}.on('mouseEnter'),
closePopover:function() {
this.set('isOpen', false);
}.on('mouseLeave')
});
CSS (very very rough)
* { box-sizing: border-box; }
body { font-family: sans-serif; }
a {
text-decoration: none;
color: #000;
}
.popover-link {
display: inline-block;
width: auto;
padding: 10px;
background: #6FAEEC;
}
.popover-link:hover {
background: #70B5F9;
}
.popover-wrapper {
position: relative;
}
.popover-link {}
.popover {
border: 1px solid #ddd;
position: absolute;
bottom: 40px;
background: #fff;
padding: 0;
box-shadow: 3px 3px 9px -4px rgba(0,0,0,0.75);
}
.popover ul {
list-style:none;
margin: 0;
padding: 0;
}
.popover a {
display: block;
padding: 5px 10px;
vertical-align:middle;
border-bottom: 1px solid #efefef; #efefef;
}
.popover a:hover {
background: #efefef;
}