The title says it all, I have 2 buttons who need to float left,
but when I assign float:left; to the corresponding css, the buttons get "unclickable" they do appear, but I can't interact with them. When I remove the float:left; they do work, but then they're not on the place where I want them to be.
Also my FireBug doesn't give any error messages, and this problem only occurs in Google Chrome. If anyone has any suggestions please share them with me.
Here's a part of the code :
HTML :
<div id="php_beam" class="php_beam">
<form method="post" action="index.php">
<!-- PHP Beam Buttons -->
<input type="submit" name="Previous" value="Vorige" />
<input type="submit" name="Next" value="Volgende" />
</form>
</div>
CSS :
.php_beam
{
width: 950px;
height: 20px;
margin-left: 225px;
margin-top: 5px;
float: left;
}
To be clear, I want to know if there's an other solution instead of using float:left; because that seems to cause the problem.
Try:
.php_beam
{
width: 950px;
height: 20px;
margin-left: 225px;
margin-top: 5px;
}
.php_beam input
{
float: left;
}
Related
This is driving me nuts! I'm hoping someone can help me...I'm pretty new to HTML and CSS.
I've got a sign-up form I'm trying to style on my website. Just first name, email and submit button. I want the two input fields to be on the same line (managed to achieve this), and have them take up 100% of the space. Then when the window shrinks down to mobile, they're on a line each. Mostly everything is working except the fields won't show past a certain width. I've tried a variety of combinations using width=100%, width=auto, width=..px...
Here's a screen shot of what it looks like at the moment:
http://www.marnielefevre.com/new/wp-content/uploads/2016/02/Screen-Shot-2016-02-22-at-4.10.20-pm.png
Here's a snippet of my relevant HTML...
<div class="fielddiv">
<div class="fieldrow"><label>First Name*</label>
<input name="firstname" required="" type="text" /></div>
<div class="fieldrow"><label>Email*</label>
<input name="email" required="" type="email" /></div>
<div style="padding-top: 40px; text-align: center;"><input type="submit" value="SIGN ME UP" /></div>
</div>
...and the CSS
.fielddiv {
text-align: center;
margin: auto;
width: auto;
}
.fieldrow {
display: inline-block;
margin: auto;
text-align: center;
padding-top: 20px;
min-width: 330px;
max-width: 800px;
}
I appreciate any help!!
Without knowing what the other code in your application is doing, I would suggest (blindly) the following;
.fielddiv {
display: flex;
}
.fieldrow {
flex: 1;
text-align: center;
}
.fieldrow:first-child {
margin-right: 20px;
}
Please use below code in your application, it will increase width of textbox for your page:
.fielddiv input[type="text"] {
width:100%;
}
.fielddiv input[type="email"] {
width:100%;
}
OR
.fielddiv input[type="text"] {
width:100% !important;
}
.fielddiv input[type="email"] {
width:100% !important;
}
Hope this will meet your requirement.
I'm making a webpage for one of my projects and I'm trying to align the Upload buttons beside a text field. Maybe better explained as a picture. You can see that the two buttons are aligned on the bottom left of the submit button. I want it to be aligned on the left of the device Id text field. I've tried setting the display attributes for the text field, as well as the two buttons but it didn't work. I tried setting the float properties, which also didn't work. I was looking at grids I could possibly use from Purecss.io, but I'm not sure if that would fix the problem. I've tried using vertical-align attribute, still no dough.
I'm using a plain bootstrap theme. My HTML skills are pretty basic coming from Java. Anyone know what I can do here?
Here is my main container:
<div class="container">
<!-- Main content here -->
<div id="main">
<h1 id="mainheader">Send an image to a Wearable device</h1>
<hr>
<form method="post" action="/gcm/gcm.php/?push=true" onsubmit="return checkTextAreaLen()">
<textarea id="deviceID" rows="1" name="message" cols="25" placeholder="Device ID"></textarea> <br/>
<button type="submit" id="mainbutton" class="button-xlarge pure-button">Send Image</button>
</form>
<form action="upload.php" method="post" enctype="multipart/form-data">
Select image to upload:
<div id="filebutton">
<input type="file" name="fileToUpload" id="fileToUpload">
</div>
<input type="submit" value="Upload Image" name="submit">
</form>
</div>
Here are my styles
#main {
vertical-align: middle;
}
#status{
text-align: center;
background-color: #FFFFFF;
padding: 10px;
margin-top: 25px;
}
#mainheader{
margin-bottom: 20px;
text-align: center;
font-family: 'Raleway', sans-serif;
}
#deviceID {
display: block;
margin-left: auto;
margin-right: auto;
}
#mainbutton {
display: block;
margin-left: auto;
margin-right: auto;
}
.button-xlarge {
font-size: 125%;
width:350px;
background: rgb(66, 184, 221); /* this is a light blue */
}
Here is a preview image: (Having trouble uploading it directly)
http://tinypic.com/view.php?pic=1z499gw&s=8
EDIT:
I somewhat fixed this by applying "float:right" on the first whole form, the text area and the button. There is still a huge horizontal between the two.
#main {
float:right;
}
#main {
text-align: center;
}
#mainheader{
margin-bottom: 20px;
text-align: center;
font-family: 'Raleway', sans-serif;
}
#mainbutton {
display: block;
margin: 35px auto;
}
.button-xlarge {
font-size: 125%;
width:350px;
background: rgb(66, 184, 221); /* this is a light blue */
}
input[type="submit"], #deviceID {
display: inline;
vertical-align: middle;
margin-top: 35px;
}
.left{
float: left;
text-align: left;
}
<div id="main">
<h1 id="mainheader">Send an image to a Wearable device</h1>
<hr>
<form method="post" action="/gcm/gcm.php/?push=true" onsubmit="return checkTextAreaLen()">
<textarea id="deviceID" rows="1" name="message" cols="25" placeholder="Device ID"></textarea>
<input type="submit" value="Upload Image" name="submit">
<button type="submit" id="mainbutton" class="button-xlarge pure-button">Send Image</button>
</form>
<form class="left" action="upload.php" method="post" enctype="multipart/form-data">
Select image to upload:
<div id="filebutton">
<input type="file" name="fileToUpload" id="fileToUpload">
</div>
</form>
</div>
i think this is what you are asking for.
i rearranged your html a little and added a couple of css rules.
by setting the display on the device id field and the upload button to inline instead of block i got them to be on the same line.
i used vertical-align to... well... align them. and gave them a margin-top.
then floated your second form to the left.
I'm using float: left; and float: right; to put two div-containers in one row, the left one holds an input bar, the right one holds a small background image (search button).
It's showing fine in Opera & Firefox, MSIE 9.0+ but when I view it in chrome the right container's background image is slightly off position (shifted downwards by a few pixels).
I set the background color to red to highlight the issue:
screenshot
index.php outtake:
<div class="header_inner_right">
<form id="search_bar" method="post" action="" onsubmit="return checkSearchQuery();">
<div class="left">
<input id="search_field" name="q" type="text" value="Search riddim, artist, tune, label and producer"
onfocus="searchFieldValue_onFocus();" onblur="searchFieldValue_onBlur();">
</div>
<div class="right">
<input id="search_button" src="images/search_button.gif" type="submit" value="">
</div>
</form>
</div>
index_chrome.css (used if php script detects chrome browser):
#charset "ISO-8859-1";
#search_bar {
width: 450px;
height: 37px;
background-color: red
}
#search_bar #search_field {
border: 0px;
width: 365px;
height: 37px;
padding-left: 20px;
padding-right: 20px;
background-image: url(../images/search_field.gif);
background-repeat: no-repeat;
font-weight: bold;
color: #c0c0c0;
background-color: #ffffff
}
#search_bar #search_button {
cursor: pointer;
border: 0px;
outline: none;
height: 37px;
width: 45px;
background-image: url(../images/search_button.gif);
background-repeat: no-repeat
}
How to fix it and adjust the y-position of the magnifying-glass background image so its perfectly aligned with the left div's background image and fully concealing the red background of the right div container?
EDIT: http://jsfiddle.net/YcraM/
Sorry, forgot about JSFiddle!
This might not be the answer you want to hear, but it's pretty much impossible to make most input elements look identical cross browsers. I urge you to fashion the submit button from a div element. Example:
<div class="left">
<input id="search_field" name="q" type="text" value="Search riddim, artist, tune, label and producer"
onfocus="searchFieldValue_onFocus();" onblur="searchFieldValue_onBlur();">
</div>
<div class="right">
<div id="search_button"></div>
</div>
Style the div with css to your liking - remember to use the :hover and :active pseudo classes. Then, using for example jQuery, make it functional like this:
$('#search_button').on('click', function(e) {
$(e.currentTarget).closest('form').submit();
});
I've tested it in Chrome 21 and FF 14, it seems setting line-height:0px; fixes the issue.
div.right {
float: right;
line-height:0px;
}
div.left {
float: left;
line-height:0px;
}
http://jsfiddle.net/YcraM/3/
I haven't tested in other browsers, so forgive me if this isn't the best solution.
you can add float:right (or left) to #search_bar #search_button, that fix the issue as well
I have inputs with jQuery validation and I'm inserting images, when input is required, but it add some margin, and moves my divs.
Here is my fields without validation:
and inputs with error:
I tried different variants: adding z-index, positioning, but couldn't do this.
Here is my html with errors:
<form ... >
<div class="field3">
<div class="pickers">
<span id="pickers">From</span>
<input id="report_start_date" name="report[start_date]" size="30" type="text" class="hasDatepicker error"><label for="report_start_date" generated="true" class="error" style="">bla bla bla</label><
</div>
<div class="pickers"><span id="pickers">To</span>
<input id="report_end_date" name="report[end_date]" size="30" type="text" class="hasDatepicker error"><label for="report_end_date" generated="true" class="error" style="">bla bla bla</label>
</div>
</div>
<input name="commit" type="submit" value="Run Report">
</form>
And my css:
label.error {
background: url('../images/not_valid.png') no-repeat;
display:inline;
margin-left: 5px;
padding: 15px 0 5px 5px;
color:transparent;
}
label.valid {
background: url('../images/valid.png') no-repeat;
display:inline;
margin-left: 5px;
padding: 15px 0px 10px 50px;
width: 47px;
height: 36px;
color:transparent;
}
#pickers{
font-weight: bold;
}
.pickers{
display: inline;
padding-top: 5px;
}
(copied from the question comment)
Try using position: absolute for the labels that contain the validation marker images. This way they will not take part in the normal layout and update it whenever you need to show/hide them.
Position it however you want, and give it the css style visibility:hidden; that'll keep it part of the document flow while hiding it until you need it. Then, when you need it, use jQuery (or whatever you want to use -- jQuery is easiest) to un-hidden it.
I am having a ridiculous problem where my input text field and submit buttons are not lining up and I really can't figure out an elegant solution of how to fix it. As you can see in the image below, the input text field (labeled "Enter Keywords" in the upper right") is 2px higher than the "Search" submit button:
Here is the HTML:
<div id="search">
<form action="#" method="POST" id="search_form">
<div id="search_inputs">
<input type="text" placeholder="Enter Keywords" name="keywords" />
<input class="button" type="submit" name="search" value="SEARCH" />
</div>
</form>
</div>
Here is the css code:
#search_form .button {
background: black;
color: white;
padding: 3px 15px;
border: none;
font-size: 7pt;
height: 18px;
}
#search_form input[name="keywords"] {
width: 175px;
}
#search {
margin-top: 7px;
float: right;
}
I'm pretty sure setting the font-size to 7pt is messing it up, but I'm not sure why and I don't know how to deal with this because that's the font size of my other buttons in the area.
Thanks for any help!
adding a float: left; to the #search_form input[name="keywords"] style align's their tops correctly, then adding some margin-right should get you good to go.
Fiddle
The issue stems from the float: right on the search button. The input box has a natural display: inline-block to it, which causes the slight drop. Normally when you float right the fix to this is to move that element upwards in the DOM. This won't work in this case. By changing the input to a floated element you are also forcing it to be display: inline.
Though I'm not sure why you can't just add a display: inline to the element.