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/
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.
Trying to create a layout that has two columns, and text between those columns
Something like this:
But I am running into spacing issues with twitter bootstrap to make it actually work. On top of making these items the same width with the text between, they should all be vertically aligned.
You can do that using 3 columns
Live Demo jsfiddle
<div class="container-fluid">
<div class="row">
<div class="col-xs-6">.col-sm-6</div>
<div class="col-xs-6">.col-sm-6</div>
</div>
<br/>
<p>Create an account...............................</p>
<div class="row">
<div class="col-xs-6 test" >
<form class="form-horizontal vmid" role="form">
<div class="form-group">
<label class="control-label col-sm-2" for="email">Email:</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" placeholder="Enter email"/>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="pwd">Password:</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="pwd" placeholder="Enter password"/>
</div>
</div></form>
</div>
<div class="col-xs-1 test" >
<p class="asd"> ~OR~</p>
</div>
<div class="col-xs-5 test" >
<button type="submit" class="asd btn-primary btn-lg">Facebook</button>
</div>
</div>
</div>
Style
.vmid{
position:relative;
top:50%;
transform:translateY(-50%);
}
.asd{
position:relative;
top:50%;
transform:translateY(-35%);
}
This is not a bootstrap answer just a plain simple CSS one. Although you can adapt it to bootstrap easily because the basic underlying principle is the same. Instead of using width percentages that I have used in my example, bootstrap grid system columns can be used instead. Saying all that, you can achieve your desired effect by dividing the wrapper div into 3 columns and then using the display table for parent and table-cell and vertical align middle for the child to place the respective input elements and button elements in its place as needed.
The fiddle can be found here
The code snippet follows...
.wrapper {
height: 300px;
width: 100%;
background: pink;
}
.leftSide,
.rightSide,
.midPart {
box-sizing: border-box;
height: 100%;
display: table;
}
.leftSide {
width: 45%;
background: lightgray;
float: left;
}
.midPart {
width: 10%;
background: aqua;
}
.midPart p {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.leftSide div,
.rightSide div {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.rightSide {
width: 45%;
background: lightcyan;
float: right;
}
button {
height: 3em;
width: 100px;
background: blue;
color: white;
}
<div class="wrapper">
<div class="leftSide">
<div>
<input placeholder="Enter Username" />
<br/>
<br/>
<input placeholder="Enter password" />
</div>
</div>
<div class="rightSide">
<div>
<button>Hello</button>
</div>
</div>
<div class="midPart">
<p>-or-</p>
</div>
</div>
Hope this helps. Happy coding :)
Update::
***Another updated Fiddle without colors***
I have 3 divs in total. One is a container for the other left and right divs. There will be so many containers. Everything is okay now, but when the window is resized the CSS should avoid overlapping the divs. Instead, it should wrap to the next line. Please provide me your suggestion. Below is my code.
Css Code
.divmain
{
width: 100%;
padding: 15px;
height: auto;
}
.divmain .divleft
{
float: left;
width: 16%;
}
.divmain .divright
{
float: left;
width: 84%;
}
View Code
<div style="width: 100%;">
<div class="divmain">
<div class="divleft">
<label class="label">Date</label>
</div>
<div class="divright">
<input type="text"/>
</div>
</div>
<div class="divmain">
<div class="divleft">
<label class="label">Status</label><span class="mand">*</span>
</div>
<div class="divright">
<label class="label">Pending</label>
</div>
</div>
<div class="divmain">
<div class="divleft">
<label class="label">Reference No</label>
</div>
<div class="divright">
<input type="text"/>
</div>
</div>
</div>
Demo
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;
}
Here's a fiddle
I have this code where I tried to make a button have a blue line around it. But when I ran the code I just get a blue line at the top of the button. I added disply: inline-block but that doesn't seem to work. Is there some way I can make the div's border surround the input button?
<div id="A">
<div style="border: 1px solid Blue">
<input style="float: left; display: block" type="button" onclick="doTest('total'); return false;" />
</div>
<div id="B" style="display: block; float: left;">ABC</div>
</div>
Why all those divs?
See demo Fiddle.
HTML:
<form id="A" action="">
<fieldset>
<span><input id="button1" type="button" value="Caption" onclick="" /></span>
<label id="B" for="button1">ABC</label>
</fieldset>
</form>
CSS:
#A span {
border: 1px solid blue;
}
Remove "float: left" from your input and add it to the surrounding div.
Setting height on a DIV that wraps INPUT can help:
<div id="A">
<div style="border: 1px solid Blue; height: 20px;">
<input style="float: left; display: block" type="button" onclick="doTest('total'); return false;" />
</div>
<div id="B" style="display: block; float: left;">ABC</div>
</div>
<div id="A">
<div style="border: 1px solid Blue;float:left">
<input style="display: block" type="button" onclick="doTest('total'); return false;" />
</div>
<div id="B" style="display: block; float: left; margin-left:100px;">ABC</div>
</div>
If you want the text ABC inside the blue border you have to move it inside the div with the border, combined with the height "trick" as suggested by spektom.
<div id="A">
<div style="border: 1px solid Blue; min-height:20px">
<input style="float: left; display: block"
type="button"
onclick="doTest('total'); return false;" />
<div id="B" style="display: block; float: left;">ABC</div>
</div>
</div>