Not sure why this is happening, but couldn't find anything on this. Every input type="checkbox" look like radio buttons on iPads. Has anyone come across this issue and if so, how were you able to fix the problem?
Thank you guys!
<div>
<input type="checkbox" name="checkNow">Check Now
</div>
For Safari version 6, default checkbox styling has border-radius set to valid value. Clearing the border-radius value fixed the issue
input[type="checkbox"]{
border-radius: 0px;
}
I had a similar issue, but mine was user-created.
I had a width: auto; on all my input[type="radio"]. Simply removing that, and not explicitly defining a width, fixed the issue.
Related
I want to use the white-space CSS property in an HTML textarea.
Basically if someone types a bunch of text with line breaks in a textarea, and then submits this data to be stored in MySQL, I want to use the white-space CSS property to display those line breaks in the textarea. But when I try it it's not working and just displays the text all together in one big paragraph, without any breaks or anything. Is there a way to do this?
<form action="includes/changebio.php" method="post" id="form1">
<textarea id="bio" style="width: 440px;
margin-top:3px;
text-align:left;
margin-left:-2px;
height: 120px;
resize: none;
outline:none;
overflow:scroll;
**white-space:pre-line;**
border: #ccc 1px solid;" textarea name="bio" data-id="bio" maxlength="710" placeholder="<?php echo stripslashes($profile['bio']); ?>"></textarea>
<input type="image" src="assets/img/icons/save-edit.png"class="bio-submit" name="submit" value="submit" id="submit"/>
</form>
textarea{white-space:pre}
When I've seen this, it's because your textarea is inheriting a white-space:nowrap from something. It can also be complicated by a wrap="no" on the textareas which can be useful sometimes.
The default behavior for a textarea nowrap is pre, so simply setting the css as above at the bottom of your styles will override anywhere that is setting the white-space.
If you inspect your textarea element, you'll most certainly find that somewhere in the hierarchy you're setting the nowrap property somewhere on some type of element that is overriding the default textarea behavior.
Don't.
<textarea> elements already handle whitespace literally. There is no need to try and take things into your own hands.
Things seem to be working ok for me... Tossed this into a codepen just to test it. Newline characters appear fine within the textarea when added directly.
Don't know what's going on. Is PHP stripping newline characters? Are you using double quotes around whatever you are passing in through $profile['bio']?
Here's an answer that might help you: The .val() of a textarea doesn't take new lines into account
The last response, in particular. Based on your code, it doesn't sound like the .replace() method is what you need (but I could be wrong... maybe I'm not understanding what you are doing).
one line of jquery will solve the problem
$('#bio').text('');
or Javascript
document.getElementById("bio").innerText = '';
I have this fairly unusual problem (after what I've understood when asking others), it seems that my -tags don't understand how much of the screen that is used by other elements, and therefore push elements out of screen.
I thought it might had something to do with the use of position:fixed, but it didn't seem to solve it when removing the position-part at all.
This is the main markup that seems to have problems, in wich I really can't seem to see any errors.
<div id="search">
<div id="searchfield">
<span id="searchinput">
<input type="text" id="s" name="s" />
</span>
<button>Search</button>
</div>
<div id="searchresults">
<ul class="longlist">
</ul>
</div>
</div>
The problem is best seen in this jsFiddle where it seems #searchresults is pushed out of #search by #searchfield.
As I really don't know what's the problem, any attempt on using Google have left me with no good answer to where my problem really is.
I have tried removing any JS that modifies the at all, and as we can see the jsFiddle does not run any JS at all, and still my markup/CSS does not work.
The height of #search is set to 400px in this fiddle to show the flaw better. But the same error occurs when it's 100% (wich is the value it should have in production-code).
Does anyone have any idea why this is happening?
This is caused by an overflow problem. The div "#searchfield" is pushing down the other content.
Setting the height to "auto" by removing the line "height: 400px;" on "div#search" and set a fixed height on "div#searchresults" fixes the problem.
#search{
height: 400px;
}
Taking the "div#searchfield" outside of the "div#search" also works.
<div id="searchfield">...</div>
<div id="search">...</div>
These methods show that the overflow problem is caused by mixing relative and absolute heights. You should move some of your styles relating to height from "div#search" into "div#searchresults" to fix this.
It seems to work at
#search{
height: 100%;
}
no?
link:
http://jsfiddle.net/KX9BV/8/
I have a search textbox and two image buttons on a page I created with ASP.NET.
When I look at the page with either IE8, Google Chrome or Opera, the textbox does not align with the two image buttons. The buttons appear higher than the textbox and I can't tell why.
Here is the key markup:
<div id=searchbar>
<div id=Panel1
onkeypress="javascript:return WebForm_FireDefaultButton(event, 'btnSearch')">
<input id=txtSearch type=text name=ctl00$txtSearch>
<input id=btnSearch title=Search src="Test_files/search.png"
type=image name=ctl00$btnSearch>
<input id=btnAdvanced title="Advanced Search" src="Test_files/adv.png"
type=image name=ctl00$btnAdvanced>
</div>
</div>
NOTE: I realize there are a few strange things here such as no quotes around the ids. But there ARE quotes around them in my source. The above snippet is from saving the content from IE and it made a number of changes to the markup.
I also posted the same code at http://www.blackbeltcoder.com/Test/Test.htm if anyone would be willing to take a look. The issue is with the search controls to the right of the black bar near the top.
Thanks.
Try
vertical-align:text-bottom;
on the elements that are too high. It's a common problem. You can try out other options for that CSS property too if that isn't quite right. Have a look here
just add
vertical-align: middle;
to the the input tags css and that should solve the issue
Can I hide the borders of the searchbox ? I would like it completely white, just the text should be visible. And I need a solution for all browsers.
See the picture:
http://dl.dropbox.com/u/72686/searchBox.png
you can add this
<input name="textfield" type="text" class="hide_border" id="textfield" />
css
.hide_border{
border:none;
*border:solid 1px #FFF;
}
By using a standard checkbox I am not sure whether you get this effect in a cross browser way. You can use a custom element and make it act like a checkbox using CSS and javascript.
See this one which uses jquery
Fancy custom radio and checkbox
I'm not sure if I understand correctly. Why don't you just hide the checkbox and leave the label ? (Later using javascript and such you can redisplay the checkbox)
Checkboxes can not be styled in all browsers. The common solution is to use two images, toggling between the two when clicked (and updating a hidden field as necessary).
<style>
.inputsearch input
{
background-color: #FFF;
border: none;
}
</style>
<div class="inputsearch" style="text-align:left;">
<input type="text" value="HEy there ">
</div>
Styling checkboxes isn't doable in a crossbrowser fashion without some jQuery, have a look at this: Custom checkboxes with jQuery. It's the only way to do it, standard checkboxes cannot be styled in all browsers.
Is there an clean alternative that doesn't make the text disappear in the following:
<div style="background-color:#ddd; padding:10px 0 50px 0;">
<ol><li>In what year were you born?</li></ol>
<div><select name="c_record" size="1">
<option value="">-- Select One --</option>
<option value="1">1900</option>
<option value="2">1902</option>
</select></div>
</div>
If I change the padding on the outside div to: padding:10px 0 0 0; the text shows up again.
I have also tried adding a second div inside the outmost div and adding the padding to it, but that doesn't work either. Add margin to this inside div doesn't have any affect for the top and bottom margins.
Any ideas?
Edit: I am using IE 6 & 7 and I have no other code on the page, no doctype, stylesheets--just the above code.
Adding position:relative; to your style will fix this problem. It's called affectionately the Peekaboo bug.
Here is a link that explains it in a little more detail.
I would agree that you should just try using margin though since adding position:relative can cause other problems. Also browsers don't consistently follow the box model standard with padding.
Try margin instead of padding?
Are these the only styles? If there is anything floating things get complicated fast. Please try this in it's own file with just the doctype, html, head, etc. There is nothing wrong with the above, in isolation.
I am using IE 6 & 7 and I have no
other code on the page, no doctype,
stylesheets--just the above code.
It is just foolish to try to solve problems by letting IE default to quirks mode.
In any case, #Jeremy B has a good solution with the height: 1%. This works just fine for me in IE6:
<div style="background-color:#ddd; padding:10px 0 50px 0; height: 1%;">