How do I make modal buttons ("OK", "DISMISS", etc) appear inside the modal body instead of the footer?
Because I set a photo as a background I'd like the buttons floating above this photo.
<div class="container">
<div class="modal1 fade"
id="XXX"
tabindex="-1"
aria-labelledby="XXX"
role="dialog"
aria-hidden="true">
<div class="modal_wrapper1">
<div class="modal-dialog1">
<div class="modal-body">
<img class="img-responsive" src="Ximage" alt="image" />
button!
Close
</div>
</div>
</div>
</div>
</div>
.modal1{
width: 100%;
position: fixed;
text-align: center;
margin: 0px auto; top: 0px;
left: 0px; bottom: 0px; right: 0px;
z-index: 1050;
}
.modal_wrapper1{
display: table;
overflow: auto;
overflow-y: scroll;
height: 100%;
-webkit-overflow-scrolling: touch; outline: 0;
text-align: center;
margin: 0px auto;
}
.modal-dialog1{
margin-top: 0px;
display: table-cell;
vertical-align: middle;
margin: 0px 20px;
}
I have used same thing to display button in the same section, with background and control placed on it, you can try similar to this in your page. Its working fine for me.
You can change background to apply to your section instead of body.
<body style="background-image: url('../../abc.jpg'); align-content:center;">
<header style="height:200px">
<section>
<div class="container">
<div class="row" >
<div class="col-lg-5">
</div>
<div class="col-lg-2 text-center">
<div id="login" name="loginForm" >
<input ........ /><br /><br />
<input type="submit" class="btn btn-success" value="Continue" />
</form>
</div>
<div class="col-lg-5">
</div>
</div>
</div>
</section>
</body>
If you are using bootstrap, than it will be better if you use the default css instead of modifying it too much, as it will affect the placement of controls when screen have different resolutions.
Instead of adding an <img> inside the modal-body div, apply it as a background image in your css.
.modal1 .modal-body {
background:url(Ximage) no-repeat;
background-size:contain; // or auto or cover, whichever works best.
}
Related
Have the following css to set the background image on a single page app (Angular)
.page::before {
content: '';
position: absolute;
background-size: cover;
width: 100%;
height: 100%;
background-image: url("../../assets/weird.png");
opacity: 0.2;
}
...
/* button */
#submit-button {
position: center;
background: #000000;
border-radius: 5px;
font-size: 15px;
padding: 15px 15px 15px 15px;
margin: -15px 15px 15px 15px;
color: white
}
Here is the html:
<div class="page">
<h1 class="sunrise">Asheville Ipsum</h1>
<h2 class="sunrise">Asheville Infused Lorem Ipusm Generator</h2>
<h3 class="sunrise">Ditch that boring ipsum for some auto-generated, beer infused,</h3>
<h3 class="sunrise">funky smelling, hippster weirdness.</h3>
<div class="inputs">
<form [formGroup]="registerForm" (ngSubmit)="onSubmit()">
<div class="form-group" id="short-medium-long">
<mat-radio-group aria-label="Select an option" formControlName="numberOfWords" class="form-control" >
<mat-radio-button value="50">Short</mat-radio-button>
<mat-radio-button value="75">Medium</mat-radio-button>
<mat-radio-button value="100">Long</mat-radio-button>
</mat-radio-group>
</div>
<div class="form-group" id="numberOfParagraphs">
<label>Number of Paragraphs</label>
<input type="number" id="number-field" formControlName="numberOfParagraphs" class="form-control" />
<mat-checkbox formControlName="moreBeer" class="form-control">More Beer!</mat-checkbox>
</div>
<div class="form-group">
<button class="btn btn-primary" id="submit-button">Generate Weirdness</button>
</div>
</form>
</div>
<div class="content" *ngFor="let paragraph of paragraphs">{{ paragraph }}<br><br></div>
</div>
With this css added the submit button no longer works. No console error or anything. Also, I can remove the content or position attributes and it works fine through the background image no longer displays.
I feel like something in the css must be in conflict?
I am sure there is no such thing called position: center;.
All of these are the available properties which can be used with position: position:static|absolute|fixed|relative|sticky|initial|inherit;
Changing that CSS property will help you out.
I'm making a website with angular, bootstrap and i need the first view to be background entirely and then user can scroll down to next div but i am having trouble aligning the divs properly all day
Tried to use an img element with block size but it didn't work, tried to use padding but that completely breaks site on mobile and other size screens
Home component:
<div>
<div id="home-bg-img"></div>
<div id="home-main">
<div class="col-md-12 landing text-center my-auto">
<h2 class="h2 text-light"><span class="purple">ProjectName</span></h2>
<h3 class="h3 cosmic-purple">An Intuitive, Secure and Reliable Project.</h3>
<a class="btn btn-primary btn-lg" href="#" role="button">Explore The Project</a>
</div>
</div>
<div class="container col-md-12" id="home-body">
<div class="row">
<div class="col-md-12 text-center">
<h3 class="h3">
Just some text which should be beneath the image div wberjk vbetba jvntenb jtjrbsb teb jte hjkbtejknb jkbtseb gsdhjjds fhjvbjhebr hjvbdhj sbvhjds
</h3>
</div>
</div>
</div>
</div>
CSS:
#home-main {
height: 100% !important;
width: 100% !important;
margin: 0;
padding: 0;
border: 0;
z-index: auto;
}
#home-bg-img{
position: absolute;
min-height: 100%;
min-width: 100%;
background-image: url("./assets/laura-skinner-348001-unsplash.jpg");
background-size: cover;
background-position-x: center;
background-repeat: no-repeat;
}
I get the image aligned properly in the bg but the two DIVs are at the top of the page one after another
What i want to do is to have the text of first DIV in the center of page (horizontally and vertically) and the second div's text after the bg image after a scroll down
You need to put the content which should be in front of the image in the same <div> where the background image is applied. Also, lose the position: absolute property and I have added display: flex to center the text vertically and horizontally.
html,
body {
height: 100%;
}
#parent-container {
height: 100%;
}
#home-main {
height: 100%;
width: 100%;
}
#home-bg-img {
display: flex;
min-height: 100%;
min-width: 100%;
background-image: url("https://placeholdit.imgix.net/~text?txtsize=63&bg=FF6347&txtclr=ffffff&txt=Image-1&w=350&h=250");
background-size: cover;
background-repeat: no-repeat;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />
<div id="parent-container">
<div id="home-bg-img">
<div class="col-md-12 landing text-center my-auto">
<h2 class="h2 text-light"><span class="purple">ProjectName</span></h2>
<h3 class="h3 cosmic-purple">An Intuitive, Secure and Reliable Project.</h3>
<a class="btn btn-primary btn-lg" href="#" role="button">Explore The Project</a>
</div>
</div>
</div>
<div id="home-main">
<div class="container col-md-12" id="home-body">
<div class="row">
<div class="col-md-12 text-center">
<h3 class="h3">
Just some text which should be beneath the image div wberjk vbetba jvntenb jtjrbsb teb jte hjkbtejknb jkbtseb gsdhjjds fhjvbjhebr hjvbdhj sbvhjds
</h3>
</div>
</div>
</div>
</div>
I have a website. And a logo which is always on the top of the screen. When you scroll down is still there, the top of the screen, you still see it. This is fine. On the top the logo image have a link, but when you scroll down, you lose it. I want the link to go with the image. I hope i was clear.
Here is the html:
<div class="col-md-12" id="menu">
<div class="col-xs-3 col-sm-2 col-md-2" id="logoparent">
<div id="logo">
<!--<h3>LOGO</h3>-->
<img src="Logo.png" id="thelogo">
</div>
</div>
<div class="col-xs-1 col-sm-2 col-md-6 space">
<!-- empty -->
</div>
<div class="col-xs-8 col-sm-2 col-md-1 menuitem" id="home">
<h3>Home</h3>
</div>
<div class="col-xs-12 col-sm-2 col-md-1 menuitem" id="gallery">
<h3>Gallery</h3>
</div>
<div class="col-xs-12 col-sm-2 col-md-1 menuitem" id="about">
<h3>About</h3>
</div>
<div class="col-xs-12 col-sm-2 col-md-1 menuitem" id="contact">
<h3>Contact</h3>
</div>
</div>
And the css:
#logo{
position: fixed;
z-index: 99;
height: 60px;
width: auto;
overflow: hidden;
margin-left: auto !important;
margin-right: auto !important;
}
#logoa{
position: relative;
z-index: 99;
}
#thelogo{
position: fixed;
z-index: 99;
height: 50px;
width: auto;
margin-top: 5px;
}
#menu{
position: relative;
z-index: 5;
}
#content-all{
position: relative;
z-index: 5; /*which is everything under the menu*/
}
I would suggest you to add a link to that logo by itself so when you click to the logo you go to the appropriate link, always if that logo has something to do with the link, otherwise add use nested DOM to style it.
You can put all menu tags in main tag and set css style for main tag like this
#menu1{
position: fixed;
top:10px;
left:10px;
height: 60px;
width:50px;
}
Check this
JSFiddle
I have to align two buttons at the bottom of the page, but I can not do it. One is the button "gallery" and the other is icon linkedin.
<div class="container fill">
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item">
<div class="fill" style="background-image:url('http://www.mysite/images/category/image.jpg');background-position: center;">
<div class="container">
<div class="carousel-caption">
<h1>TITLE</h1>
<p class="lead">Description</p>
</div>
</div>
<div class="pull-right">
<a class="btn btn-large btn-primary" href="categories.php?id=17">View Gallery</a>
</div>
</div>
</div>
</div>
<div class="pull-left">
<div class="social-caption">
<button class="btn btn-large btn-linkedin">
<i class="icon-linkedin"></i><span><a style="color:white" vhref="http://www.linkedin.com/"> | Linkedin</span></button>
</div>
css for the two buttons:
.social-caption {
background-color: transparent;
position: relative;
max-width: 100%;
padding: 0 20px;
bottom: 45px;
left: 5px;
}
.gallery-button {
background-color: transparent;
position: relative;
max-width: 100%;
padding: 0 20px;
bottom: 45px;
right: 5px;
}
The two buttons do not appear aligned. This problem is seen especially with mobile devices
Solutions? Thanks
You could do something like THIS, for example. It uses position:absolute to locate the buttons at the bottom of the page's content (bottom:0) - or relative to their parents positioning (in this case the body. The alternative would be to use position:fixed which would ensure the buttons appear at the bottom of the viewport at all times.
See the difference between absolute positioning and fixed positioning.
HTML
<button>Button 1</button>
<button>Button 2</button>
CSS
body{
position:relative;
}
button{
position:absolute;
bottom:0;
}
button:last-child{
left:100px;
}
May be you could use this:
<input type='button' style='position:fixed; top:94%; left:82%; width:100px' value='
this means the button will appear at the right corner in the bottom of your page.
//hope so this code helps you.
.center{
justify-content: center;
display:flex;
align-item: center
}
.right{
justify-content: flex-end;
display:flex;
}
//for center align
<div class="center">
<button>First Button</button>
<button>Second Button</button>
</div>
//for right align
<div class="right">
<button>First Button</button>
<button>Second Button</button>
</div>
I have a strange problem.One of my div's width is not working. My CSS is like
.product_info
{
margin-top:10px;
background:#444;
width:850px;
}
.product_image
{
width:350px;
text-align:center;
float:left;
padding:8px;
border:1px solid #e9e9e9;
background:#fff;
}
.product_details
{
float:left;
width:400px;
margin-left:25px;
font-size:14px;
font-family:"Helvetica";
background:#d71414;
}
And My HTML file is
<div class="product_info">
<div class="product_image">
</div>
<div class="product_details">
<div class="selection">
<form action="{$path_site}{$indeex_file}" method="post">
Size
{foreach name = feach item = k from = $product_size}
<input type="radio" name="size" value="{$k.product_size}" />{$k.product_size}
{/foreach}
</div>
<div class="selection">
No. of pieces <input type="text" name="quantity">
</div>
<div class="prc">
<span class="WebRupee">Rs.</span> {$product_info->product_cost}.00
</div>
<div class="buy_btn"><input type="submit" value="BUY" /></div>
</form>
</div>
</div>
But as you can see in the attached image my div product_info's width is not 850px, Whats wrong
display: flex on the parent element also changes how width and height work. Disable shrinking/growing by flex: 0 0 auto;, or use min-width and max-width instead.
Width and height basically lose the original meaning in this context and will act as a flex-basis, see geddski: The Difference Between Width and Flex Basis
.box {
margin: 2px;
border: 1px solid black;
padding: 3px;
}
.box.gray {
background: lightgray;
}
.box.container {
display: flex;
flex-flow: row;
}
<div class="box" style="
width: 300px;
font-size: 80%;
">
<div>
width: 300px;
</div>
<div class="box container">
<div class="box gray" style="width: 200px;">
width: 200px;
</div>
<div class="box gray" style="width: 200px;">
width: 200px;
</div>
</div>
<div class="box container">
<div class="box gray" style="
width: 200px;
flex: 0 0 auto;
">
width: 200px;<br>
flex: 0 0 auto;
</div>
<div class="box gray" style="width: 200px;">
width: 200px;
</div>
</div>
</div>
Try
display:block
It should work
display: inline-block; Worked for me
Example:
label {
min-width: 90px;
display: inline-block;
}
i hope you are looking like this :- http://tinkerbin.com/MU2CUpre
Actually you have used floating in your child div's and didnt clear your parent div.
So i have cleared your parent div through overflow:hidden; in parent div and cleared this child div .product_details also its working fine......
CSS
.product_info
{
margin-top:10px;
background:#444;
width:850px;
overflow:hidden;
}
.product_details
{
float:left;
width:400px;
margin-left:25px;
font-size:14px;
font-family:"Helvetica";
background:#d71414;
clear:both;
}
Use the clear: both; property.
.product_info {clear: both;}
Hi now define your class .product_into overflow:hidden;
Live demo
as like this
.product_info{
overflow:hidden;
}
=======
or option 2
define one css
Css
.clr{
clear:both;
}
Put the this div in last line closing the .product_info class
<div class="product_info">
<div class="product_image">
</div>
<div class="product_details">
<div class="selection">
<form action="{$path_site}{$indeex_file}" method="post">
Size
{foreach name = feach item = k from = $product_size}
<input type="radio" name="size" value="{$k.product_size}" />{$k.product_size}
{/foreach}
</div>
<div class="selection">
No. of pieces <input type="text" name="quantity">
</div>
<div class="prc">
<span class="WebRupee">Rs.</span> {$product_info->product_cost}.00
</div>
<div class="buy_btn"><input type="submit" value="BUY" /></div>
</form>
</div>
<div class="clr"></div>
</div>
Live demo option two