I'm looking at my div named 'mainsearchsection' and I see a small amount of grey above and to the left of each of my search fields. I'm not sure why? Is there something messed up about the margins or padding?
Here is my fiddle
http://jsfiddle.net/XLhsR/
<div class="mainsearchsection">
<h1>Share gifts with friends.</h1>
<h2>Services to exchange from every country.</h2>
#using (Html.BeginForm("Search", "Gifts", FormMethod.Get))
{
<div class="mainsearchdiv">
<input class="mainsearch" type='search' name='searchTerm' value='Gifts' data-ouluvu-autocomplete="#Url.Action("AutoComplete")" />
<input class="mainlocation" type="text" name="location" value="Location" />
<input class="mainavailability" type="text" name="availability" value="Availability" />
<input class="mainsubmit" type='submit' value='Search' />
</div>
}
</div>
.mainsearchdiv {
border: 2px solid black;
padding: 2px 2px 2px 2px;
background-color: black;
border-radius: 5px;
}
.mainsearch {
width: 300px;
height: 35px;
margin-left: 2px;
border-radius: 5px;
}
.mainsubmit {
height: 35px;
width: 80px;
border-radius: 5px;
}
.mainlocation {
height: 30px;
border-radius: 5px;
}
.mainavailability {
height: 30px;
border-radius: 5px;
}
Browsers automatically add a border to input fields. Try using a reset stylesheet or use
input {
border: 0;
}
http://jsfiddle.net/XLhsR/1/
By default, text inputs have a border, and that's what you're seeing here. To turn that off, do this
.mainsearchsection input {
border-width:0;
}
See more: http://jsfiddle.net/XLhsR/4/
Related
I want to inherit the width of my suggestion div from the input field's width and at the same time overlap it from the objects. My CSS below overlaps but does not inherit the width of the input field. I've tried making it to 100% but it becomes longer than the input field.
.suggestion {
cursor: pointer;
background: #FFF;
box-shadow: 0 2px 2px 0 rgba(34,36,38,.15);
padding: 5px 20px 5px 20px;
border-radius: .28571429rem;
border: 0px solid rgba(34,36,38,.15);
z-index: 1;
position: absolute;
width: inherit;
}
.search-res{
margin-bottom: 5px;
}
.search-res:hover{
margin-bottom: 5px;
color: #2196f3;
}
.warning {
color: orange
}
<input type="text" formControlName="name" placeholder="Enter Name..." maxlength="32">
<div class="suggestion" *ngIf="suggestions">
<div *ngFor="let suggestion of suggestions" class="search-res" (click)="onSelectSuggestion(suggestion.name)">
{{suggestion.name}}
</div>
</div>
Here's an example:https://codepen.io/anon/pen/KvgoPX
What I changed was:
For the suggestion div to be absolute, it'll need to be relative to the input in some way. That's what there's an input container around the outside. That can be any width you want.
There's another object in there to show that it overlays.
.inputContainer {
width:200px;
position:relative;
background:green;
}
input {
width:100%;
}
.suggestion {
cursor: pointer;
background: #FFF;
box-shadow: 0 2px 2px 0 rgba(34,36,38,.15);
padding: 5px 20px;
border-radius: .28571429rem;
border: 0px solid rgba(34,36,38,.15);
z-index: 1;
box-sizing:border-box;
text-align:center;
position: absolute;
width: 100%;
}
.search-res{
margin-bottom: 5px;
}
.search-res:hover{
margin-bottom: 5px;
color: #2196f3;
}
.warning {
color: orange
}
<div class="inputContainer">
<input type="text" formControlName="name" placeholder="Enter Name..." maxlength="32">
<div class="suggestion" *ngIf="suggestions">
<div *ngFor="let suggestion of suggestions" class="search-res" (click)="onSelectSuggestion(suggestion.name)">
{{suggestion.name}}
</div>
</div>
</div>
<div class="otherStuff"> This is where other objects are </div>
Extra margin from a paragraph tag is forcing a button downwards. I am trying to understand why.
Here's one answer I tried looking to find an answer from : is it a bug? margins of P element go outside the containig div, however the answer quotes "collapsing margins" but I don't understand why that would be a correct answer, as margins don't seem to be collapsing in this case but expanding.
I understand the problem can be fixed by giving the paragraph tag a margin of 0, but I want to know why the margin is bleeding, and (if is due to margin collapse), a more verbose explanation from the other answer..
.body {
height: 100%;
}
.error {
color: red;
}
#chatbox {
width: 500px;
height: 500px;
background-color: #93ff95;
border: 1px solid black;
}
#loginContainer {
text-align: right;
height: 50px;
line-height: 50px;
}
#loginContainer input {
height: 25px;
font-size: 16px;
}
input#login {
text-transform: uppercase;
background: none;
color: blue;
border: none;
}
#loginForm {
margin: auto;
display: block;
}
#messagesArea {
height: 350px;
background-color: white;
padding: 5px;
}
#messageBox {
height: 100px;
padding: 1px 1px;
}
#messageForm {
display: none;
}
#messageBoxBlocked {
width: 100%;
height: 100%;
border: none;
border-radius: 5px;
padding: 0;
margin: none;
}
<div id="chatbox">
<div id="loginContainer">
<form id='loginForm'>
<span class="error">Invalid Username</span>
<input type="text" name="username" placeholder="Enter a username"/>
<input id="login" type="submit" name="login" value="Login"/>
</form>
</div>
<div id="messagesArea">
<p>Admin: Hey Everyone!</p>
</div>
<div id="messageBox">
<button id="messageBoxBlocked">Log in to enter chat</button>
<form id="messageForm">
<textarea name="messageBox" placeholder="Enter a message"></textarea>
<input type="submit" name="Send"/>
</form>
</div>
</div>
There isn't a problem with the margin of the p-tag.
Your #messagesArea height is too high. You can fix it by decreasing it to height: 338px; as shown in the example below:
.body {
height: 100%;
}
.error {
color: red;
}
#chatbox {
width: 500px;
height: 500px;
background-color: #93ff95;
border: 1px solid black;
}
#loginContainer {
text-align: right;
height: 50px;
line-height: 50px;
}
#loginContainer input {
height: 25px;
font-size: 16px;
}
input#login {
text-transform: uppercase;
background: none;
color: blue;
border: none;
}
#loginForm {
margin: auto;
display: block;
}
#messagesArea {
height: 338px;
background-color: white;
padding: 5px;
}
#messageBox {
height: 100px;
padding: 1px 1px;
}
#messageForm {
display: none;
}
#messageBoxBlocked {
width: 100%;
height: 100%;
border: none;
border-radius: 5px;
padding: 0;
margin: none;
}
<div id="chatbox">
<div id="loginContainer">
<form id='loginForm'>
<span class="error">Invalid Username</span>
<input type="text" name="username" placeholder="Enter a username"/>
<input id="login" type="submit" name="login" value="Login"/>
</form>
</div>
<div id="messagesArea">
<p>Admin: Hey Everyone!</p>
</div>
<div id="messageBox">
<button id="messageBoxBlocked">Log in to enter chat</button>
<form id="messageForm">
<textarea name="messageBox" placeholder="Enter a message"></textarea>
<input type="submit" name="Send"/>
</form>
</div>
</div>
I have a case I am not sure how to figure it out.
I am trying to do a design to put a button over a textbox, to make my layout looks nice, but when users start typing information in textbox, it hides behind the button. I know I have 1 of 2 solutions, but I don't know how to do it:
1- either to find another way to do the layout.
2- limit the number of lines for the user to enter, but this way I am going to have a restriction for long data.
Below is my HTML and CSS:
body{
background: #000;
}
.nl-main{
width: 300px;
border: 1px solid white;
border-radius: 6px;
padding: 10px;
}
.header{
padding: 3px;
}
.header span{
color: white;
}
.nl-txt-main, .nl-btn-main{
display: inline-block;
}
.nl-btn-main .nl-btn{
border-radius: 5px;
background: blue;
color: white;
left: -50px;
position: relative;
}
.nl-txt-main .nl-txt {
width: 200px;
border-radius: 5px;
}
<div class="header">
<span>Search our database</span>
</div>
<div class="nl-controls">
<div class="nl-txt-main">
<input type="text" class="nl-txt"/>
</div>
<div class="nl-btn-main">
<input type="button" value="Send" class="nl-btn"/>
</div>
</div>
I want the button to be like part of the textbox itself, When you try to run the code, and write a long sentence in the textbox, it will hide under the button. How do I solve it?
Thank you.
Remove left:-50px; from you button
body{
background: #000;
}
.nl-main{
width: 300px;
border: 1px solid white;
border-radius: 6px;
padding: 10px;
}
.header{
padding: 3px;
}
.header span{
color: white;
}
.nl-txt-main, .nl-btn-main{
display: inline-block;
margin:0;
}
.nl-btn-main .nl-btn{
background: blue;
color: white;
left: -4px;
position: relative;
border-bottom-right-radius: 5px;
margin:0;
border-top-right-radius: 5px;
}
.nl-txt-main .nl-txt {
width: 200px;
border-bottom-left-radius: 5px;
margin:0;
border-top-left-radius: 5px;
}
<div class="header">
<span>Search our database</span>
</div>
<div class="nl-controls">
<div class="nl-txt-main">
<input type="text" class="nl-txt"/>
</div>
<div class="nl-btn-main">
<input type="button" value="Send" class="nl-btn"/>
</div>
</div>
I have a Problem with a textarea in some div-blocks. It just will not accept the full width of the block, no matter what I do. I tried giving it a fixed 100% width, I tried giving it many more cols, I tried increasing the size manually in the browser, it just will not fill the complete container and I don't get why. It acts, as if there is an invisible col on the right of it, but there isn't.
**Note:**The text part (testwethsfjg.....) before the textarea is just to see if the text would be bound on the same boundaries as the textarea.
Maybe someone got an idea of what the problem could be. Help would be appreciated.
CODE
.comment-box {
padding-top: 20px;
padding-left: 15px;
padding-right: 15px;
padding-bottom: 20px;
margin-left: 200px;
margin-right: 200px;
background-color: #e9dac6;
border-radius: 25px;
border: 3px solid green;
}
.comment-box-empty {
margin-bottom: 20px;
background-color: white;
border-radius: 25px;
border: 1px solid black;
}
.comment-box-full {
margin-top: 20px;
margin-bottom: 0px;
margin-left: 30px;
margin-right: 30px;
background-color: white;
border-radius: 25px;
border: 1px solid black;
}
.comment-box-top {
margin: auto;
padding-left: 15px;
padding-right: 15px;
padding-top: 10px;
padding-bottom: 10px;
background-color: #faebd7;
border-top-left-radius: 25px;
border-top-right-radius: 25px;
border: none;
width: 100%;
height: 100%;
}
.comment-box-top-text {
font-size: 19px;
font-weight: bold;
line-height: 1;
width: auto;
height: auto;
display: inline;
}
.comment-box-content {
padding-left: 15px;
padding-right: 15px;
padding-top: 10px;
padding-bottom: 10px;
border: none;
width: 100%;
}
.comment-box-content-text {
text-align: justify;
font-size: 17px;
font-weight: 400;
line-height: 1.25;
}
<div class="comment-box">
<div class="comment-box-empty">
<form id="usr_comment">
<div class="comment-box-top">
<div class="comment-box-top-text">
<label for="name">Name:</label>
<input type="text" size="10" name="name" />
<label for="email">Email:</label>
<input type="email" size="15" name="email" />
<br />
<input type="checkbox" name="show_mail" value="showmail" checked />
<label for="show_mail">E-Mail für alle Sichtbar anzeigen?</label>
<br />
</div>
</div>
<div class="comment-box-content">
testwethsfjggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
<br />
<textarea></textarea>
<br />
<br />
<button type="submit" class="btn btn-primary btn-sm">Post</button>
</div>
</form>
</div>
#{ foreach (var comment in ViewBag.rb1.CommentList) { if (ViewBag.rb1count > 0) {
<div class="comment-box-full">
<div class="comment-box-top">
<div class="comment-box-top-text">
#comment.Name #comment.Email
</div>
</div>
<div class="comment-box-content">
<div class="comment-box-content-text">
#comment.Content
</div>
</div>
</div>
} } }
</div>
Screenshot of max width of textarea
you need to give width:100% to textarea, and if not yet, reset margin/padding, and to stop re-sizing the width I could use resize:none or resize:vertical depending on your case
here is a sample:
div {
width: 500px;
border: red solid;
box-sizing: border-box;
padding: 5px;
}
textarea {
width: 100%;
margin: 0;
padding: 0;
resize:vertical
}
<div>
<textarea></textarea>
</div>
Actually you can set the width to your textarea, but once the user changes it manually, the css won't work anymore, so you can add a resize:none to ensure the width of the textarea
textarea {
resize: none;
width: 90%;
}
I have a form which code looks like this:
<div id="right_sidebar">
<form id="your_name" name="your_name" action="#" method="post" style="display: block; ">
<fieldset>
<label for="name">Name</label>
<input type="text" name="name" id="name" value="">
<label for="lastname">Last Name</label>
<input type="text" name="lastname" id="lastname">
<label for="msg">Comment <span class="sp"></span></label>
<textarea name="msg" id="msg" rows="7"></textarea>
<input type="checkbox" name="agree">
<label for="agree">Accept the terms</label>
<button class="blue_button" type="submit">Send</button>
</fieldset>
</form>
</div>
And which is styled with the following CSS:
body {
color: #333;
font: 12px Arial,Helvetica Neue,Helvetica,sans-serif;
}
#right_sidebar {
padding-top: 12px;
width: 190px;
position:relative;
}
form {
background: #EEF4F7;
border: solid red;
border-width: 1px 0;
display: block;
margin-top: 10px;
padding: 10px;
}
form label {
color: #435E66;
display:block;
font-size: 12px;
}
form textarea {
border: 1px solid #ABBBBE;
margin-bottom: 10px;
padding: 4px 3px;
width: 160px;
-moz-border-radius: 3px;
border-radius: 3px;
}
form label a {
display: block;
padding-left: 10px;
position: relative;
text-decoration: underline;
}
form label a .sp {
background: #EEF4F7;
height: 0;
left: 0;
position: absolute;
top: 2px;
width: 0;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
border-left: 4px solid #333;
}
form button.blue_button {
margin-top: 10px;
vertical-align: top;
}
button.blue_button{
color: white;
font-size: 12px;
height: 22px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
button.blue_button {
background-color: #76C8C6;
border: 1px solid #7798B7;
text-shadow: 1px 1px 0px #567C9E;
}
As you can see the checkbox is on top of the label. I would like both to be "on the same line". So, it would look like "[ ] Accept the terms". And how would I make that the text is vertically aligned to the checkbox.
How could I do both?
You can see it live here: form, checkbox failing
One option is to amend the style of the label element that follows the checkbox:
input[type=checkbox] + label {
display: inline-block;
margin-left: 0.5em;
margin-right: 2em;
line-height: 1em;
}
JS Fiddle demo.
This is, however, somewhat fragile as the margins are a little arbitrary (and the margin-right is purely to force the following button to the next line). Also the attribute-equals selector may cause problems in older browsers.
As implied, in comments, by Mr. Alien it is actually easier to target the checkbox itself with this selector-notation:
input[type=checkbox] {
float: left;
margin-right: 0.4em;
}
JS Fiddle demo.
It is because the label has display: block on it. It means that (without a float or hack) it will claim it's own line.
Change it to display: inline-block or leave the display rule away and you're done.
Seeing you did this intentionally for the first two labels, you should give the accept the terms label an id and use form #accepttermslabel {display: inline-block}. This will override the other rules et because it is more specific.
Wrap your checkbox and text within the <label> tag. Works with your current CSS as seen here in this jsFiddle Demo.
<label for="checkbox">
<input id="checkbox" type="checkbox"> My Label
</label>
Forked your fiddle here with one small change. I nested the checkbox inside the label.
<label for="agree"><input type="checkbox" name="agree">Accept the terms</label>
Hope it helps.
All you need to do is add display: inline to the label. Like this:
label[for="agree"] {
display: inline;
}
You may also have to add the following to get the Send button to stay on its own line:
button[type="submit"] {
display: block;
}
That is enough to make it work, but you could also nest the input inside the label, like this:
<label for="agree">
<input type="checkbox" name="agree" />
Accept the terms
</label>
However, most people avoid doing this because it is semantically constricting. I would go with the first method.
Set a class on the checkbox list as follows:
<asp:CheckBoxList ID="chkProject" runat="server" RepeatLayout="Table" RepeatColumns="3" CssClass="FilterCheck"></asp:CheckBoxList>
Then add the following CSS:
.FilterCheck td {
white-space:nowrap !important;
}
This ensures the label stays on the same line as the checkbox.
I had the same problem with bootstrap 3 horizontal-form, and finally found a try-error solution and works with plain html-css too.
Check my Js Fiddle Demo
.remember {
display: inline-block;
}
.remember input {
position: relative;
top: 2px;
}
<div>
<label class="remember" for="remember_check">
<input type="checkbox" id="remember_check" /> Remember me
</label>
</div>
Tried the flex attribute?
Here's your example with flex added:
HTML
<div id="right_sidebar">
<form id="send_friend" name="send_friend" action="#" method="post" style="display: block; ">
<fieldset>
<label for="from">From</label>
<input type="text" name="from" id="from" value="">
<label for="to">To</label>
<input type="text" name="to" id="to">
<label for="msg">Comment <span class="sp"></span>
</label>
<textarea name="msg" id="msg" rows="7"></textarea>
<div class="row">
<div class="cell" float="left">
<input type="checkbox" name="agree">
</div>
<div class="cell" float="right" text-align="left">
<label for="agree">Accept the terms</label>
</div>
</div>
<button class="blue_button" type="submit">Send</button>
</fieldset>
</form>
</div>
CSS
body {
color: #333;
font: 12px Arial, Helvetica Neue, Helvetica, sans-serif;
}
[class="row"] {
display: flex;
flex-flow: row wrap;
margin: 2 auto;
}
[class="cell"] {
padding: 0 2px;
}
#right_sidebar {
padding-top: 12px;
width: 190px;
position:relative;
}
form {
background: #EEF4F7;
border: solid red;
border-width: 1px 0;
display: block;
margin-top: 10px;
padding: 10px;
}
form label {
color: #435E66;
display:block;
font-size: 12px;
}
form textarea {
border: 1px solid #ABBBBE;
margin-bottom: 10px;
padding: 4px 3px;
width: 160px;
-moz-border-radius: 3px;
border-radius: 3px;
}
form label a {
display: block;
padding-left: 10px;
position: relative;
text-decoration: underline;
}
form label a .sp {
background: #EEF4F7;
height: 0;
left: 0;
position: absolute;
top: 2px;
width: 0;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
border-left: 4px solid #333;
}
form button.blue_button {
margin-top: 10px;
vertical-align: top;
}
button.blue_button {
color: white;
font-size: 12px;
height: 22px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
button.blue_button {
background-color: #76C8C6;
border: 1px solid #7798B7;
text-shadow: 1px 1px 0px #567C9E;
}
Flex allows for table style control with the use of divs for example.
The simplest way I found to have the checkbox and the label aligned is :
.aligned {
vertical-align: middle;
}
<div>
<label for="check">
<input class="aligned" type="checkbox" id="check" /> align me
</label>
</div>
<div>
<input class="aligned" type="checkbox" />
<label>align me too</label>
</div>
<div>
<input type="checkbox" />
<label>dont align me</label>
</div>
I know this post is old, but I'd like to help those who will see this in the future. The answer is pretty simple.
<input type="checkbox" name="accept_terms_and_conditions" value="true" />
<label id="margin-bottom:8px;vertical-align:middle;">I Agree</label>