I have a MailChimp for WordPress plugin with form code as such
<p>
<label>Get new posts delivered to your inbox!</label>
<input type="email" id="my-input" name="EMAIL" align="right" placeholder="Your email address" required />
</p>
<p>
<input type="submit" value="Subscribe" />
</p>
It looks like this on the sidebar:
It seems everything is correctly right aligned within the sidebar except my input form. There is a right margin that I cannot get rid of.
I can put customer CSS like so, but it doesn't so anything.
#my-input {
text-align: right; /* This works */
margin-right: 0px; /* This doesn't work */
}
Any tips to edit either the HTML or the custom CSS to get this working?
You can try this code:
#my-input {
text-align: right;
margin-right: 0 !important;
display: block;
width: 100%;
}
paste this
#my-input {
margin-left: 320px !important;
width: 50%; }
you can check out here https://www.w3schools.com/code/tryit.asp?filename=FPP4AWLPX1NP
In my specific case, the solution was
#my-input {
width: 100%; /* Somehow width was not already 100% by default */
}
Maybe it was something in the Customizr Wordpress theme I was using that messed it up.
Thanks #BM RAFIQ for giving me code to try, if width 100% doesn't work for you try some of the other code he wrote.
if you want to use margin for input tag you have to specified width and using display:block. look at this question it may help you.
another way which I don't recommend is using !important. you can add margin-right:0px !important; in css.
Related
I'm working on a drag and drop field for files and so far I have been able to style it however I wish. Except I need to somehow add text that says 'drag and drop' inside the area. I'm not really sure how to accomplish this.
I have tried adding content:'drag and drop';
And I have tried a background image, but it was not scalable and not something that I believe is the right solution.
my html looks like this
<input type="file" class="form-control" name="uploadCover" value="" />
and my css looks like this
input[type="file"]{
padding-bottom: 4em;
padding-top: 2em;
width: 100%;
border: 1px dashed #000;
}
input[type="file"]:hover{
border: 1px dashed #67a5c5;
}
and the field looks like this...ignore the ugly yellow!
Any help or ideas would be wonderful! I'm really trying to avoid javascript.
How about this for a starting point? It uses a :after pseudo element, so that the content you're adding follows the control itself.
It is "centre aligned" (using margin auto 50%) to avoid overlapping the filename text, but you'll probably need add some more CSS to make sure this doesn't happen on your web page.
input[type="file"]:after {
content: "Drag and drop";
display: block;
min-width: 20em;
margin: auto 50%;
}
http://jsfiddle.net/jrG7v/
Edit: as pointed out this only works in Chrome. No text is displayed in Firefox, and IE11 (seems I've been upgraded since I last used IE10) still displays the text-style input box. Hopefully somebody else has a better answer.
For compatibility with browsers, I'd go with:
<div>
<input type="file" class="form-control" name="uploadCover" value="" />
<div class="drag">Drag and Drop</div>
</div>
div.drag { min-width: 100px; margin-top: -25px; padding-left: 10px; font-family: arial; font-size: 12px;}
Fiddle:
http://jsfiddle.net/jrG7v/3/
I have an input box and a button defined like so:
<form class="form-inline">
<input type="text" title= "language" class="input-block-level" placeholder="Insert Languages"/>
<button type="submit" class="btn btn-primary">Filter by Languages</button>
</form>
But the button shows up on the second line. Is it possible to position the button to the right of the input box?
I think you may be misunderstanding the use of input-block-level class. When this class is applied to an input field, the input field will take all available width.
As a result, any element that you place next to it, will roll over to the next line.
If you need the elements to be side by side, remove input-block-level and replace with a more appropriate class (input-mini, input-small, input-medium, input-large, input-xlarge, input-xxlarge or span classes).
I'm using input-xxlarge, but it's still not big enough. How do I
customize it? I've tried something like .input-xxlarge { width:
1500px; !important; height: 30px !important; } , but it doesn't
override it. – Parseltongue 13 mins ago
Inspect the element with developer tools (like in Chrome, Safari etc) and see if other widths/heights are overriding your explicit declarations. I tried changing it on my end and was successful when I changed the actual class in bootstrap.css
set widths desired to each element and float them:
form{overflow: hidden}
form input{
display: block;
width: 70%;
float: left;
}
form button{
display: block;
width: 30%;
float: left;
}
I'm trying to create a custom form input that utilizes some images, it should look like this:
I've tried the following:
<style>
input {
background-image: url(../img/search-background-middle.png);
background-repeat: repeat-x;
padding: 17px 0;
font-size: 12px;
border: none;
margin: 0;
}
form {
padding: 0;
margin: 0;
}
</style>
<body>
<form>
<img src="../img/search-background-left.png"/>
<input type="text" value=" start typing to search..." size="40" maxlength="255" />
<img src="../img/search-background-right.png"/>
</form>
</body>
Which results in:
Why?? I'm not only interested in the solution, but also in the reason why this doesn't work. I think my understanding of inline elements put next to each other is flawed.
Try setting the vertical-align to top
form * {vertical-align:top;}
also remove the spaces between the imgs and the input
remove whitespace between img and input elements (including linebreaks)
set height and line-height on input element to match the image height
set padding and margin to 0 on input.
you may also need to add a float: left !important; to the input. Sometimes that fixes my issues when things aren't lining up
A simple CSS issue that I can never seem to fix quickly -
I have a line of text followed by a form which consists of some invisible inputs and a submit button. I've removed the border and the background from the submit so just the text -
My html -
<p>Posted about 21 hours ago.</p>
<form class="button_to" data-remote="true" action="/comments/8/likes/114" method="post">
<input type="hidden" ...... > <!--not actual markup -->
<input type="submit" value="unlike" html_options="classlike_button_form">
</form>
my css -
p {
color: #595959;
float: left;
font: 85% "Arial",Verdana,sans-serif;
line-height: 131%;
padding-bottom: 0;
}
input {
background-color: transparent;
border: 0 none;
color: #3B5998;
font: 85% "Arial",Verdana,sans-serif;
float:left
}
The problem is that the text in the p tag and the text from the button are not aligned horizontally.
I'm using the reset css and Yahoo text sizing included in the HTML5 boilerplate.
I really don't want to fix it with margins or positioning, so any help would be great.
Thanks
EDIT - I'm unable to change the HTML structure
This seems to work: http://jsfiddle.net/8BHtz/6/
I removed the floats and added display: inline-block; vertical-align: middle; to p and form. It works in Chrome, Firefox, Safari and IE8. However, because of inline-block it does not work properly in IE7 or lower. Since p and form are now displayed inline you may want to wrap them in a div (http://jsfiddle.net/8BHtz/7/).
Looks ok when I plug your html and CSS into jsFiddle: http://jsfiddle.net/LAzUf/. Do you have Firebug? Does it look like the input tag is inheriting styles from another setting?
We have buttons of many sizes and colors that use background images. There is a label on the background image itself, but we need to keep the button's text in the HTML for usability/accessibility. How do I make the text disappear in all browsers?
Modern browsers are easy, I just used -
color: transparent;
It's Internet Explorer 7 that I can't get to comply. I've tried these CSS properties, and none of them can remove the text completely without destroying my site's layout in the process.
font-size: 0px;
line-height: 0;
text-indent: -1000em;
display: block;
padding-left: 1000px;
I would very much appreciate any help.
Personally, I go for the all CSS approach:
{ display: block;
text-indent: -9999em;
text-transform: uppercase; }
For whatever reason, text-transform: uppercase; does the trick for IE7. Of course, you'll probably have your own CSS along with that for additional styling (if needed).
Additional to your
color: transparent;
You can use something like
padding-left: 3000px;
overflow: hidden;
Regards
In some cases you can use the propery "content" to change what is contained in the element, personally though I would use javascript to do it.
Just write blank text into the element.
If the button is an input submit button, use the image
<input type="image" src="/images/some_image.png" />
You can style this with CSS
input[type="image"] {
border: 1px solid red;
width: 150px;
height: 35px;
}
If they are links, Dave provided the answer.
How do I make the text disappear in
all browsers?
I suppoose you want the altarnative text to disappear if the image is loaded.
For this puprpose you can use this:
<INPUT TYPE="image" SRC="images/yourButtongif" HEIGHT="30" WIDTH="100" ALT="Text In Case There Is No Image" />
You can apply additional styles if needed, but this minimum will do the job for you.
If I understand the question correctly, this might work (I don't have IE7 to test on at the moment, so not 100% sure)
For markup like this:
<a href="javascript:return false;" class="button" id="buttonOK"><span
class="icon">Ok</span></a>
Use this css:
span.icon {
/*visibility: hidden;*/
display:block;
margin-left:-1000;
width:100px;
}
or this might work depending on your requirements for usability/accessibility:
span.icon {
visibility: hidden;
}
I don't know what users / programs the labels need to be in the HTML for, but if it's for text browsers and such, maybe you could insert a JavaScript that removes the labels onLoad?
JQuery or Prototype would make that very easy.