I've seen examples online of bootstrap forms or fields with validations under inputs (ie: please enter username). And upon validation success the message is hidden, it appears that the text/elements below the focused input jump or shift upwards.
Just curious if there's something built into bootstrap that will help keep the elements in alignment, minus the shifting upwards when the validation is hidden.
Examples I've seen the issue with are both with
Here's an example from the bootstrap site itself. Submit the form and you'll see everything else under it shifting upwards when the validations appear/hide.
https://getbootstrap.com/docs/5.0/forms/validation/#custom-styles
There's nothing built in to bootstrap to control this - you are adding a new element to the page so it will cause layout changes.
On solution that you could do manually might be to add the text with position: absolute or other positioning that will position the text above the rest of the document flow. You would have to carefully manage your spacing though so that there is space for the text below the input.
Related
I've spent a day trying to solve a problem. When a user zooms in on a page, the google places autocomplete .pac-container is no longer displayed under the corresponding input field. I have spent a day testing and the thing I found was this from Google: https://code.google.com/p/gmaps-api-issues/issues/detail?id=3416.
Let me explain in more detail. When I load a page with an initial scale of 1 on the viewport, and click on the search input field, the autocomplete suggestion box drops down exactly where it should. However, when I zoom in or out on that page on a mobile device, the .pac-container loses its position:
As you can see, the container is now gapped below the input field. I have tried a bunch of stuff, such as clearing the style of the .pac-container when the input field has focus. Nothing works. Does anyone have a solution?
I have just managed to fix this issue in my use case by simply adding 'height: auto' to the body css. Fixed the problem and now the .pac-container positions exactly where the input is required.
I found a neat CSS Slider by AMKohn:
http://codepen.io/AMKohn/pen/EKJHf
The slider works by using radio buttons and labels to move between 'slides'.
Slides are hidden by default and are displayed when their respective radio buttons are checked.
I've modified the slider so that each photo is accompanied by a caption below it that extends the width of the browser.
http://codepen.io/anon/pen/AlsJx/
As a result, my mark-up and CSS are a little different from the original, but the principals are still the same (still uses labels and radio buttons to move between slides).
I think this is affecting the labels (which act as nav buttons). These do not display on hover when using
position:absolute;
However, when the position is set to relative the buttons work fine except they are not in the right place (on either side of the photos).
Can someone explain how to fix this?
Solved the issue.
Essentially, the problem was due to using position:absolute on the parent element .slides.
I made it display:hidden by default and display:block when input:checked.
This prevented the divs from "stacking", which I concluded (in a very non-technical way) was the reason why the nav buttons didn't work.
The working slider is here:
http://codepen.io/anon/pen/hAnre/
Unfortunately the title I have given is very vague. I honestly wasn't sure how to word it. Anyway, basically I currently have a vertical navbar with a small caret beside the text. Once clicked, the particular button uncollapses and shows it's contents.
As seen in the image above, I'm attempting to have a secondary caret that should be sitting on the right of the button. This caret will follow suit on every other button once I get it working. Anyway, I'm currently using twitter-bootstrap and from what I understand, I could be able to split the button into 2, each having their own function. For example, if one were to click the text and the downwards caret, it should uncollapse the menu (Which it does fine right now). Though, when you click the right facing caret, it should just bring you to another page via an href or something. Currently, clicking either button will collapse and uncollapse the menu.
As you can see, the right facing caret separates itself from the original button but in a weird way. On the far right of the image is an example of the button separation I would like. In the Twitter-Bootstrap example, the "button" text and the caret both do different functions. I'm not entirely sure on how to achieve this via the current button setup I have. I'm quite happy with how the current buttons look visually but I want to be able to add that secondary caret that is justified to the right of the button. As well as have that secondary button separate nicely, similar to that of the Twitter-Bootstrap example.
TL;DR: how do I get a button to split into 2 piece via the current HTML that I have. I would like to keep the styling and I would like each button to have it's own functionality.
(Enlarge image)
http://i.imgur.com/Xm7ILoq.png
Just make two buttons and style them to be close to one another. Use CSS styling to get it done. You can lower the margins on the sides to get them closer, you could use border-radius to get rid of the corners in the middle, etc etc.
Just figure out how you want it to look. And forget about splitting buttons, that is not something you can technically do, or should want. Create 2 buttons and style them.
I want to build a website that has 4 buttons on the left, which change the text in the main window of the site (traditionally that they would take the user to another seperate page).
What I would like it to do is not have to go to another page when the button is click, but rather to hide the text that is in the main window, and change it to the text that is for that new page.
Is there a way to hide the text, and show different text, using CSS?
Thanks for any help.
It is possible with CSS 2 and no javascript. I made an example for you to see here:
http://jsfiddle.net/theguywholikeslinux/QQrFy/
I haven't actually tested it for browser compatibility but I believe it works in most browsers that support css 2 and positioning reasonably well (including older versions of IE). Accessibility will be perfectly fine as long as you don't mind screen readers reading each page at a time all in one go. (although some confusion might be caused by the links).
Essentially there are 4 divs that all have an id set and a specific width, height and positioning (essentially they are all on top of each other). The links are href="#id#" and when you click them the relevant div comes to the top of the stack so you can see it.)
Only downsides are it can cause weird scrolling problems (e.g links at top of page, content to change all the way at the bottom) and you have to have the same fixed size for all of the elements. So if you want to have pages like this that are going to be more than ~700px tall then your pages that only include 200px of content will still scroll down for another 500px.
You cannot do this in css2! You need a javascript
Update:
You can do it with css 3. Please see example: http://jsfiddle.net/RUDyw/
found here: http://dev.opera.com/articles/view/css3-show-and-hide/
No, you need javascript. JQuery or something of the likes will make it easy.
$('#button1').click(function() {
$('#mainwindowtext').text("new text");
});
I'm experiencing some strange behavior with a project i'm working on:
http://daft.net76.net/yah/
When you click the rules link the entire layout shifts to the left by a pixel or three. I've attributed this to the amount of content in that div, because when you click the 'Scores' link, which has a smaller content height.
The lower div structure looks like the following:
<div id="lowercontent">
<div id="rulesDiv" >
<h1>Rules</h1>
<p>Clicking the roll button rolls the dice. You have 3 rolls per turn.
After rolling you can choose to keep dice through rolls. Click a die to keep it through a turn.
Submit a combination of dice by clicking an option and clicking Score Roll.
To claim yahtzee either click the zee button, or score roll without anything selected.
To claim yahtzee either click the zee button, or score roll without anything selected.
To claim yahtzee either click the zee button, or score roll without anything selected.
To claim yahtzee either click the zee button, or score roll without anything selected.</p>
</div>
<div id="scoresDiv">
<h1>Scores</h1>
<p>1</p>
</div>
<p id="closeTest"><span id="close">close</span></p>
</div>
I'm using jquery functions to swap between the scores and rules.
lowercontent is a fixed width div. The inner rules and scores divs have no width.
Any ideas? Let me know if more detailed css on the divs is needed.
When the Rules div is shown, it is causing the scrollbar to appear. First, its really not a big deal.. I would just leave it alone.
If it really bothers you, add this to your CSS:
html { height: 100% }
body { height: 101% }
This will force a scrollbar to always be present so the layout won't shift.
My original answers are below but the truth is, there's only one good answer to this if you feel you need to do anything at all: modal windows.
A modal window is one that pops to the foreground and needs to be actioned before you can carry on doing what you were doing. You've used one before even if you didn't know the name. One example is an open file dialogue in an application. You have to pick a file or cancel to carry on.
On the web, you can replicate this functionality quite easily. It involves "overlay" over the content to stop the user touching it and the modal box on top of the overlay. Most web-examples shade the overlay to let the user know what has focus.
This fixes your problem because it stops the content getting longer by putting the new content over the old content and therefore the scroll-bar doesn't need to show.
Luckily for you, there are prefab solutions (see the last line of this) but I think the one that will work best for you is Facebox. It's light and sexy and does the job of just showing some information. it doesn't look like you need to get too bogged down in other actions.
Here, at least, it's because the scrollbar on the window pops up.
There are a few ways to fix this but all are pretty hacky or imperfect:
Use a left-aligned design.
On load, if the height is bigger than the computed height of the content (no scroll bar) force the content to create a scrollbar. Compare widths. Deduct half this from your left margin on your content. Yuck!
Manually centre the content using onload and onresize hooks to change the margin on the content. Probably the cleanest and you can leave it on margin:auto just in case. This won't work for IE6 but I guess that's expected.
You can put the content into tabs that the user has to switch between.
Use pop-in modal layers instead of attaching the content to the bottom of the page. I'm thinking something like LightBox but with content instead of images. I think there's probably a script out there that does this with content already.
Edit: See this for more tips on modal windows.