I just added a link tag after an input text type but when I view the site, the link goes on top of the input as you can see on the photo and don't see anything wrong.
Perhaps there is a reset css that I dont know.
a.activate {
background-color: pink;
padding: 10px;
}
<div class="cont bonus">
<h3>You have no active Bonus on your account</h3>
<h4>Got a Bonus code?</h4>
<input class="input" type="text" name="bonuscode" placeholder="Bonus Code">
<br>
<div id="activate">
<a class="activate" href="#">Activate</a>
</div>
</div>
That's because your link is an inline element. The padding you've added behaves differently for inline elements than block elements.
Set your link to display: inline-block;
a.activate {
background-color: pink;
padding: 10px;
display: inline-block;
}
<div class="cont bonus">
<h3>You have no active Bonus on your account</h3>
<h4>Got a Bonus code?</h4>
<input class="input" type="text" name="bonuscode" placeholder="Bonus Code">
<br>
<div id="activate">
<a class="activate" href="#">Activate</a>
</div>
</div>
An inline element occupies only the space bounded by the tags that define the inline element.
- MDN Inline Elements.
Just add display block to input. No need to change anything.
input{
display:block;
}
Related
I am struggling to get a break to work in my code. The break is not being recognised at all and just displays all text in one line.
I have tried a combination of using divs, spans and p tags, but still the same problem. I can only assume that the code i am using is illegal. I would be grateful if someone could clarify where I am going wrong. Thanks
<div class="message">
<div style="margin-top: 5px; font-size: 24px;">
ALERT
</div>
<p>Landscape mode has been disabled in the app<br>
Please continue by turning your device to protrait<br>
Thank you
</p>
</div>
You probably have display:none on all <br>. If using this doesn't work:
br {display:block}
try using JavaScript to override any display properties on all <br>
Demo
var brArray = Array.from(document.querySelectorAll('br'));
brArray.forEach(function(brk, idx) {
brk.style.display = 'block';
});
/* There's a possibility thisproperty might be somewhere */
p {
white-space: nowrap;
}
/* More than likely this is the culprit */
.message br {
display: none;
}
<div class="alert message">
<div style="margin-top: 5px; font-size: 24px;">
ALERT
</div>
<p>Landscape mode has been disabled in the app <br>Please continue by turning your device to protrait<br> Thank you
</p>
</div>
<p>Click the text above</p>
OPTION 1: Add one more <br> in the second line.
The primary purpose of <br> is to insert a single line break. And this is how it is exactly working in your code. If you need an empty line above Thank You, just add one more br>.
<div class="message">
<div style="margin-top: 5px; font-size: 24px;">
ALERT
</div>
<p>Landscape mode has been disabled in the app<br>
Please continue by turning your device to protrait<br><br>
Thank you
</p>
</div>
OPTION 2: You can wrap your text inside <pre> tag and style it
accordingly.
.no-format{
font-family: initial;
}
<div class="message">
<div style="margin-top: 5px; font-size: 24px;">
ALERT
</div>
<pre class="no-format">Landscape mode has been disabled in the app.
Please continue by turning your device to protrait.
Thank you
</pre>
</div>
In my case I have applied the following style to my label:
white-space: pre-line;
#divWithPreline {
white-space: pre-line;
border: solid 2px red;
}
#divWithoutPreline {
border: solid 2px blue;
}
<div id="divWithPreline">
This is a div
whose content has line breaks
and the <b>white-space pre-line</b> has been applied
</div>
<br>
<div id="divWithoutPreline">
This is a div
whose content has line breaks
and <b>no styling</b> has been applied
</div>
How can I align below html in the format below?
<div>
<div>
<label>Counterparty</label>
<input id="paymentsApp-inpt-cpty" ng-model="selectedPaymentCopy.counterparty" ng-required="true" />
</div>
<div>
<label>Value Date</label>
<input id="paymentsApp-inpt-date" ng-model="selectedPaymentCopy.valueDate" />
</div>
<div>
<label>Credit Account</label>
<input id="paymentsApp-inpt-acc" ng-model="selectedPaymentCopy.creditAccount" />
</div>
<div>
<label>Amount</label>
<input id="paymentsApp-inpt-amt" ng-model="selectedPaymentCopy.amount" />
</div>
</div>
I am not using bootstrap in my project.
So can anybody tell me what will be the css for this?
Method #1: Flexbox:
div > div {
display: flex;
}
div > div > label {
flex-basis: 125px;
}
div > div > input {
flex: 1;
}
DEMO
Method #2: display: inline-block:
div > div > label {
display: inline-block;
width: 125px;
}
div > div > input {
display: inline-block; /* optional */
}
DEMO
Note that flexbox is supported by all major browsers, except IE 8 & 9. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add all the prefixes you need, post your CSS in the left panel here: Autoprefixer.
While flex is a good option, and I use it to good effect all the time, it can create some subtle issues that will be tough to handle if you're not thoroughly familiar with its behavior.
If you want something simpler, you could just try floating the inputs to the right. To do that you would have to place the input before the label and just leave the label alone.
Styles (a little verbose for illustration purposes, and I gave the container a fixed width for the same reason):
.test {
width: 400px;
}
.test > div > input {
float: right;
}
Markup (note switched position of input and label):
<div class="test">
<div>
<input id="paymentsApp-inpt-cpty" ng-model="selectedPaymentCopy.counterparty" ng-required="true" />
<label>Counterparty</label>
</div>
<div>
<input id="paymentsApp-inpt-date" ng-model="selectedPaymentCopy.valueDate" />
<label>Value Date</label>
</div>
<div>
<input id="paymentsApp-inpt-acc" ng-model="selectedPaymentCopy.creditAccount" />
<label>Credit Account</label>
</div>
<div>
<input id="paymentsApp-inpt-amt" ng-model="selectedPaymentCopy.amount" />
<label>Amount</label>
</div>
</div>
I have the following html:
<form action="">
<div class="cont">
<div class="form-group">
<input type="text">
</div>
</div>
<div class="cont">
<div class="form-group">
<input type="text">
</div>
</div>
<div class="cont">
<div class="form-group">
<input type="text">
</div>
</div>
</form>
I would like to select only the first form group.
This is easily achievable when .form-group is not contained by .cont, working example here.
I've been trying with what's below and similar things:
form .cont .form-group:first-child{
outline: 1px solid red;
}
I understand why this doesn't work, easily visualized here.
Here's a live explample., how can I select only the first form group?
Based on your HTML in the second example, you could select the first .form-group element in the first .cont element:
Updated Example
form .cont:first-child .form-group:first-child {
outline: 1px solid red;
}
If there aren't multiple .form-group elements nested in the .cont element, like in your third example, you could omit the :first-child pseudo class from the .form-group element:
Updated Example
form .cont:first-child .form-group {
outline: 1px solid red;
}
Of course, this won't work in all instances, such as when the first .cont element doesn't contain a .form-group element. It's worth pointing out that your selector form .cont .form-group:first-child wasn't working because the .form-group elements aren't sibling children elements.
I run into a css issue.
I have a form, and inside it I want to show a label and some info in each line.
The html for the form is:
<form class="form_dialog">
</br>
<label>Status: </label>
<span><img src="images/check.png" alt="check mark" width="16" height="16"/></span>
</br></br>
<label>Type: </label>
<span>V1</span>
</br></br>
<label>Description: </label>
<div class="sp">16 Nodes - Test for long description.
This system is good in all cases. Max length is 100.</div>
</form>
The css for all the tags are:
form.form_dialog {float: left; clear: left;}
.form_dialog div {float:left; clear:left}
.form_dialog label {
display: block; float: left;
width: 12.0em; min-height: 2.0em; text-align: right;
}
.form_dialog span {
margin-left: 3.0em;
}
div.sp {
display:inline;
margin-left:3em;
margin-right:3em;
width:70%;
}
My prob here is that for the description info, I want to keep the text lines indented(each line starts from the same position) as well as inline with label. But cannot achieve it.
Any one can help on this? Thanks.
You are creating a table. You could use a table, or use two seperate elements, placed side by side inside of a containing .
<div class="container">
<div class="formContainer">
</div>
<div class="textContainer">
</div>
</div>
Then float each container and align your text using CSS.
Agreed with Trendy, also, since you starting using span tag, you should just use the span
<span>16 Nodes - Test for long description.
This system is good in all cases. Max length is 100.</span>
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Highlight label if checkbox is checked (html/css)
I would like label to get a red border if radio is checked.
Code so far:
HTML:
<center style="margin-top:20px;">
<label class="big">
This is a box 1
<input name="radio-group1" type="radio" />
</label>
<br/>
<label class="big">
This is a box 2
<input name="radio-group1" type="radio" class='sex' />
</label>
</center>
CSS:
.big {
display:block;
width:100px;
height:100px;
background-color:gainsboro;
cursor:pointer;
}
.big:hover {
border:1px solid blue;
}
No JS solutions please. I have been trying with sibling and children selectors but unsuccesfuly.
JSFIDDLE: http://jsfiddle.net/QqVCu/10/
You would have to rearrange the HTML so the label/red-border-element comes after the radio.
HTML
<center style="margin-top:20px;">
<div class="big">
<input id="box1" name="radio-group1" type="radio" />
<label for="box1">This is a box 1</label>
</div >
<br/>
<div class="big">
<input id="box2" name="radio-group1" type="radio" />
<label for="box2">This is a box 2</label>
</div >
</center>
CSS
.big {
display:block;
width:100px;
height:100px;
background-color:gainsboro;
cursor:pointer;
position: relative;
}
.big:hover {
border:1px solid blue;
}
label {
width: 100%;
height: 100%;
display: block;
}
input[type="radio"] {
position: absolute;
top: 20px;
left: 50%;
}
input[type="radio"]:checked + label {
border: red 1px solid;
}
http://jsfiddle.net/QqVCu/12/
But it starts getting weird. A little javascript wouldn't hurt.
edit: this version is a little cleaner
You can use :checked selector, but this will only work for the checkbox itself. Otherwise there is no way to do it in pure CSS - you will have to resort to JavaScript (which I do realize you said you wanted to avoid - but pure CSS won't do it).
What you are trying is not possible with current structure of your html. There is no such thing as a parent selector. There is a sibling selector though, wich could be used to accomplish what you are after. First you would have to restructure your html to something like this:
<div>
<input name="radio-group1" id="box1" type="radio" />
<label class="big" for="box1">
This is a box 1</label>
</div>
<div >
<input name="radio-group1" id="box2" type="radio" class='sex' />
<label class="big" for="box2" >
This is a box 2</label>
</div>
I made label and input siblings in stead of parent/child. They will still work the same thanks to their id and for attributes. I also changed their order to be able to use the next sibling selector. The extra div is required to do some absolute positioning to put them back in the same order you had in your fiddle.
Next i added a few lines of css. The real magic happens here:
div input:checked+label {
border: 1px solid red;
}
This will selected all 'next sibling' of an input that is checked and has a div as a parent. You could further finetune this to only work on radio's and in reality i would add a class to the wrapper div, but this is just a 'proof of concept'.
The rest of the css i added is just some positioning to mimic the layout you had in your example. This will also need some finetuning.
The working example is here: http://jsfiddle.net/QqVCu/14/