I revamped the UI of my page, such that there's an image and a floating div on the centre of the image.
The div has the button that opens the modal (Bootstrap 3.3.7).
When I click the button everything appears greyed out, and the modal opens but inside the div and can neither be seen full or closed.
Here are screenshots of the same ( can't include full page because of privacy and security issues)
Here is the CSS for the div:
.card {
/* For Shadow Effect*/
box-shadow: 0 16px 32px 0 rgba(0,0,0,0.9);
transition: 0.3s;
/* Diemensions */
padding: 5px;
width: 400px;
height: 159px;
text-align: center;
border-radius: 1rem;
/*making it stick to the centre*/
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* randome stuff*/
background: #CFD8DC;
margin: auto;
}
You have to set the z-index property of your .card class to a value greater than the overlapping black translucent element.
To do a deeper analysis, open the web inspector to dig into your HTML structure and find the overlapping element I mentioned above. Then, in style properties (should be on the right), find the z-index property. If you cannot find it, check through its parent elements. If you cannot still find it, you should be able to set an arbitrary value, greater than zero, which should make your page look as you want.
Keep in mind that z-index works only if position attribute is set to absolute or relative or fixed.
Related
I am creating the following side menu with animation: click
We can see an unwanted horizontal scrollbar, which should not be according to developer.mozilla.org,
absolute
The element is removed from the normal document flow, and no space is
created for the element in the page layout.
In the example above, the list of menu appears when you click on the checkbox and it has the class .m-list. .m-list has absolute positioning and relative positioning is set for its nearest parent(.m-block). I'm going to copy and paste these two classes
.m-block {
width: 100%;
background: gray;
padding: 0;
display: flex;
flex-direction: row-reverse;
position: relative;
}
.m-list {
position: absolute;
top: 100%;
background: silver;
right: 0;
width: auto;
list-style-type: none;
transform: translateX(0%);
transition: transform 0.25s ease-out;
}
Q1: Why does the horizontal scrollbar appear?
Q2: What is the most correct solution to prevent the appearance of a horizontal scrollbar?
I know 4 ways to solve this problem, but due to various reasons I do not want to use them:
If I change the absolute position to a fixed one, it does not generate a horizontal scrollbar, but the rule line with top: 100%; takes on a different meaning. In the original case, top: 100%; provides an offset from the blue stripe along its height.
Using JS is not available in this project
Using overflow-x: hidden on the top level of document will disable the scrollbar, which may be needed for content.
Moving the menu from the right side to the left will not result in a horizontal bar, however, this is an undesirable solution.
.m-list {
...
left: 0;
transform: translateX(0%);
}
#m-toggle:checked ~ .m-list {
...
transform: translateX(-100%);
}
I tried applying overflow-x: hidden; to <body>. and I was able to scroll down and hide the menu
On my site, I have a tutorial that appears in a modal. The wrapper is a translucent gray that covers the entire site (including the parts that you must scroll down to see).
I am trying to center the modal vertically, but since the div covers below the fold (it goes where you must scroll down), the modal appears half cut off on the bottom of the page because it is placed in the center of the modal wrapper div. I'd appreciate it if someone could look at my code below and tell me how can I change the CSS so that the modal box will always appear in the center of the screen (vertically), even if the parent div moves below visibility.
Here's my code:
.modal-wrapper {
display: none;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: none;
background-color: #000000;
background-color: rgba(0,0,0,0.4);
}
.modal-content {
position: absolute;
background-color: #fefefe;
border: 1px solid #888;
border-radius: 12px;
margin: 15% auto;
padding: 20px;
width: 80%;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
You may be wondering what happens when the screen's width is smaller. As the browser size shrinks, the div slowly moves further up the page, but it is never fully revealed. I would like this modal to be centered similarly to the Wordle Help Modal. If you play around with it, you'll see that it always stays in the same spot no matter how small or large the browser's width is. Thanks in advance for any answers!
I am having trouble creating this component for a project I'm working on. The requirements include a vertical bar where the text is rotated 90deg, horizontally centered within the bar, and aligned to the bottom of the bar. The screenshot below is what it's supposed to look like. I've linked to a codepen at the bottom to show you what I have so far.
Other Notes
I'd like to try and avoid absolute positioning if possible
The width of the actual title itself needs to be variable
When the window is made smaller I'd prefer it to cutoff from the bottom not the top (not a deal breaker)
Also keep in mind that I've set overflow-y: hidden on the <html> and <body> tags to keep vertical scrolling from happening.
Codepen example
This layout is a bit tricky to achieve without absolute positioning.
Check out the solution - https://codepen.io/trentmrand/pen/KvPgXY
I've removed the content container, so your resulting HTML is now as follows,
<div class="c-key">
<div class="c-key__label">Some label</div>
<h1 class="c-key__title">
Milestones
</h1>
</div>
I've also updated your SCSS to use absolute positioning, as follows,
.c-key {
width:600px;
height: 600px;
position: relative; // make container use relative positioning
background: #000;
&__label {
background: #fff;
border-right: 1px solid #000;
font-size: 13px;
padding: .25rem .5rem;
text-transform: uppercase;
}
&__title {
color: #fff;
font-size: 5rem;
transform: translateX(46px) rotate(-90deg); // rotate text and translate half of the text height to center
transform-origin: left bottom; // rotate from bottom-left
position: absolute; // use absolute positioning with this element
bottom: 0; // position at bottom of parent element
left: 50%; // position at middle of parent element
margin: 0 !important; // remove default padding from header tag
}
}
I was wondering how I could implement this shape into my website. Furthermore, when I copy and paste it into my website, the text position of the string "CLICK ON THE ARROW BELOW TO SCROLL DOWN" gets adjusted and I want it to stay above the arrow. Here is my codepen
I changed the hex colour to red so you can see what I mean.
Below is the HTML / CSS code for the rounded shape I want to implement within the middle of my website page. How could I also write text over this object?
<div id="shape">Rounded corners!</div>
#shape {
border-radius: 25px;
background: #111;
padding: 20px;
width: 200px;
height: 150px;
}
The shape is already there. (?)
Concerning the text you write about: You have margin-top:530px; on your p tag, which makes it disappear behind another element. Erase or adjust that margin. And use a class on that element and its CSS, since otherwise all p tags will get these settings.
P.S.: To center your #shape DIV, use these mergin settings on it (and no float):
margin:100px auto 0 auto;
http://codepen.io/anon/pen/KaepGZ (edited)
ADDITION:
http://codepen.io/anon/pen/LxrpPY
--> This places the text above the arrow, giving it position absolute with horizontal centering and a fixed bottom setting:
.arrowtext {
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 75px;
}
But you have to move that text container into your section, above the arrow element. See my second codepen for details.
I have the following textbox:
<input type="text" id="fromAdd" class="styledTB searchBDir" />
CSS:
.styledTB {
padding-left: 5px;
background: #E8E8E8;
opacity: 1;
border: none;
outline: none;
right: 35px;
box-shadow:
0px 5px #BBB,
0px 8px 10px rgba(148, 148, 148, 0.5);
}
.searchBDir {
height: 30px;
width: 90%;
}
Displays this:
How can I add the following icon toward the right of the box and make it clickable for Geo Location:
To make something like this (I would like to resize the image to fit the textbox and not overlap as shown):
I am using the following script which will populate the textbox once the icon is clicked and the user gives permission:
$.get("http://ipinfo.io", function (response) {
$("{textboxid}").text("Location: " + response.city + ", " + response.region);
}, "jsonp");
Here's what we're doing
Some slight changes to HTML
<div class='styledTB'>
<input type="textbox" id="gpsInput" />
<button id="searchBDir"></button>
</div>
What we're doing here is giving some layout context for your input and button. The container is going to serve as our bounding box for laying out the remainder of our elements. You could accomplish this visually with only the input, but since you've got a clickable element it makes sense to make the clickable area a button (for accessibility, semantics, blah, blah, blah...).
On to the CSS:
.styledTB {
position: relative;
display: inline-block;
height: 40px; /* Arbitrary number */
width: 400px; /* Arbitrary number */
}
.styledTB input {
width: 100%; /* Arbitrary number */
height: 100%;
padding-right: 40px;
box-sizing: border-box;
}
#searchBDir {
height: 100%;
width: 40px; /* Or however long you'd like your button to be, matches padding-right above */
background-image: url(http://i.stack.imgur.com/4v62r.png);
background-repeat: no-repeat;
background-position: 50% 50%;
border: none;
background-color: transparent;
position: absolute;
right: 0;
top: 0;
}
Read the comments as they are helpful, but as a high-level overview:
We're putting the bounding box (the div) into a relative position so that we can order the button absolutely. We define the size we want our input element to appear (I chose some number arbitrarily, it should work similarly no matter what size you set them to) and set display inline-block to mirror that of a normal input element.
We then force the box to fill its container with the width and height being declared as 100% and give the box a padding-right of 40px to match our intended size for the button. We set the box-sizing to border-box so that the padding doesn't force the input larger than its containing box. This just tells the browser to consider padding, borders and all internal spacing elements to not grow the outer bounds of the element.
Lastly, we set the button to position: absolute and give it the positioning values to force it to the right of the box. We give it a background image of your GPS icon, and then position that appropriately within the button.
The border and background-color rules are there to override the default browser rendering of a button as a raised gray box.
I hope that helps!
Fiddle here
set the image as a background aligned to the right, and set the padding-right.