I'm using the Tabs component of thereact-bootstrap framework. When I put an example:
<div>
<p> AAAAAAA </p>
</div>
inside Tab I don't see anything in this tab.
<Tabs defaultActiveKey="profile" id="uncontrolled-tab-example">
<Tab eventKey="home" title="Home">
<div>
<p>sssssssssssssssssss</p>
</div>
</Tab>
<Tab eventKey="profile" title="Profile">
<div>
<img src="https://cdn.pixabay.com/photo/2019/08/03/12/22/hot-air-balloons-4381674__340.jpg" alt="picture"/>
</div>
</Tab>
<Tab eventKey="contact" title="Contact" disabled>
</Tab>
</Tabs>
Demo here: https://stackblitz.com/edit/react-ufa6nq?file=index.js
You have added three bootstrap css in your project. Two css links are added in index.html file and one in index.js file.
Remove import 'bootstrap/dist/css/bootstrap.css'; line from index.js file and remove one of the bootstrap.min.css link from index.html file.
Here I have updated the working code for you.
https://stackblitz.com/edit/react-bootstrap-tabs-3gt7r7
Hope this will work for you!
Here the issue is react-bootstrap version.
You have react-bootstrap v0.32.4, which is based on bootstrap 3. So removing bootstrap 4 from your code will fix the issue.
Demo
To work with bootstrap 4.x you need to install react-bootstrap v1.0.0-beta.10.
You can check this here, on the header itself.
Note: By default stackBlitz is installing react-bootstrap v0.32.4 (the older version), and not the new version. For this you can raise a query in stackBlitz community.
Related
I recently deployed a website from Netlify using a demo GitHub repo that I copied. Although it seems pretty straightforward at first, I know too little about JS, HTML and CSS to continue. I'm only looking to host three pages that contain only text and hyperlinks, but I cannot for the life of me figure out how to implement more than one page with this particular code base I started with. Here's the index.js script:
import Head from 'next/head'
import Header from '#components/Header'
import Footer from '#components/Footer'
export default function Home() {
return (
<div className="container">
<div className="container-1">
<Head>
<title>Cool Page Title</title>
<link rel="icon" href="/coolicon.ico" />
</Head>
<div className="box-1">
<h3>Links</h3>
<p>
Current page <br />
Page 2 <br />
Another Page
</p>
</div>
<div className="box-2">
<h3>My cool page</h3>
<p>
Site under construction. <br />
For all inquiries, please call 555-5555
</p>
</div>
</div>
<div className="container-2">
<Footer />
</div>
</div>
)
}
The syntax is the really tricky part for me. The Home() function seems to return the html for the home page, so then how would I implement a second page and have the links change them out? Would a switch/case statement work here?
Okay, so I figured out what I didn't previously understand. Turns out I was (unknowingly) using Next.JS. To handle multiple pages, I just created separate files, identical to the index.js file, but with a different file and function name, and then linked to them using:
<Link href="/">Home</Link> <br />
<Link href="/newpage">New Page</Link> <br />
Where the first link directs you to the index page and the second takes you to the page titled "newpage." Guess it really was that simple.
Oh, and I also had to include this import statement at the beginning of each file that used links:
import Link from 'next/link';
Hi i'm facing the problem with printing using vue component called vue-html2pdf
The problem as follows:
the pagination does not break the page when content added. on print page becomes 3
the first page is printing as blank on click of download
Here is the setting i'm using for printing:
<vue-html2pdf
:show-layout="false"
:float-layout="true"
:enable-download="true"
:preview-modal="true"
:paginate-elements-by-height="1400"
filename="nightprogrammerpdf"
:pdf-quality="2"
:manual-pagination="false"
pdf-format="a4"
:pdf-margin="10"
pdf-orientation="portrait"
pdf-content-width="800px"
#progress="onProgress($event)"
ref="html2Pdf"
>
Here is a demo: https://codesandbox.io/s/vue-html-to-pdf-example-forked-3lijbr?file=/src/App.vue:95-532
After playing around with your codesandbox, I found solution:
remove section, then the first blank page gone.
<!--
<section slot="pdf-content">
<ContentToPrint />
</section>
-->
<ContentToPrint slot="pdf-content" />
but pagination of the new pdf still looks strange, to fix that remove the in ContentToPrint, than the pdf looks perfect to me.
<template>
<div style="margin: 12px 12px">
<img src="https://picsum.photos/500/300" />
<!-- <div> -->
<p>
<strong
><a href="https://www.nightprogrammer.com/" target="_blank"
>Nightprogrammer.com</a
></strong
I guess the library can't accept too much div.
Here is my modified codesandbox. pdf looks better if you open standalone page (https://1puw7d.csb.app)
https://codesandbox.io/s/vue-html-to-pdf-example-forked-1puw7d?file=/src/App.vue
Just replace the section element by a div and should fix it for you.
I have been loving using the ant design library for this project, but for some reason, I can't get the popovers to work. Here is a video of what I'm getting.
Here is the code
<Popover
content={
<div>
<p>hi</p>
</div>
}
title="Title"
>
<Button type="primary">Hover me</Button>
</Popover>
From your video, it doesn't look like you have set up antd properly because the button styling looks very odd.
You are probably missing the CSS import that allows antd components to work correctly check out this documentation: https://ant.design/docs/react/use-with-create-react-app
You need to add this line in your index.js or App.js: #import '~antd/dist/antd.css';
I'm building a web view with my layout using basic React setup and react mdl (https://react-mdl.github.io/react-mdl) components. Of course I do have mdl css on my template.
I want to use the drawer components from React MDL with my custom layout. So far, i have this in my layout:
<div className="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<Header/>
<Drawer title="Title">
<Navigation>
Link
Link
Link
Link
</Navigation>
</Drawer>
</div>
Rendered drawer:
<div class="mdl-layout__drawer">
<span class="mdl-layout-title">Title</span>
<nav class="mdl-navigation">
Link
Link
Link
Link
</nav>
</div>
Problem is it render ok but there are no drawer button generated. In demo layout a div with class mdl-layout__drawer-button is generated beside the drawer div, and a div with class mdl-layout__obfuscator at the end of layout.
I got the same issue, cause I made a mistake by using material-design-lite's scrips instead of react-mdl's scripts.
import 'react-mdl/extra/material.css'
import 'react-mdl/extra/material.js'
Hope this helps!
I am working on angularJs and bootstrap application.
Currently working on creating a tabs using angularJS, i want to highlight the selected tab so that users can easily recognize that the tab highlighted is selected. Please suggest how to highlight the selected tab with color #FBDFD9.
Please find the exisiting working code to display tabs : http://plnkr.co/edit/CAlrAzHO2THuglQrsTIi?p=preview
sample html code:
<div ng-controller="TabsParentController">
<tabset>
<tab ng-repeat="workspace in workspaces"
heading="{{workspace.name}}"
active=workspace.active>
<div ng-controller="TabsChildController">
<div>
{{$parent.workspace.id}} : {{ $parent.workspace.name}}
</div>
<input type="text" ng-model="workspace.name"/>
</div>
</tab>
<tab select="addWorkspace()">
<tab-heading>
<i class="icon-plus-sign"></i>
</tab-heading>
</tab>
</tabset>
</div>
--EDIT--
Please suggest how to show the outline of the tabs. If there are many tabs, its appearing just like a text without any outline indicating that as a tab. If noticed the output in http://plnkr.co/edit/CAlrAzHO2THuglQrsTIi?p=preview , outline of the tab is shown only for the selected tab. Please advice how to show the outlines of all the tabs(active tab and inactive tabs). I tried to find the solution but could not find the appropriate ID or classname of the tab to write the css code to show the outer line of the tabs.
I inspected the HTML with Chrome to see which CSS selector is being used in Bootstrap to style active tabs. Modify your CSS to add this rule:
.nav-tabs>.active>a, .nav-tabs>.active>a:hover, .nav-tabs>.active>a:focus {
background-color: #FBDFD9;
}
Bootstrap adds active class to the active tab, so just target it in your css:
.nav-tabs>.active>a {
background-color: #FBDFD9;
}
Since the specificity of the selector .nav-tabs>.active>a is the same as the specificity of bootstrap's selector, to have your styles override either use !important
.nav-tabs>.active>a {
background-color: #FBDFD9; !important;
}
or place your custom styles after bootstrap's in index.html:
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
<link rel="stylesheet" href="index.css">
Here is working example.