On http://www.southdevonaonb.org.uk/cordialemapping/ in any of the tabs under "Wembury" I have two inputs on the same line - the first is a check box and the second is an image (blue information icon).
I want both inputs to float to the right of the parent div so that vertically they all appear inline.
This is the HTML:
Letterbox locations and results
<input type="image" align="right" id="info-image" class="info-image" src="images/info.png" title="Click for more information about this layer" onclick="layer0()" value='Info'/>
<input type="checkbox" id="layer0" onclick="toggleLayer(0)" unchecked><br />
And the CSS:
.info-image{
float:right !important;
display:inline !important;
}
#info-image{
float:right !important;
display:inline !important;
}
What I have tried:
I have given the input image a class and ID and tried forcing it to float to the right as well as trying the display tag for a similar effect, but with no luck. How can I achieve this?
Screenshot here of what I am trying to achieve:
http://www.southdevonaonb.org.uk/cordialemapping/help/screenshot1.png
I am not exactly sure as to how you want it to appear, but from the things perceived, here is the solution.
The HTML:
<input id="info-image" class="info-image" align="right" type="image" src="images/info.png" title="Click for more information about this layer" onclick="layer100()" value="Info">
<br>
<input id="layer100" type="checkbox" unchecked="" onclick="toggleLayer(100)" style="margin-right: -15px; margin-top: 7px;">
The CSS:
.info-image{
float:right !important;
display:inline !important;
}
#info-image{
float:right !important;
display:inline !important;
}
Hope this helps.
EDIT
I just got your screenshot notification and have made some edits.
The HTML:
<div>
<p style="float: left; width: 70%;">Parish boundary line Parish boundary line</p>
<p>
<input align="right" type="image" value="Info" onclick="layer100()" title="Click for more information about this layer" src="images/info.png" class="info-image" id="info-image">
<input type="checkbox" unchecked="" onclick="toggleLayer(100)" id="layer100">
</p>
</div>
<div>
<p style="float: left; width: 70%;">Parish boundary line Parish boundary line</p>
<p>
<input align="right" type="image" value="Info" onclick="layer100()" title="Click for more information about this layer" src="images/info.png" class="info-image" id="info-image">
<input type="checkbox" unchecked="" onclick="toggleLayer(100)" id="layer100">
</p>
</div>
<div>
<p style="float: left; width: 70%;">Parish boundary line Parish boundary line</p>
<p>
<input align="right" type="image" value="Info" onclick="layer100()" title="Click for more information about this layer" src="images/info.png" class="info-image" id="info-image">
<input type="checkbox" unchecked="" onclick="toggleLayer(100)" id="layer100">
</p>
</div>
You need to just need to remove your <p> tag which has the checkbox and the image and replicate the full <p> tag with the <div> code provided above. I hope this helps now.
try this, u have to set the right of the image
info-image{
float:right !important;
display:inline !important;
right: 4px;/OR// right: 40px;/
}
Related
I know there's a ton of similar questions about this on here, but none seem to address the issue for me.
css code:
/*Deferred Payment Popup*/
div.DeferredPaymentPopup {
}
div.DeferredPaymentPopup input.RefreshImage {
background-image: url(../Images/Refresh-icon.png);
background-position: left top;
display: inline-block;
float: left;
width: 15px;
height: 18px;
}
Code on page -
<div id="DeferredPaymentPopup" class="DeferredPaymentPopup newportal popup" title="Deferred Payment Calculator">
<div data-bind="with: statement.viewModel.DeferredPaymentModel">
...
<div id="divDollarCalc">
<div style="float: left; padding-left: 4px">
<input type="image" onclick="return false;" title="Refresh" class="RefreshImage" />
</div>
</div>
There's a number of nested divs on the page, and a couple of them have their own IDs - I included one of them for illustration.
No issues in IE or Edge.
All looks well on inspect in Chrome:
Thoughts?
You can use src attribute of input[type=image]
<input type="image" src="../Images/Refresh-icon.png" />
Clarification for the questions from comments:
For input[type=image] and img tags in chrome, if there is no src attribute or invalid src attribute, browser shows the icon of broken image which is not background, that's why you cant override it from css background.
However img tag is not showing the icon when there is no src attribute at all, it is showing only when the value of src is invalid.
But for input[type=image] it is showing up even when there is no src attribute, this behavior is different for img and input[type=image].
I don't know the exact reason behind that, but my guess is that may be src is optional for img but not for input[type=image].
As per the problem input[type=submit] not working, if you can provide the new code you have tried we should be able to help you with that.
This is a small experiment that shows how it works
<p><strong>input type="image"</strong></p>
<p>Without src</p>
<input type="image" style="display:inline-block;width: 40px;height: 40px;background: #000;"/>
<p>With src</p>
<input type="image" style="display:inline-block;width: 40px;height: 40px;background: #000;" src="https://static-cdn.jtvnw.net/jtv_user_pictures/e91a3dcf-c15a-441a-b369-996922364cdc-profile_image-300x300.png"/>
<br />
<br />
<p><strong>input type="submit"</strong></p>
<p>With background</p>
<input type="submit" style="display:inline-block;width: 40px;height: 40px;background: #000;"/>
<br />
<br />
<p><strong>img</strong></p>
<p>Without src</p>
<img style="display:inline-block;width: 40px;height: 40px;background: #000;"/>
<p>With empty src</p>
<img style="display:inline-block;width: 40px;height: 40px;background: #000;" src />
<p>With invalid src</p>
<img style="display:inline-block;width: 40px;height: 40px;background: #000;" src="//avcs" />
<p>With valid src</p>
<img style="display:inline-block;width: 40px;height: 40px;background: #000;" src="https://static-cdn.jtvnw.net/jtv_user_pictures/e91a3dcf-c15a-441a-b369-996922364cdc-profile_image-300x300.png" />
Use .DeferredPaymentPopup, input.RefreshImage{...} because RefreshImage is not a child of the DeferredPaymentPopup div
Edit
Is this what you intend to achieve? Instead of input type="image" , I used text
div.DeferredPaymentPopup {}
div.DeferredPaymentPopup input.RefreshImage {
background: url("http://res.cloudinary.com/sayob/image/upload/v1526907328/483257_vwhhfw.jpg") no-repeat left top;
display: inline-block;
float: left;
width: 100px;
height: 18px;
}
<div id="DeferredPaymentPopup" class="DeferredPaymentPopup newportal popup" title="Deferred Payment Calculator">
<div data-bind="with: statement.viewModel.DeferredPaymentModel">
<div id="divDollarCalc">
<div style="float: left; padding-left: 4px">
<input type="text" onclick="return false;" title="Refresh" class="RefreshImage" />
</div>
</div>
</div>
</div>
Use .DeferredPaymentPopup, input.RefreshImage{...} because RefreshImage is not a child of the DeferredPaymentPopup div
I am very new to HTML and hesitate before posting this question, because it very simple looking problem, but I am not getting good answer after Googling.
So following is my simple form code, I wanted to keep both the form input elements in different line. Problem is I literally need to use hardcoded 250px width to div, so that element will code in different lines.
How do I improve my code so it will be portable across different browsers and screens?
Secondly, distance between all the lines in very less, they are actually collapsing on each other. How to give more vertical space to elements?
<form id="frm">
<div style="width: 250px;">
<label>Name </label>
<input type="text" required="required" />
<label>Email</label>
<input type="text" placeholder="pranit#gmail.com" />
<input type="submit" value="submit" />
</div>
</form>
If you want each label/input pair to appear on a line of its own, you should make that happen in markup using elements that actually cause line breaks, such as wrapping each of the pairs in a div or p element, or using <br> between them, or making each of them a row of a table. It is very unreliable to set just a width on a block and expect browsers to automatically wrap lines. Consider e.g. what happens in your example if the user sets font size to 60px (maybe due to eyesight problems).
To set vertical spacing, use CSS. There are many ways to do that, and the techniques partly depend on the markup chosen. Here is one example:
<style>
td { padding-bottom: 0.5em; }
</style>
<form id="frm">
<table>
<tr>
<td>
<label for="name">Name</label>
<td>
<input id="name" name="name" type="text" required="required">
<tr>
<td>
<label for="email">Email</label>
<td>
<input id="email" name="email" type="email"
placeholder="someone#example.com">
<tr>
<td colspan="2">
<input type="submit" value="submit">
</table>
</form>
Float the label and inputs and specify 50% width with border-box box sizing method. You also need a wrapper element for each label-input pair which is used to contain the floats.
form > div {
width: 250px;
margin: 1em 0;
overflow: hidden;
}
label,
input {
display: block;
float: left;
width: 50%;
box-sizing: border-box;
}
input[type="submit"] {
width: 100%;
}
<form id="frm">
<div>
<label>Name</label>
<input type="text" required="required" />
</div>
<div>
<label>Email</label>
<input type="text" placeholder="pranit#gmail.com" />
</div>
<div>
<input type="submit" value="submit" />
</div>
</form>
1) you can define the diplay style for the label to block, this will bring label onto new line,
http://jsfiddle.net/naeemshaikh27/rvg4jdbo/
label{
display:block;
}
<form id="frm">
<div>
<label>Name </label>
<input type="text" required="required" />
<label>Email</label>
<input type="text" placeholder="pranit#gmail.com" />
<input type="submit" value="submit" />
</div>
</form>
2) Or if you want to keep the label with the input element, then just add a div element between them http://jsfiddle.net/naeemshaikh27/rvg4jdbo/1/
If each element (labels and inputs) has to have own line, set them display: block;
#frm label, #frm input {display: block}
or
#frm div > * {display: block;}
If you need to have the label and input on one line, you can try to work with floats and clear.
label, input {float: left;}
label {width: 80px; clear: left;} /* set width to align inputs and clear to 'set' a new line */
First use block elements for vertical placement of elements.
label{
display:block;
}
Use width in percentages not pixels if you can. It will keep it better, specially if they are in same line(inline).
<p style="width:50%"> </p> <p style="width:50%"> </p>
Can use media queries too for different resolutions.
label tags and input tags are inline by default. You can set them both to display: block to make them stack. You can also add some margin to space them out:
label, input{
display: block;
margin: 10px 0;
}
EXAMPLE 1
OR
If you want the label and input inline but each one stacked, you can simply wrap them with a block element like a div:
<form id="frm">
<div>
<div>
<label>Name </label>
<input type="text" required="required" />
</div>
<div>
<label>Email</label>
<input type="text" placeholder="pranit#gmail.com" />
</div>
<input type="submit" value="submit" />
</div>
</form>
EXAMPLE 2
My form on this page http://fashiondevelopmentgroup.com/
In the sidebar ENJOY OUR FREE NEWSLETTER is not looking right in Firefox. Everywhere else it is fine. Is there a way to code CSS specific to Firefox to fix this?
I have used the -moz-margin-start to set the horizontal css, but is there a specific vertical code for Firefox?
Thanks,
Brian
here is my code:
input, textarea, select {
vertical-align: middle;
color: #889291;
margin-left: 20px;
margin-top: 50px;
}
.button {
display: inline-block;
margin-left: 200px;
margin-top: -55px;
color: #fff;
background-color: #889291;
-moz-margin-start:67%;
-webkit-margin-start:70%;
}
HTML:
<div id="optin">
<form action="http://fashiondevelopmentgroup.us2.list-manage1.com/subscribe/post? u=1eed93a2e1bb3dc00d80e42af&id=25ea8ae595"; method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" style="background- image:url('HERE IS WHERE YOU WILL PUT THE LINK TO YOUR IMAGE THAT YOU UPLOADED');background-repeat: no-repeat; width:300px; height:151px;" novalidate>
<input type="email" size="30" value="Email Address" name="EMAIL" class="required email" id="mce-EMAIL" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;">
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div>
<div class="clear">
<input type="submit" value="SIGN UP" name="subscribe" id="mc-embedded-subscribe" class="button">
</div>
</form>
</div>
in your my_style.css line 8 you have a 50px margin-top for all input, textarea, and select elements. get rid of that so you can style individually for your situation.
then add position:relative you the parent div of the submit button. then add position:absolute; top:0;right:0; to your .button class.. this will align the button properly in firefox as well.
You will no longer need those margins in the .button class either. use the value in top: and right: to move the button exactly where you want it
From what I can tell, my form field is completely standard. The page is at http://worldcastmovie.com/login.php
The email field on the right is two lines tall, and input is centered. My code doesn't seem to reflect this, so is there another place within my site I should be looking?
Thanks in advance!
Ryan
Here's the code in question:
<div>
<label>Name:</label>
<input type='text' name='name'/>
</div>
<div>
<label>Email:</label>
<input type='text' name='email' id = 'email'/>
<div class='error'>
Please enter your email.
</div>
</div>
<div>
<label>City:</label>
<input type='text' name='city'/>
</div>
<div style='position:relative'>
<label>Desired Username:</label>
<input type='text' name='username' id='username'/>
<div class='error'>
Please choose different username.
</div>
</div>
<div>
<label>Desired Password:</label>
<input class='input' type='password' name='password' id='password'/>
<div class='error'>
Please specify different password.
</div>
</div>
<div>
<label>Confirm Password:</label>
<input class='input' type='password' name='cpassword' id='cpassword'/>
<div class='error'>
Please confirm your password.
</div>
</div>
<!--<div>
<label>Video:</label>
<input type='file' name='video' />
</div>
<div>
<input type='checkbox' name='terms' style='margin-left:12px;margin-top:20px;' id='terms' /><span style='margin-left:10px;'>I have read and agree to the <a href='terms.php'>terms and conditions</a></span>
<div class='error'>
You have to read and agree to the terms and conditions.
</div>
</div>-->
<input type='image' src='/images/register.png' id='submit'/>
</form>
It's matching the rule on #email on line 62 of style.css:
#email {
text-align: center;
color: black;
padding-top: 30px;
}
In other words: the element ID email is not used uniquely as it should, this rule is probably meant for some other element requiring the padding-top and the horizontal centering.
A simple right click and 'inspect element' would've shown you this as well.
you should make the email field left aligned currently it is centered and make the padding top to 0
#email {
text-align: left;
color: black;
padding-top: 0px;
}
You are using padding-top to make the email field look larger, I would play around with height not padding if you want it to the text to be vertical aligned to the middle and not padding-top..
#email {
text-align: left;
color: black;
height: 100px;
}
I'm taking my first steps in jQuery Mobile and I'm getting a bit disappointed with the lack of customization it provides...
As an example, I have a simple form and I'd like to customize the layout of the form components.
This is my code:
<form id="loginForm" action="#" method="post">
<input id="rememberMe" name="rememberMe" type="checkbox"/>
<label for="rememberMe">Remember me in this computer</label>
<a id="info" href="#" data-role="button" data-icon="info" data-iconpos="notext">Info</a>
<input id="submit" type="submit" value="log in" data-inline="true"/>
</form>
See the fiddle.
Concretely I'd like:
The rememberMe checkbox to be as wide as the text inside, and the info button to be inline with the checkbox.
The "group" containing the previous checkbox and button to be aligned to the right.
The submit button to be to the right as well.
Please provide an example of how such things can be achieved...
EDIT: I'd like something like this:
Customization you require will not come from jQM but from custom css.
Usually this could be easily done with jQuery Mobile grids but they are not that flexible. So you need a custom solution.
A div around every element is needed because jQM recreates every element with new style and unless we have a parent div everything will go to hell.
Working example: http://jsfiddle.net/Gajotres/8NB22/
HTML :
<form id="loginForm" action="..." method="post">
<div class="row">
<div class="inline-mid">
<a id="info" href="..." data-role="button" data-icon="info" data-iconpos="notext" class="middle-button">Info</a>
</div>
<div class="inline-left">
<input id="rememberMe" name="rememberMe" type="checkbox"/>
<label for="rememberMe">Remember me in this computer</label>
</div>
</div>
<div class="row">
<div class="inline-left">
<input id="submit" type="submit" value="log in" data-inline="true"/>
</div>
</div>
</form>
CSS :
.row {
min-width: 400px;
width: 400px;
}
.inline-left, .inline-mid , .row {
position: relative;
float: right;
}
.inline-mid {
margin-left: 10px;
padding-top: 5px;
}
This can be achieved using ui-grid classes.
Working Demo
Markup
<form id="loginForm" action="..." method="post">
<div class=ui-grid-a>
<div class=ui-block-a>
<input id="rememberMe" name="rememberMe" type="checkbox"/>
<label for="rememberMe" data-inline="true">Remember me in this computer</label>
</div>
<div class=ui-block-b>
<a id="info" href="..." data-role="button" data-icon="info" data-iconpos="notext">Info</a>
</div>
</div>
<div class=ui-grid-solo>
<input id="submit" type="submit" value="log in" data-inline="true"/>
</div>
</form>
Override CSS
.ui-block-a { width: 95% !important; text-align: right !important; }
.ui-block-b { width: 5% !important; padding-top: 5px !important; }
.ui-grid-solo { text-align: right !important; }
Layout should never be primarily the responsibility of Javascript code, as such you shouldn't blame jQuery Mobile for this.
Customization for different screen sizes should be done with CSS Media Queries instead, click the link for more examples than you'll ever need.