I am using Bulma as my CSS framework, and while trying to use their modals, they aren't styled at all, as if I'm missing something.
The overlay is there, and x button seems in place and visible, but the content is greyed out.
I am using this code:
<body>
<div id="modal-id" class="modal is-active">
<div class="modal-background"></div>
<div class="modal-content">
Any other Bulma elements you want
</div>
<button class="modal-close is-large" aria-label="close"></button>
</div>
</body>
All other Bulma elements are working.
Note: I am not asking about JS part and how to actually show the modal on click. I am having pure CSS issues.
But this is currently being shown and there is no problem!
if you want a Design, like a card, change .modal-content div to this:
<div class="modal-card">
<header class="modal-card-head">
<p class="modal-card-title">Modal title</p>
<button class="delete" aria-label="close"></button>
</header>
<section class="modal-card-body">
YOUR CONTENT
</section>
<footer class="modal-card-foot">
<button class="button is-success">Save changes</button>
<button class="button">Cancel</button>
</footer>
</div>
Related
I have created a basic site with a grid layout and and a modal with a login form. However, I noticed after adding tags for the modal header and footer the layout completely screws up and leaves a large gap in the middle. The page currently looks like
The expected outcome for the page should be like here:
https://codepen.io/mor10/pen/QvmLpd
and if I do not include the modal footer and header tags it works as expected. The current code for and surrounding the modal is this:
Code for sake of being able to post with codepen link:
<main id="content" class="main-content">
<!-- Modal for logging in -->
<h2>Main content area</h2>
<p>The main content area is where the magic happens. Right now, the main content is on the left and the sidebar is on the right. If you go into the markup for this document and add <code>dir="rtl"</code> to the <code>html</code> element, the two elements will swap spaces because CSS Grid honors text direction.</p>
<div id="loginModal" class="modal">
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2>Login</h2>
</div>
<div class="modal-body">
<form action="" method="">
<label for="fname">Username:</label><br>
<input type="text" id="user"><br>
<label for="lname">Password:</label><br>
<input type="text" id="password"><br><br>
<input type="submit" value="Login">
</form>
<p>Don't have an account?</p><p>Create one</p>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
</main>
It's very strange to me that the modal is affecting the layout, but only when the header and footer of the modal are used. On previous sites I have made, I have used multiple modals and not had this issue.
You have a closing </div> tag without an opening one:
<main id="content" class="main-content">
<!-- Modal for logging in -->
<h2>Main content area</h2>
<p>The main content area is where the magic happens. Right now, the main content is on the left and the sidebar is on the right. If you go into the markup for this document and add <code>dir="rtl"</code> to the <code>html</code> element, the two elements will swap spaces because CSS Grid honors text direction.</p>
<div id="loginModal" class="modal">
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2>Login</h2>
</div>
<div class="modal-body">
<form action="" method="">
<label for="fname">Username:</label><br>
<input type="text" id="user"><br>
<label for="lname">Password:</label><br>
<input type="text" id="password"><br><br>
<input type="submit" value="Login">
</form>
<p>Don't have an account?</p><p>Create one</p>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div> <!-- this should be removed -->
</main>
I have this problem.
I have a component calls navbar and it is fix for all app.
<div class="wrapper" fixed>
<nav id="sidebar" [ngClass]="{'active':!navbarOpen}">
<div [ngClass]="{'sidebar-header':navbarOpen,'sidebar-header-active':!navbarOpen}" >
<h3 align="left">CHROMAE PROJECT</h3>
</div>
</nav>
<div id="content" [ngClass]="{'active':!navbarOpen}">
<nav class="navbar navbar-default fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<div>
<button class="btn btn-info navbar-btn" type="button" (click)="myClickEvent()" >
<i class="glyphicon glyphicon-align-left"></i>
<span>MENÚ</span>
</button>
</div>
</div>
<div align="right">
<button class="btn btn-info navbar-btn" align="right" type="button" (click)="logOut()" >
<span>LOGOUT</span>
</button>
</div>
</div>
</nav>
</div>
</div>
So in other component calls home i have this:
<app-navbar>
<div>
<div *ngIf="getIsAdmin()">
hola Admin
</div>
<div *ngIf="getIsModerator()">
hola Admin
</div>
<div *ngIf="getIsUser()">
hola Admin
</div>
</div>
Can i put the "div" with ngIf like that?
<app-navbar>
navbar.div with id = content = {
<div>
<div *ngIf="getIsAdmin()">
hola Admin
</div>
<div *ngIf="getIsModerator()">
hola Admin
</div>
<div *ngIf="getIsUser()">
hola Admin
</div>
</div>
}
Because im trying too add inside navbar div class with id="content" that divs with *ngIf.
I dont know if i can explain my self :D
It looks like you are trying to use something like <ng-content> and content projection. Here is a useful article explaining it a little.
Here is a Stackblitz demoing a very small ng-content example.
For quick reference, in your "parent" component (in your case your nav-bar) you will tell angular where you want nested content to go:
nav-bar.component.html
<div class="wrapper" fixed>
<!-- your nav-bar code -->
<!-- nested content will go here -->
<ng-content></ng-content>
</div>
Then when you use your nav-bar, you can "project" content into that ng-content tag:
app.component.html (or any other component)
<nav-bar>
Here is some content to project into the nav-bar's ng-content
</nav-bar>
See the stackblitz for the full code. There is also a way to have multiple ng-content tags using selectors. The article explains those if you need to have more projected slots.
It looks like you have some complex logic in your nav-bar so I didn't try to reproduce your code. The small demo should get you started in the right direction, though.
You can control the getIsAdmin in the own app-nav
Or you can use <ng-content> in your app-navbar
<div class="wrapper" fixed>
....
<ng-content></ng-content>
</div>
So, in your main.html you can do
<app-navbar>
<div *ngIf="getIsAdmin()">
hola Admin
</div>
...
</app-navbar>
I'm writing a landing page using bootstrap 4.3.1.
After adding the "row" div, the horizontal ruler disappears and I just can't get it back.
The funny thing is when I'm adding the commented section tag, I can see the horizontal line again.
Any suggestions to why it happens/how to make the horizontal line visible again without the section tag?
<div class="container">
<div class="row">
<header class="text-center">
<h1 class="text-uppercase"><strong>The biggest startup event of the year</strong></h1>
</header>
<!-- <section> -->
<hr>
<button class="btn btn-primary btn-xl">Find out more</button>
<!-- </section> -->
</div>
</div>
what you are trying to do is bit confusing as hr tag gives the horizontal line with width=100% and the row occupy a horizontal row
so think again is this possible, try to close the div of rows and then try to put the hr tag
<div class="container">
<div class="row">
<header class="text-center">
<h1 class="text-uppercase"><strong>The biggest startup event of theyear</strong></h1>
</header>
</div>
<!-- <section> -->
<hr>
<button class="btn btn-primary btn-xl">Find out more</button>
<!-- </section> -->
</div>
I am using Bootstrap Modal to quick popup my news.
Currently, I have the problem when clicking on link; it only shows a box. It's not fullscreen.
My question simple is: have any method to append width and height of the class contain modal to body to show fullscreen.
I think because of it a child of another parent. And it can't show fullscreen.
Have any method to show a class of div is fullscreen not dependency any parent element?
Struct my code like this:
.contentfit {
height: 100%;
position: relative;
}
.right-content {
background-color: #5AA258;
float: left;
width: 70%;
height: 100%;
padding-left: 30px !important;
padding-right: 30px !important;
display: flex;
justify-content: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="section">
<div class="contentfit">
<div class="right-content">
<section id="hoicho">
<div class="title">
<h2>The title</h2>
</div>
<div class="services">
<ul>
<li>Services 1</li>
<li>Services 2</li>
</ul>
</div>
<div class="wrap">
<div class="frameallcontent">
<div class="containter">
<div class="row">
<div class="col-md-2">
</div>
<div class="col-md-10">
<p class="title-p"> Click to link
</p>
<!-- Modal -->
<div class="modal fullscreen-modal fade" id="tintuchoicho" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<div class="left-content">
</div>
</div>
</div>
I only show a part of my code.
You can see in real my example look like this.
When I click the link underline, it only shows small popup like this.
Place this script at the bottom of your page, just before closing </body>.
$(window).on('load', function(){
$('.modal.fade').appendTo('body');
})
It will effectively move your modals from wherever they are placed, making them direct children of <body>.
If this doesn't work, it means you're overriding the default CSS of .modal and you will need to produce a minimal, complete and verifiable example of your problem here or using any online snippet tool.
Bootstraps documentation says:
Modal markup placement
Always try to place a modal's HTML code in a
top-level position in your document to avoid other components
affecting the modal's appearance and/or functionality.
Taken from here: http://getbootstrap.com/javascript/#modals
So i would suggest moving it down the document to before the closing </body> tag if possible. that should resolve your problem.
I have searched the web for answers on this one with this question is closest to my own.
Bootstrap Modal popping up but has a "tinted" page and can't interact
I am creating an admin page with bootstrap and i am using modals in there.
The styling is done with Bootswatch themes.
When using some themes, opening a modal, the modal appears in a tinted page and everything freezes. I have to refresh the page to get rid of it again.
I have tried to move the modal to the bottom of the page, just before the closing
</body>
tag.
Nothing works!
Strange thing is, that with the "Basic" bootstrap css, it has the same problem.
There are some Bootswatch themes that work as they should, and some others give this problem.
I made and example in jsFiddle here: http://jsfiddle.net/qyo53dxh/
This one is with the "Paper" theme from bootswatch.
When using i.e. "United" theme, it does work normal.
What is going on?
In your fiddle you are importing bootstrap.css and bootstrap.min.css?
Please remove
bootstrap.css
And all is working nice.
<div class="modal fade forget-modal" tabindex="-1" role="dialog" aria-labelledby="myForgetModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span>
<span class="sr-only">Sluiten</span>
</button>
<h4 class="modal-title">Wachtwoord resetten</h4>
</div>
<div class="modal-body">
<p>Typ uw email adres</p>
<input type="email" name="recovery-email" id="recovery-email" class="form-control" autocomplete="off">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Annuleren</button>
<button type="button" class="btn btn-custom">Herstellen</button>
</div>
</div> <!-- /.modal-content -->
</div> <!-- /.modal-dialog -->
</div> <!-- /.modal -->
Here is working fiddle
http://jsfiddle.net/qyo53dxh/1/
Add This into style tag
.modal {
background: rgba(255, 255, 255, 0.8);
}
.modal-backdrop {
display: none;
}1200;