I have a modal popup window and I'm trying to position my error message for a required field. As you can see, I get a scroll bar but I would like the error message to hang off of the popup window (as I've highlighted with the dashed line). Is this possible?
HTML:
<span class="field-validation-error" data-valmsg-for="Street1" data-valmsg-replace="true" style="z-index: 99999; position: absolute; top: 96.953125px; left: 315.5625px;width: 150px;"><span for="Street1" class="" style="">This is a required field.</span></span>
I ended up moving the error message to the middle of the textbox. I didn't want to increase the width of the modal window just to make room for the error messages. That would be too much white space.
Related
I have a tricky layout that I'm trying to add type-to-search to. (The actual code uses Angular, but it looks like my problem is just the CSS.)
https://jsfiddle.net/dowxw1dz/2/
In a single TD, there are two floating bits off to the right (a descriptive label, and a button unrelated to the label). The main part of the TD is a text input, which takes up the remainder of the space. I'm trying to enhance the input by making it show a div with search results below it, overlaying the stuff below the input.
The problem I'm hitting is that the div containing the input is overflow:auto, so when the search results show up, they just add a scrollbar to the input div (with the search results visible if you scroll), rather than showing the search results on top of the other content. I could fix this by changing the overflow to something else, but then the two floating elements to the right decide to get out of the way of the input.
How can I get the search results to show over the lower content, rather than being trapped in the input div with a scrollbar? Ideally, I want the search results to be exactly as wide as the input (which is going to be variable), but my first problem is just to get the search results to show without either shoving around the floating elements or shoving the results behind a scrollbar.
HTML:
<div style="width:600px;">
<input type="button" value="Button!" style="float:right; width:100px;"/>
<span style="float:right"> Category </span>
<div class="inputRow">
<input type="text" id="input"/>
<div class="searchResults">
Results!
</div>
</div>
</div>
<div style="width:600px;">
There's other stuff that goes here. The searchResults div should cover this without pushing it out of the way. (The search results will be clickable to pick something, and then it'll go away.)
</div>
CSS:
.searchResults {
position:absolute;
top:100%;
background-color: white;
border: 1px solid black;
z-index: 50;
display: none;
}
.inputRow {
position:relative;
overflow:auto;
}
input {
width: 98%;
}
div {
z-index: 0;
}
JS:
$("#input").change(function() {
$(".searchResults").show();
});
It seems you need to use position fixed instead of position:absolute, and assign top:7% it will work. It's a way around. Still can't figure out why position:absolute is not working. I'm yet in the learning phase.
.searchResults {
position:fixed; /* instead of : position:absolute;*/
top:7%; /* instead of : top:100%;*/
background-color: white;
border: 1px solid black;
z-index: 50;
display: none;
}
Fiddle here : https://jsfiddle.net/nithin_krishnan/dowxw1dz/5/
The solution was simply to ignore the input element, and put the results in the content below the input, instead.
Unfortunately, that meant that setting the width had to be done in JavaScript instead of simply relying on CSS to do the right thing. I ended up using $(".searchResults").width($("input").width()) in order to make the width of the results match the width of the input. (And I removed the top: 100% from the .searchResults CSS class.)
https://jsfiddle.net/dowxw1dz/7/
<div style="width:600px;">
<input type="button" value="Button!" style="float:right; width:100px;"/>
<span style="float:right"> Category </span>
<div class="inputRow">
<input type="text" id="input"/>
</div>
</div>
<div style="width:600px; position:relative;">
<div class="searchResults">
Results!
</div>
There's other stuff that goes here. The searchResults div should cover this without pushing it out of the way. (The search results will be clickable to pick something, and then it'll go away.)
</div>
I have a pop-up layer with a contact form that shows when a user clicks on the "Contact" button. The layer is coded something like this:
<div id="form-overlay">
<div class="form-layer">
<h2>Fill This Form</h2>
<form>
......Form fields, Text.....
</form>
</div>
</div>
And the associated style definitions are:
#form-overlay {position: fixed;top: 0;bottom: 0;left: 0;right: 0;background: rgba(0, 0, 0, 0.7);z-index:100;display:none}
#media (max-width: 750px), (max-height: 650px) {
#form-overlay {position: absolute}
}
.form-layer {position:relative;background-color:#eeeeee;width:90%;max-width:750px;z-index: 102;margin:20px auto;color:#333;padding:20px;font-weight:300}
The problem is that in some languages (German, Dutch especially) the text is much longer, taking up multiple lines, and pushes the Submit button below the fold, especially on smaller laptops.
When users try to scroll, the background scrolls, but the fixed position doesn't allow the form to scroll. This isn't ideal, of course, as users can't submit the form then.
If I don't make the form fixed, when users scroll down, the dark grey overlay ends at the screen height and then that looks odd.
Question: How can I fix this problem?
Just try to add 'overflow:auto' on #form-overlay block. It could help )
Hide 'overflow: hidden;' on background and enable 'overflow: auto;' on foreground.
Does anyone have a code for a page up button with endless scrolling? So no matter where the visitor is on the page, they will always see the button to bring them back to the top of the page.
Give this a try:
<div id="toTop" style="position: fixed; right: 20px; bottom: 20px;" onclick="javascript: scroll(0, 0);">Top</div>
You can fancy it up with more CSS and a smooth JavaScript scroll behavior if you want, but this should at least get you started.
This is my code:
<div id="divSpinner" style="margin-top:30px; visibility:collapse;">
</div>
<br />
<div id="divPaging">
</div>
I'm trying to show a spinner, and afterwards show some content in the 'Paging' div (Using Javascript).
The spinner and the 'Paging' div are not visible at the same time, so I've tried to collapse the Spinner visibility, but the 'margin-top' still effects the position of the 'Paging' div.
What should I do ?
you must use position: absolute; or position: relative; on your divPaging css selecting between them related to your code ,if you put link from web page i can say you witch one and how.
I've set 'display: none;' instead of 'visibility:collapse;'
I have a div element that at the beginning is hidden. It appears when a button is clicked. the problem is that this div has a scroll and when it appears, it is at the end of scroll. How can I fix this?
The code is something like this:
<div style="width: 412px; height: 351px; overflow: auto; position: relative;">
<div style="width: 540px;">
Here is a form
</div>
</div>
The first div is that is hidden at the beginning.
On your button that displays the div, add this javascript to set the div to be scrolled to the top.
document.getElementById('id').scrollTop = 0;
Per your comment, if you want to set the scroll without modifying the button's code, you could try running it on page load:
<body onload="javascript: document.getElementById('id').scrollTop = 0;">
Or, you could run it at the bottom of the page:
<script type="text/javascript">
document.getElementById('id').scrollTop = 0;
</script>
I would suggest showing your code, providing a link, or creating a test page for people to view and debug. It's difficult to see what's going on without some context.
Here's an example that, I believe, shows what you want: http://jsbin.com/emoji4/edit
This uses the jQuery library, so I'm not sure it will meet your needs.