Setting background image is breaking submit button - css

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.

Related

How can i separate this div overlap

I am trying to build a web form and the divs keep overlapping.
I am confused as to why.
I have separated all into separate divs and I'm trying to have them stack one after the other.
How can I get all the divs to be in separate rows such that it doesnt overlap.
This is the component.html file:
<div>
<!--Navbar-->
<mat-toolbar color="primary">
<div class="centerNavBar">
<a mat-button href="fa-dashboard">Back</a>
<span class="headSpacer">Damage Assessment Tool</span>
<a mat-button href="">Logout</a>
</div>
</mat-toolbar>
</div>
<div>
<mat-sidenav-container class="MainContainter">
<!--SideNav-->
<mat-sidenav mode="side" opened>
<div>
<a mat-button href="">Message Board</a>
</div>
</mat-sidenav>
<mat-sidenav-content class="MainContent">
<mat-card>
<mat-card-header class="sect">Create report:</mat-card-header>
<br><br>
<mat-card-content>
<!--Div for form-->
<div>
<mat-form-field>
<input
#MOCDateInput
matInput type= "Date"
required>
</mat-form-field>
<br>
<mat-form-field>
<mat-label>Comment</mat-label>
<input
#DescriptionInput
placeholder="--"
matInput type= "string"
required>
</mat-form-field>
<br>
<mat-form-field>
<mat-label>Facility In Question</mat-label>
<input
#MOCFacilityInput
placeholder="--"
matInput type= "string"
required>
</mat-form-field>
<br>
<br>
</div>
<div class="MOCMap">
<!--Div for Map-->
<div class="map-container">
<div class="map-frame">
<div id="map"></div>
</div>
</div>
</div>
<!--Div for buttons-->
<div>
<input
style="display: none;"
#ImageInput
type= "file"
(change)="onFileSelected($event)">
<br>
<br>
<button mat-raised-button type="button" (click)="ImageInput.click()">Upload An Image</button>
<button mat-raised-button
type="submit"
(click)="createMOCForm(MOCFacilityInput.value, DescriptionInput.value, MOCDateInput.value)" color="primary">Submit Report</button>
</div>
</mat-card-content>
</mat-card>
</mat-sidenav-content>
</mat-sidenav-container>
</div>
The image shows the overlap
This is the global css file:
/* You can add global styles to this file, and also import other style files */
#import "~leaflet/dist/leaflet.css";
html, body {height: 100%}
body {
margin: 0;
font-family: Roboto;
background-color: ghostwhite;
}
.sect{
display: block;
margin-top: auto;
margin-left: auto;
margin-right: auto;
width: 850px;
background-color: white;
}
.centerNavBar {
margin: auto;
width: auto;
padding: auto;
}
.headSpacer{
margin-left: 100px;
margin-right: 100px;
}
/*map*/
.map-container {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: 50px;
}
.map-frame {
border: 2px solid black;
height: 100%;
width: 50%;
}
#map {
height: 100%;
}
Any help would be appreciate, thank you in advance.
You want it to be laid out as
Form
Map
Buttons
Correct? It seems that only the map is a problem. Try removing the position: absolute and associated styles, your .map-container should look like this:
.map-container {
margin: 50px;
}
Setting position:absolute is causing the map to appear in the middle of the page, and disregard any layout. position:absolute puts the map some place relative to the nearest parent element with postition set to something.

How to fix the alignment issue of the header with the rest of the bootstrap form controls?

I am using bootstrap 3. Here is my code
.divisionify {
margin-bottom: 5px;
position: relative;
border-top: 2px solid gray;
}
.form-title {
position: relative;
color: #7cc0e1;
font-size: 20px;
text-align: left;
margin-top: 10px;
margin-bottom: 5px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="col-xs-12 col-sm-10 col-sm-offset-1">
<div class="form-title">Apply for Plan</div>
<div class="divisionify"></div>
<form class="form-horizontal">
<div class="form-group">
<label for="institution-type" class="control-label">Type of institution</label>
<div class="">
<input type="email" class="form-control" id="institution-type" placeholder="Type of institution">
</div>
</div>
<div class="form-group">
<label for="name" class="control-label">Name</label>
<div class="">
<input type="text" class="form-control" id="name" placeholder="Name">
</div>
</div>
<div class="form-group">
<div class="">
<button type="submit" class="btn btn-default">Apply</button>
</div>
</div>
</form>
</div>
</div>
And it produces this layout
You can see the title 'Apply for Plan' does not align with the form controls on the left hand side.
it is because of these settings by Bootstrap
margin-left: -15px;
margin-right: -15px;
I can fix this issue by adding them too to my css class .form-title and .divisionify
However is there a better way to fix the alignment?
This is my desired layout
Why not just override the Bootstrap styles with your own?
Add this to your code:
.form-group {
margin-right: 0 !important;
margin-left: 0 !important;
}
Give a padding of the left and right of the .form-title and .divisionify
.divisionify {
margin-left: -15px;
margin-right: -15px;
}
.form-title{
margin-left: -15px;
margin-right: -15px;
}
Check live
The problem with using the !important thing is that everything will end up being important to you. I would use parent-to-child calls example:
#father.child{margin-right: 0px; margin-left: 0px;}.
With this, you will govern without using the !important. Think that using the !important you are going to change the default responsive of Bootstrap to the whole page for this case.
DOC:What are the implications of using "!important" in CSS?
You can add an additional id to the elements and style them according to your wish. In this way you can avoid !important. This is the way preferred by me.
Edited code snippet
.divisionify {
margin-bottom: 5px;
position: relative;
border-top: 2px solid gray;
}
.form-title {
position: relative;
color: #7cc0e1;
font-size: 20px;
text-align: left;
margin-top: 10px;
margin-bottom: 5px;
}
#applyPlan {
margin-left: -15px;
margin-right: -15px;
}
#division {
margin-left: -15px;
margin-right: -15px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="col-xs-12 col-sm-10 col-sm-offset-1">
<div id= "applyPlan" class="form-title">Apply for Plan</div>
<div id="division" class="divisionify"></div>
<form class="form-horizontal">
<div class="form-group">
<label for="institution-type" class="control-label">Type of institution</label>
<div class="">
<input type="email" class="form-control" id="institution-type" placeholder="Type of institution">
</div>
</div>
<div class="form-group">
<label for="name" class="control-label">Name</label>
<div class="">
<input type="text" class="form-control" id="name" placeholder="Name">
</div>
</div>
<div class="form-group">
<div class="">
<button type="submit" class="btn btn-default">Apply</button>
</div>
</div>
</form>
</div>
</div>

