I am using react-mentions in my project for mentioning users.. The problem is My comment input is at bottom of the page.. The react-mentions show the suggestion when we type # in the bottom of the cursor. I want this list to be above the cursor...Can anyone help me?
I tried Editing the css, but my methods doesn't work.
This is the Css i am using
.mentions {
margin: 1em 0;
}
.mentions--singleLine .mentions__control {
display: inline-block;
/* width: 130px; */
}
.mentions--singleLine .mentions__highlighter {
/* padding: 1px; */
border: 2px inset transparent;
}
.mentions--singleLine .mentions__input {
/* padding: 1px; */
border: 2px inset;
}
.mentions--multiLine .mentions__control {
font-family: monospace;
/* font-size: 14pt; */
}
.mentions--multiLine .mentions__highlighter {
border: 1px solid transparent;
/* padding: 5px; */
/* min-height: 63px; */
}
.mentions--multiLine .mentions__input {
border: 1px solid silver;
/* padding: 9px; */
outline: 0;
}
.mentions__suggestions{
left: 0;
bottom: 100%;
width: 90%;
}
.mentions__suggestions__list {
background-color: white;
border: 1px solid rgba(0, 0, 0, 0.15);
left: 0;
bottom: 100%;
width: 90%;
/* font-size: 10pt; */
}
.mentions__suggestions__item {
padding: 5px 15px;
border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}
.mentions__suggestions__item--focused {
background-color: #cee4e5;
}
.mentions__mention {
position: relative;
z-index: 1;
color: blue;
text-shadow: 1px 1px 1px white, 1px -1px 1px white, -1px 1px 1px white,
-1px -1px 1px white;
text-decoration: underline;
pointer-events: none;
}
This is the js code
<MentionsInput className="mentions" value={newComment} onChange={e => setNewComment(e.target.value)} >
<Mention
trigger="#"
data={tagUserList}
/>
</MentionsInput>
But the output is still like the same..The list is showing below the cursor
Please help me to solve the problem
You can use forceSuggestionsAboveCursor={true}
<MentionsInput
value={value}
onChange={onChange}
style={defaultStyle}
placeholder={"Mention people using '#'"}
suggestionsPortalHost={container}
forceSuggestionsAboveCursor={true}
>
<Mention data={data} onAdd={onAdd} style={defaultMentionStyle} />
</MentionsInput>
There is a demo page that shows how it works.
This code example can be found in their GitHub here
It's the middle one from BottomGuard's section.
You can also use allowSuggestionsAboveCursor={true}, which will use bottom only if there's space.
Related
I'm trying to move boxes up when simply doing a mouseover. I can mouseover on each box, but can't get it to move up.
Here's my code:
body {
text-align: center;
}
.row {
padding: 50px 0;
}
.post-item {
outline: 1px solid red;
padding: 50px 20px;
border: 5px solid transparent;
}
.post-item:hover {
outline: 0px solid transparent;
padding: 50px 20px;
border: 5px solid red;
}
Here's my LIVE DEMO
Your given examples did it by two CSS properties:
.post-item:hover {
outline: 0px solid transparent;
padding: 50px 20px;
border: 5px solid red;
transform: translate3d(0,-3px,0); /* This line defining how many pixel should move */
transition: all .15s cubic-bezier(.33,.66,.66,1); /* This line defining transition time such as here: .15s */
}
You should use transform like the following:
body {
text-align: center;
}
.row {
padding: 50px 0;
}
.post-item {
outline: 1px solid red;
padding: 50px 20px;
border: 5px solid transparent;
transition: all 200ms ease;
}
.post-item:hover {
outline: 0px solid transparent;
padding: 50px 20px;
border: 5px solid red;
transform: translateY(-3px);
}
You can add the following code when you hover the element to move up.
.post-item:hover{transform:translateY(-3%);}
I've created a button that looks like a document with a label below it by moving the button's text outside of its self with position absolute:
$('.item-title').hover(function() {
$(this).parent().addClass('hover');
}, function() {
$(this).parent().removeClass('hover');
});
$('.item-title').on('click', function() {
alert('test this')
});
.item-button {
position: relative;
width: 110px;
height: 150px;
background: #eee;
border: #fff solid 2px;
box-shadow: 0 0 10px #ccc;
transition: all 0.5s ease;
margin: 25px;
margin-bottom: 40px;
}
.item-button:hover {
color: black;
text-shadow: 1px 1px #fff;
border: #fff solid 2px;
box-shadow: 0 0 20px #999;
}
.hover {
color: black;
text-shadow: 1px 1px #fff;
border: #fff solid 2px;
box-shadow: 0 0 20px #999;
}
.item-title {
position: absolute;
top: 160px;
left: 0;
width: 100%;
text-align: center;
font-size: 10pt;
line-height: 15px;
z-index: 999;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="item-button"><span class="item-title">File Title</span></button>
However I can't seem to get the label that's now floating outside the control to react at all to any mouse events. How can I get it to be clickable and pass its hover state back to its parent?
Edit: Seems this is a browser specific issue to firefox, works correctly in Chrome and IE.
Have you tried to write "e.stoppropagation()" in the click event of the label. this will stop the label to push events to its parents.
Update: I tried binding a click event to your label and it works without an issue,
$('.item-title').on('click',function(){
alert('test this')});
Edit your Css code :
.item-button {
position: relative;
width: 110px;
height: 150px;
background: #eee;
border: #fff solid 2px;
box-shadow: 0 0 10px #ccc;
transition: all 0.5s ease;
margin: 25px;
margin-bottom: 40px;
z-index : 888;
}
.item-button:hover {
color: black;
text-shadow: 1px 1px #fff;
border: #fff solid 2px;
box-shadow: 0 0 20px #999;
}
.hover {
color: black;
text-shadow: 1px 1px #fff;
border: #fff solid 2px;
box-shadow: 0 0 20px #999;
}
.item-title {
position: absolute;
top: 160px;
left: 0;
width: 100%;
height: 100%;
text-align: center;
font-size: 10pt;
line-height: 15px;
z-index: 999;
}
For the "range" input element in HTML5, there is a nice way to style the thumb and track separately. The only problem being it works differently on different browsers.
Daniel Stern has done some great work on this. Also he's written an online tool which generates the basic css styles for cross browser range input styling- range.css, I'm using these styles but I'm facing a few problems when using the z-index parameter.
In the webkit styles, its easy to give different z-index values to the thumb and track by setting the position to relative and assigning a z-index value.
This method doesn't work in the Firefox styles. Firefox would just ignore the z-index values of the track and thumb.
I am trying to draw a div element on the lower half of the range slider to make the lower and upper halves look different. So effectively i want my z-index values to be like this track < div < thumb
I have written a codepen to show this behavior. Its working perfectly in Chrome/Safari, but not in Firefox. Try opening it in Chrome/Safari to see how I it should behave in Firefox.
http://codepen.io/anon/pen/vOmQxr
How can i achieve similar behavior for Firefox? or is there any other way to style the upper and lower halves of the range slider separately for Firefox?(without external libs)
I know you asked this question a while ago but I actually spent some time to find a workaround solution for this issue.
The issue is z-index with pseudo elements of input range works differently on Firefox and Chrome. What you will have to do is to make the input range track's background to be transparent. Create a div divFill that will replicate the track and make it the lowest z-index. Then, divLowerFill is the next highest z-index. After that, put the input field as the next highest z-index. Since we made the background color for input range to be transparent, the lower elements should be visible. Of course, make the thumb pseudo element to be the highest z-index.
Although I didn't debug this on IE but the concept should work. Here's code snippet that I made some modifications on your Codepen code.
document.getElementById("rangeinput").addEventListener("input", function(e){
var rangeInput=document.getElementsByClassName("divLowerFill")[0]; rangeInput.style.width=e.target.offsetWidth*e.target.value/100 +"px";
});
.parent {
display:inline-block;
margin-left: 35px;
position:relative;
}
/* repplicating input range track background */
.divFill {
position: absolute;
width: 100%;
height: 6px;
top: 7px;
z-index: -2;
background: #00c9ff;
}
/* track fill */
.divLowerFill {
position: absolute;
height: 6px;
width: 70px;
top: 7px;
background-color: #273042;
z-index: 0;
pointer-events:none;
}
/* input range track style settings */
input[type=range] {
-webkit-appearance: none;
width: 70px;
margin: 2px 0;
vertical-align: middle;
position: relative;
background-color: transparent;
}
input[type=range]:focus {
outline: none;
}
/* Chrome, Safari track style settings */
input[type=range]::-webkit-slider-runnable-track {
width: 100px;
height: 6px;
cursor: pointer;
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
border-radius: 0px;
z-index: 1;
border: 0px solid rgba(0, 0, 0, 0);
}
input[type=range]::-webkit-slider-thumb {
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
border: 0px solid rgba(255, 255, 255, 0);
height: 10px;
width: 10px;
border-radius: 5px;
background: #ffffff;
cursor: pointer;
-webkit-appearance: none;
margin-top: -2px;
z-index: 2000;
position: relative;
}
/* Firefox track style settings */
input[type=range]::-moz-range-track {
width: 100%;
height: 6px;
cursor: pointer;
background: none transparent;
border-radius: 0px;
border: 0px solid rgba(0, 0, 0, 0);
position: relative;
z-index: -1;
}
input[type=range]::-moz-range-thumb {
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
border: 0px solid rgba(255, 255, 255, 0);
height: 10px;
width: 10px;
border-radius: 5px;
background: #ffffff;
/*cursor: pointer;*/
position: relative;
z-index: 100;
}
/* IE style settings */
input[type=range]::-ms-track {
width: 100%;
height: 6px;
cursor: pointer;
background: transparent;
border-color: transparent;
color: transparent;
}
input[type=range]::-ms-fill-lower {
background: #00c5fa;
border: 0px solid rgba(0, 0, 0, 0);
border-radius: 0px;
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}
input[type=range]::-ms-fill-upper {
background: #00c9ff;
border: 0px solid rgba(0, 0, 0, 0);
border-radius: 0px;
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}
input[type=range]::-ms-thumb {
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
border: 0px solid rgba(255, 255, 255, 0);
height: 10px;
width: 10px;
border-radius: 5px;
background: #ffffff;
cursor: pointer;
height: 6px;
z-index: 2000;
position: relative;
}
input[type=range]:focus::-ms-fill-lower {
background: #00c9ff;
}
input[type=range]:focus::-ms-fill-upper {
background: #05caff;
}
<div class="parent">
<div class="divFill"></div>
<div class="divLowerFill"></div>
<input id="rangeinput" type="range" min=0 max=100 value=100>
</div>
I'm trying to create an autocomplete text field using typeahead.js. The examples here show suggestion lists that are nicely formatted. However, when I use the same code, I only get a bland list of suggestions like so:
Please see this jsFiddle for the code.
I'm using Bootstrap with it. What do I have to do to get a list that is formatted the Bootstrap way?
It looks like the default output has no styling at all and the .tt class has to be used to style the list. I got the following code by inspecting the element I wanted, tweak to suit your needs.
.tt-query,
.tt-hint {
width: 396px;
height: 30px;
padding: 8px 12px;
font-size: 24px;
line-height: 30px;
border: 2px solid #ccc;
border-radius: 8px;
outline: none;
}
.tt-query {
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.tt-hint {
color: #999
}
.tt-dropdown-menu {
width: 422px;
margin-top: 12px;
padding: 8px 0;
background-color: #fff;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 8px;
box-shadow: 0 5px 10px rgba(0,0,0,.2);
}
.tt-suggestion {
padding: 3px 20px;
font-size: 18px;
line-height: 24px;
}
.tt-suggestion.tt-cursor {
color: #fff;
background-color: #0097cf;
}
.tt-suggestion p {
margin: 0;
}
I've recently decided to try styling a input type="file".
The design works almost fine, the only problem is that I want the text "No file selected" appear in the filename selection. Even when I select a file no text does appear.
I would appreciate any help and explanations!
I have the following code: HTML
<div class="fileuploader">
<input type="text" class="filename" disabled="disabled" />
<input type="button" name="file" class="filebutton" value="Browse" />
<input type="file" name="avatar" />
</div>
and following CSS
.fileuploader {
position: relative;
display: inline-block;
overflow: hidden;
cursor: default;
}
.filename {
float: left;
display: inline-block;
outline: 0 none;
height: 30px;
width: 302px;
overflow: hidden;
border: 1px solid #CCCCCC;
color: #777;
text-shadow: 1px 1px 0px #fff;
border-radius: 5px 0px 0px 5px;
box-shadow: 0px 0px 1px #fff inset;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 6px 10px;
}
.filebutton {
float: left;
height: 30px;
display: inline-block;
outline: 0 none;
cursor: pointer;
border: 1px solid #CCCCCC;
border-radius: 5px 5px 5px 5px;
box-shadow: 0 0 1px #fff inset;
color: #555555;
margin-left: 3px;
padding: 6px 12px;
background: #DDDDDD;
background:-moz-linear-gradient(top, #EEEEEE 0%, #DDDDDD 100%);
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #EEEEEE), color-stop(100%, #DDDDDD));filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#EEEEEE', endColorstr='#DDDDDD', GradientType=0);
}
.fileuploader input[type=file] {
position: absolute;
top: 0;
right: 0;
bottom: 0;
border: 0;
height: 30px;
cursor: pointer;
filter:alpha(opacity=0);
-moz-opacity: 0;
-khtml-opacity: 0;
opacity: 0;
margin: 0;
padding: 0;
}
I want the text "No file selected" appear in the filename selection.
Even when I select a file no text does appear.
One solution would be to update the filename whenever the file input fires a JavaScript 'change' event. This can easily be accomplished using jQuery's $.change() function:
$(document).ready(function() {
$('input[type="file"]').change(function() {
var val = ($(this).val()) ? $(this).val() : "No file selected.";
$('.filename').attr('placeholder', val);
});
});
http://api.jquery.com/change/
I've created a jsFiddle that includes this functionality: http://jsfiddle.net/cfY6m/1/