I'm working on a Vue app,and want to resize the elements on mouse drag.
<div class="mails">
<MailContent class="mail-list" />
<MailItems class="mail-list" />
</div>
And the CSS is the following:
.mail-list {
border-right: 1px solid lightgray;
resize: horizontal;
overflow: auto;
}
This little indicator is only visible when the page is scrolled down to the bottom. Is there any way add this function when the border is dragged?
Related
I have code that makes popups (I recommended to do this by an accessibility consultant) based on focus using only CSS and tag attributes. It works great until the focused element is too near the right side or bottom of the window, and then I need specific markup to flip the tooltip to the other side of (or above) the focused element.
I'd like to have generic CSS that "just works" without knowing the placement of the focused element ahead of time (this is for a responsive layout that reflows for different window sizes)
I know I can solve this with Javascript, and there is already a question talking about that (Display a div on mouse enter, cannot be seen if mouse position is in the right-most) but I'd really like to do it using only CSS.
Fiddle: https://jsfiddle.net/e6g39Lvb/
HTML:
<div id="wrapper">
<p>
<input type="text" /> Place cursor here and hit "tab" key to move focus
</p>
example link 1
<div class="rightside">
example link 2
<br />
<a class="corrected" href="#" title="this only works if I already know it's on the right edge of the screen">example link 3</a>
</div>
</div>
CSS
#wrapper{
margin: 1em;
}
.rightside{
text-align: right;
}
*:not(:hover):focus{
position:relative;
border: 1px solid red;
}
*[title]:not(:hover):focus:after { /* show tooltip on focus but user default for hover */
text-align: left;
border: 1px solid #fc0;
padding: 3px 6px;
color: black;
background: #fffea1;
content: attr(title) !important;
position: absolute;
width: auto;
min-width: 5em;
max-width: 15em;
transform: translate(0.5em,-30%);
}
.corrected[title]:not(:hover):focus:after {
transform: translate(-100%,-30%);
left: -0.5em;
}
Just to be clear: I know to achieve this with JS, I'm looking for a CSS only answer (if it's possible)
I have a button inside a div, the button is positioned on the left with display flex
I have another div below that that also contains a button.
I have positioned the bottom div on top of the top div by giving the bottom div a negative top margin.
The button in the bottom div is still clickable but now the button in the top div is not clickable because the bottom div is covering it.
Is it possible to have BOTH buttons clickable in this situation.
I know I can use pointer-events: none; on the top div but I want both clickable
I know I can rearrange the layout but is it it possible like this.
.wrap {
max-width: 800px;
border: 1px solid grey;
}
.top-button button {
display: flex;
margin-left: auto;
}
.bottom {
border: 1px solid red;
margin-top: -40px;
}
button {
cursor: pointer;
padding: 10px 15px;
}
<div class="wrap">
<div class="top-button">
<button class="btn">x</button>
</div>
<div class="bottom">
<button class="btn">Click</button>
</div>
</div>
The only way I know of to do this would be to manually catch the click-events on your top-button div and then somehow invoke the click handlers of underlying elements. You could use Event.preventDefault() to prevent the event from bubbling up the DOM and then use Document.elementsFromPoint() to see if you hit your button and if so, invoke its click handler.
I have one line (div tag with class is col-xs-6) with 2 columns of the same width. Inside each column, there is one auto-resizing button with the max width is 150px depends on the length of the text inside. SO I input the very long text inside the buttons so they got the same max width, that is 150px. Then I auto resize the window to xs viewport, until one size (I think the width of the window is smaller than 300px plus padding) then the buttons overlay on each other.
input[type="submit"] {
position: relative;
min-height: 34px;
margin: 0 auto;
min-width: 80px;
max-width: 150px;
padding: 0 10px;
width: auto;
display: block;
border-radius: 5px;
background-color: #ff7900;
color: white;
border: 1px solid #ff7900;
}
.nf-filler-control input[type="submit"] {
display: inline-block !important;
}
.nf-button {
display: inline-block;
position: relative;
color: white;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div>
<div style="background:green;" class="col-xs-6">
<div>
<div class=" nf-filler-control nf-filler-highlightonvalidationerror nf-button">
<input type="submit" value="As he crossed tosssss sxcffffxxx" />
</div>
</div>
</div>
<div style="background:red;" class="nf-col col-xs-6">
<div>
<div class=" nf-filler-control nf-filler-highlightonvalidationerror nf-button">
<input type="submit" value="As he crossed tosssss sxcffffxxx" />
</div>
</div>
</d
The problem is: Currently, the div tag auto resize but the buttons keep the same width (they don't auto resize along with the parent div tag). So they overflow outside parent div tags and overlay on each other.
What I expect here is:
Solution 1: when I auto resize the window, the div tag auto resize but the buttons still keep the same width so to one point, there is no enough space for both so it should break into 2 lines (one button on each line)
Solution 2: when I auto resize the window, the div tag auto resize then the button auto resize (they should always be inside the div tag, not overflow)
Below is my code in fiddle
https://jsfiddle.net/toy56gyf/2/
The reason why it won't re-size is because they have a static width and height, due to the fact that you used pixels as the format. Change everything you have with px to vw and vh. Also you should add top: 0px; left: 0px; position absolute; to the css and then move it around with Transform: translate(0-100vw, 0-100 vh);
This will ensure that it does not move around, and that it re-size properly :-)
A site whose code I inherited brings up a modal when an element on the page is selected, and in Chrome and native Android environments, the behavior is as expected. However, in Safari/iOS the behavior needs to be fixed.
In Safari/iOS, when you drag the modal to scroll, there are a few problems:
the close button can lag, exposing some of the content below the scrollable content, esp when swiping down on the content quickly
when dragging up, the content can pull away from the close button and create a gap, only snapping back when lifting your finger (clumsily; the button will disappear momentarily as the content snaps back to its default position and then reappear)
when scrolling down (swiping up) and then quickly scrolling up (swiping down), the close button will attach itself to the content on the elastic rebound, and only then pop back into its desired "static" position
I am not attached to the elastic easing, if getting rid of it is the only way to maintain compatibility across environments.
HTML:
<html>
<head></head>
<body></body>
<div id="modal">
<div id="content">
<!-- modal heading + text -->
</div>
<div class="close-button">
Close
</div>
</div>
</html>
CSS:
#modal {
position:fixed;
overflow: auto;
padding: 0 5px 0 5px;
z-index: 9;
-webkit-overflow-scrolling: touch;
}
#content {
z-index: 9999;
}
.close-button {
padding-top: 10px;
border-top: 1px solid #999;
background-color: #fff;
clear: both;
height: 30px;
}
New to the site and fairly new to coding as a whole, but wanting to learn as well.
Basically what im trying to do is essentially make this border grey where the grey box is, and blue for the rest of it. I've tried googling it but struggling to find something that describes exactly what im looking for.
The grey area is 200px wide and starts roughly 26px in from the left side of the page.
Can anyone help at all? Thanks in advance
Border Image
Header code is here - the grey box is part of a logo image.
<div class="fusion-header" style="height: 91px; overflow: visible;">
<div class="fusion-row">
<div class="fusion-logo" data-margin-top="5px" data-margin-bottom="0px" data-margin-left="0px" data-margin-right="0px">
You can override a parent border in the logo element, by using a negative bottom margin with the size of the border.
.header {
background: #515151;
border: 5px solid #5EDBE7;
}
.logo {
width: 200px;
height: 50px;
margin: 50px auto;
background: #5D5D5D;
/* Override the container vorder */
border-bottom: 5px solid #999;
margin-bottom: -5px;
}
<div class="header">
<div class="logo"></div>
</div>