How do I make modal buttons appear inside the modal body?

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.
}

Browsers with different design for same div

I have a couple of different issues.
I have a div with a couple of other divs and some controls in it. My biggest issue is that it does not look the same in Chrome as it does in other browsers. As it is right now, it looks as following:
And the biggest issue is with Chrome, where the textbox to the right of the "width:" text goes down onto the next line. The code for the box can be seen in this JSFiddle or as as following:
<div id="div_properties" class="redBorder left" style="clear: left; display:
<div class="right">
<a href="#" id="closePropertiesWindow">
<img src="close.png" title="Close window"></a>
</div>
<div class="centered noMargin whiteBackground">
<h3 class="noMargin">Properties</h3>
</div>
<hr class="noMargin noPadding">
<div id="div_properties_content" style="display: block;">
<div class="noMargin propertiesControl" prop="text" style="width:100%;">
text:
<input type="text" id="propertytextTextBox" class="right"></input>
</div>
<div class="noMargin propertiesControl" prop="width" style="width:100%;">
width:
<input type="number" id="propertywidthNumber" class="right"></input>
</div>
<div class="noMargin propertiesControl" prop="italic" style="width:100%;">
italic:
<input type="checkbox" id="propertyitalicCheckBox" class="right" checked="checked">
</div>
<div class="noMargin propertiesControl" prop="bold" style="width:100%;">
bold:
<input type="checkbox" id="propertyboldCheckBox" class="right">
</div>
<br>
<input type="button" id="savePropertiesButton" value="Save" class="right">
</div>
</div>
And the CSS is as following:
#div_properties {
margin-top: 5px;
background-color: #F0F0F0;
width: 300px;
float: left;
min-height: 75px;
}
.redBorder {
border: 1px solid red;
}
.noMargin {
margin: 0 0 0 0;
}
.left {
float: left;
}
.right {
float: right;
}
(Those are all the related classes in this scope, the other classes defined on the items have no styles, but are being used in the JavaScript.)
Also, another issue I'm having is the "box border" around the close-image in IE. This is not a big issue, but if anyone knows what is causing it, it would be fantastic.
Its the floating that's causing the issue. You need to clear them.
.propertiesControl {
clear:both;
}
http://jsfiddle.net/JWDkM/2/

float does not align div elements properly

HTML:
<div class="table" style="display:table;width:600px">
<div style="display:table-row">
<div style="width:30%;float:left;display:table-cell">Flow ID</div>
<div style="width:60%;float:right;display:table-cell">
<input type="text" name="flowid" size="20" id="flowid"/>
</div>
<div style="width:10%,float:right;display:table-cell"> [Default : 32] </div>
</div>
<div style="display:table-row">
<div style="width:30%;float:left;display:table-cell">Traffic Class</div>
<div style="width:60%;float:right;display:table-cell">
<input type="text" name="traffic" size="20" id="traffic"/>
</div>
<div style="width:10%;float:right;display:table-cell"> [Default : 0] </div>
</div>
</div>
CSS:
div.table {
font: 81.25%/1 arial,helvetica,sans-serif;
font-weight:bold;
background-color:rgb(241,241,241);
margin: 0 auto;
width: 50%;
text-align:center;
border-width: 1px 1px 1px 1px;
border-style: solid;
border-color: rgb(229, 229, 229);
}
Output I am getting is :
Why this strange behaviour ?
Althoguh first row seems to be correctly organized but still table-cell elements are not aligned completely to left and right. For second row, I have no clue what's going on ?
I am new in using divs as I used to do all these things with tables so please excuse if missing something trivial.
There is no need for the floats and you also had a typo in one of the inline styles:
width:10%,float:right; should be width:10%;float:right;.
Here is it working:
http://jsfiddle.net/sQ4Nb/
Here is how you should have your code:
http://jsfiddle.net/cS35y/
And here is a HTML table version:
http://jsfiddle.net/53fKu/
Why do you use div elements if you decide to display them like a table?
You may try something like this: jsfiddle
<ul id="wrapper">
<li>
<div style="width:30%;" class="cell">Flow ID</div>
<div style="width:55%;" class="cell">
<input type="text" name="flowid" size="20" id="flowid" />
</div>
<div style="width:15%;" class="cell">[Default : 32]</div>
</li>
<li>
<div style="width:30%;" class="cell">Traffic Class</div>
<div style="width:55%;" class="cell">
<input type="text" name="traffic" size="20" id="traffic" />
</div>
<div style="width:15%;" class="cell">[Default : 0]</div>
</li>
</ul>
#wrapper {
width: 600px;
list-style: none;
}
.cell {
float: left;
}

Resources