I'm creating a honeypot field in a form exposed at the home page level of a site. The fields go:
honeypot
email
name
text area for comment
The honeypot is not supposed to show for real users, but should be available for bots to fill out. I used CSS like this:
.honey{
position: absolute;
left: -999em;
}
to position the honeypot:
<input class="honey" type="text" placeholder="your email" />
This isn't working. The input element stays firmly where it was. I've checked to make sure the CSS is the last one loaded, observing the proximity rule and that there is nothing more specific, and can't see any override.
Is there some magic I'm not getting?
Thanks
If your <input> is inside of another element (like a <div>) that has position: relative; set, the input will be positioned absolutely but in relation to that element.
Switch to position: fixed; because that's relative to viewable screen area.
Reference
Related
I am having trouble with two buttons at the top of my mobile site
www.thefriendlydentist.ie
They are clickable on desktop but on mobile I get no response?
The html is placed in the header of the WP theme.
<div id="topcontact-2" style="background-color:white;">
<p style="background-color:white;padding:none;"class="call-button" id="call-button"> CALL US </p>
<p style="background-color:white;padding:none;" class="call-button" id="email-button"> EMAIL US </p>
</div>
You need check your all elements (divs) properly, I strongly suggest you using mobile device toolbar on Chrome or Mozilla.
If you look on desktop browser using by mobile device toolbar, you will see the some elements overlapping the all page. So your buttons that you want to click stay behind of those elements.
- Option 1: remove overlapping elements
- Option 2: use z-index to manage them.
<div class="mobile-bg-fix-img-wrap">
<div class="mobile-bg-fix-img" style="/* width: 375px; *//* height: 767px; */"></div>
</div>
You can see in image how above elements fill the page.
How Z-Index Works?
All of us are quite comfortable set some x (left:10px) and y (top:10px) values to elements by using CSS but not for z-index. Z-index property defines the level of an HTML element on the screen. Let's check the elements below.
In brief, z-index will define the closeness of the elements to the user. In this sample you can assign elements like below:
red square z-index:10
blue circle z-index:56
white square z-index:985
in this order, nothing will change. In this case, we know that z-index is relative. Another important thing, we need to know about z-index, it will only work on an element whose position property has been explicitly set to absolute, fixed, or relative
To deep dive, please check the z-index documentation.
How to Activate Mobile Toolbar on Chrome?
Mobile toolbar shows how your elements are placed in a mobile browser. Using this tool, you can detect almost everything you would expect to see in a mobile browser. You can also inspect and alter your CSS codes easily.
Below image will guide you to how to activate mobile toolbar on Google Chrome.
Other Possibilites For The Problem
1. Javascript Blocking
Using javascript, you can override original behavior of an HTML element. Check below code, this will prevent the real action of the <a> element.
Non-clickable Link
Using JQuery
<script>
$(".prevent-click").click(function(){
return false;
})
</script>
Using Javascript
document.getElementsByClassName("prevent-click")[0].addEventListener('click', function (event) {
event.preventDefault();
return false;
});
Please check your codes carefully, is there any Javascript code to prevent the original action of HTML elements. In addition, to check this quickly, you can disable all javascript codes on Chrome by following steps below.
Open Developer Console
Go to Settings - right top corner of the inspection tool
Check the box (Disable Javascript)
Refresh the page.
Please go in to your CSS and make this change.
.mobile-bg-fix-wrap .mobile-bg-fix-img {
position: absolute;
width: 100%;
height: 125%;
left: 0;
top: 0;
background-size: cover;
}
To:
.mobile-bg-fix-wrap .mobile-bg-fix-img {
position: absolute;
width: 100%;
height: 125%;
background-size: cover;
}
The top and left set to 0 was overlapping the two buttons causing it that you could not click on them.
HTML links not clickable on mobile, but are clickable on desktop.
I have one solution. Try this
Html
<a href="https://www.stackoverflow.com" class="goclick">
css
.goclick{
position: relative;
z-index: 9;
}
For this, go to Google Chrome > Developer tools.
Inspect the element, if it is being overlapped by anything, add clear: both;
to the overlapping element.
Actually, in my issue, it fixed everything.
for me, i had a class with...
z-index: -1
which was forcing the parent <div> to the back. changing this to 0 or simply removing it, solved the problem
ref: https://www.sitepoint.com/community/t/solved-href-not-working/248882/6
I have a program that creates a report in HTML. That HTML file is displayed in a TWebBrowser component (Delphi) and basically prints the page using this code:
WebBrowserComponent.ControlInterface.ExecWB(OLECMDID_PRINT, OLECMDEXECOPT_DONTPROMPTUSER, vIn, vOut) ;
The report needs to match a pre-printed form. In order to place values exactly at the right place, I use CSS code like this:
#date_of_invoice {
position: absolute;
left: 3mm;
top: 90mm;
width: 29mm;
height: 5mm;
text-align: center;
font-weight: bold;
}
This was a working solution. Any new client that wished to use this program could hire a web designer and customize the HTML template for their needs. Today I got a new request, saying that there should be more than one pages printed at once. I can force new pages by adding:
<div style="page-break-after: always;">
content on page...
</div>
However, when absolute positions are used then page-break-after has no effect on the absolutely positioned elements. So here is the question: is it possible somehow to position elements relative to the top left corner of the current page? I know that HTML does not have a "current page" concept. But since we have "page-break-after" CSS property, I was hoping there might be something similar for positioning elements relative to the current page. Maybe there is a trick to place a small invisible element in the top left corner and position other elements relative to that invisible point of reference?
The other option would be to reimplement all reports from scratch and use PDF instead of HTML. Which would be a very bad idea because there are already several reports made with HTML, and I don't want to redesign them by hand, and then I don't want to tell my customers that they won't be able to customize the reports in the future.
I'm trying to get a screen reader to read the values of number spinners/ text boxes that have been disabled so that they are un-editable. The value of these boxes is important in context, but the screen reader (JAWS in this case) only reads the values of the widgets as 'unavailable'. I tried setting aria-required='true' to no such luck. Is there any other way to get a screen reader to say these values?
Ex:
<input id='exampleInput' disabled='true' aria-required='true'>1</input>
Using the Read-only attribute is the right option here.
if this will mess with you JavaScript then I suggest changing your JavaScript so that it will check for something other then the disabled attribute.
this can be done by using a Css Class, or by adding a new attribute, or you can add a new field to the DOM object and use that.
I encountered a similar problem recently, my solution was to use some informational text for all the disabled buttons, which is only viewable by screen readers. I used a button element so it still retains a place in the tab order, so if a screen reader user is tabbing through the form it will be announced, you need to implement some code to remove the elements from the DOM once the actual inputs are enabled.
The hidden element announces as “data value goes here element disabled” when tested with NVDA, you can use whatever text you want, obviously.
HTML
<input type="text" name="myDisabledElement" disabled="disabled">
<button aria-disabled=”true” class="sr-only">
data value goes here element disabled
</button>
CSS
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}
You can see it in abstract action here: http://codepen.io/chris-hore/pen/LEKyeM
Im new to CSS and HTML and learning html forms right now. I was wondering if it is possible to put a submit button within the text field. Much like how google has their voice search button in their search field.
and if so, how do i do this?
Thanks
Here is an example: http://jsfiddle.net/fatgamer85/9R2XC/
You need to put the element in absolute position and lay it on top of each other.
position: absolute; // absolute position of element
left: -20px; // lay the element on the search box
hope this helps
You cant put it within the element so to speak, but you can position it
HTML
<input type='text' />
<input type='submit' value='GO'/>
CSS
input{
display:inline-block;
position:relative;
}
input:last-child{
left:-40px;
}
Note that this is just one of the ways you can create this effect (you dont have to use a submit input element for example).
I have the following HTML:
<form action="http://localhost:2689/" method="post">
<span>
<label for="SearchBag.PowerSearchKeys" id="Label1"> Key words</label>
<input id="SearchBag.PowerSearchKeys" name="SearchBag.PowerSearchKeys" type="text" value="" />
<button id="powerSearchSubmitButton" class="fancySubmitButton" type="submit"><span><em>Search</em></span></button>
<span><em>Advanced</em></span>
</span>
</form>
The form's content needs to be centered over it's width (100% in this case).
The anchor needs to be directly under the button.
Because a picture can say a thousand words, here's the result of my awesome paint art skills:
(source: telenet.be)
And this whole block should be centered on the webpage.
--EDIT--
Because the content of all the controlls can varry greatly in length, I cannot give any element any width specifications (not even in %). Also, over estimating the width would leave confusing white spaces between elements. This too is not a desired effect.
Try setting 'display: block' on each element that you want on a separate line. You may also need to play with the margin and padding to get them centered (like margin-left: 50%; padding-left: -[1/2 width of element]) and text-align: center.
Why not just put a break in before the tag () then align the to the right?
I usually float form elements (left), and if I want to put the next one on a new line i use clear:left.
I'd replace the <span> with a <fieldset> for semantic correctness (I don't think span brings a lot to the table in terms of functionality), and apply some styling to that fieldset to the tune of
fieldset {
text-align: center;
width: 100%;
position: relative;
}
I can't tell for sure if that'll line up the anchor and the button correctly or not, but since the fieldset has position: relative set, you'll be able to position stuff if you need to with relative ease.
As much as i hate to say it, this is a case where use of tables might be considered.
But I would try positioning - i made a quick & dirty solution here
at JSbin
Basically you put your form into an element, center it with text-align and make the container position: relative. Then you use the id in the link to position it absolutely in reference to the parent. But it only works if the parent is an inline element.
Unless you change its display property (and you shouldn't), the span element should be an inline element, meaning that it exists in the flow of text. Putting block level elements inside an inline element isn't really a good idea.
You also have a lot of extraneous tags in there. Instead of this:
<button id="powerSearchSubmitButton" class="fancySubmitButton" type="submit">
<span><em>Search</em></span>
</button>
why not just do this:
<button id="powerSearchSubmitButton" class="fancySubmitButton" type="submit">
Search
</button>
The span does nothing, and the em can be emulated through CSS:
.fancySubmitButton { font-style: italic }`
Here's what I'd do:
<form>
<label for="SearchBag.PowerSearchKeys" id="Label1">Key words</label>
<input id="SearchBag.PowerSearchKeys" name="SearchBag.PowerSearchKeys" type="text" value="" />
<button id="powerSearchSubmitButton" class="fancySubmitButton" type="submit">Search</button>
Advanced
</form>
with the CSS:
form {
text-align: center;
}
.fancySubmitButton, .fancyLinkButton {
font-style: italic;
}
.fancyLinkButton {
display: block; /* this will put it on its own line */
}
Quick response to the comments: giving something the class "fancyLinkButton" doesn't imply that it has rounded corners. Anyway, if you want to put rounded corners on certain elements, I would still avoid using extraneous markup. If more wrapper elements are needed for whatever implementation you're using, then those should be added via Javascript. Remember that mozilla and webkit already support CSS rounded corners - eventually IE will too, and you'll be able to easily change your single javascript function, rather than wading through HTML to find everywhere where there are unneeded spans.