I have a custom dropdown list in the first el-collapse-item. When I expand the dropdown list, the list option is blocked by the second el-collapse-item.
<el-collapse v-if="currpage == 'edit'">
<!-- 1st tab -->
<el-collapse-item class="collapseheader" title="Contact" name="1">
<InputAutocomplete2
:items="positionlist"
:initval="cur_vendor.ContactPositionIDn2"
:placeholder="$t('Position')"
:key_field="'IDn'"
:value_field="'PositionName'"
#input="setinput_contactposition2" />
</el-collapse-item>
<!-- 2nd tab -->
<el-collapse-item class="collapseheader" title="Carrier" name="2">
<!-- Some stuff here... -->
</el-collapse-item>
</el-collapse>
<style>
.autocomplete2 {
position: relative;
}
.autocomplete2-results {
padding: 0;
margin: 5px 0;
border: 1px solid red;
border-radius: 4px;
height: 150px;
overflow: auto;
position: absolute;
background-color: white;
width: 100%;
z-index: 999;
}
.autocomplete2-result {
list-style: none;
text-align: left;
padding: 4px 2px;
cursor: pointer;
}
.autocomplete2-result:hover {
background-color: #4AAE9B;
color: white;
}
</style>
As shown in the picture above, the red border is my dropdown list options, and is being blocked by the 2nd tab. What I am trying to achieve is that the list would show on top of the 2nd tab.
I tried to play with CSS:property and CSS:z-index but no luck.
I also came across this post on StackOverflow element UI el-collapse in front if others components but there are some slight differences in our problem, hence the solution did not work for me.
Any suggestions? Thank you!
Update 1: 16-03-2022
As suggested, I have created the same problem in https://codesandbox.io/s/vue-template-forked-5oy4lw
Related
CSS styles not applying to React heading and paragraph.
Under 1 div, 1 heading and paragraph is getting CSS but other is not
ive tried giving them the same className and Different class names
If I put the heading and paragraph of :
Meet Babish... and Im launching my... with the Stay in loop and Many products the styles is the same like where it is currently situated, but only the Stay in looop and more products.. area is not getting css.
CSS is working for all other things, im adding new styles for the same component
Result:
I want the styles to be as in Meet babish cookware
const Cookware = () => {
return (
<div className="CookwareMainDiv">
<h4 className="CookwareMainDivSubDiv1h41">meet babish cookware</h4>
<p className="CookwareMainDivSubDiv1p1">I’m launching my all-new line of cookware in three phases;<b>starting with everything you need to prep your meals.</b>
<br/><br/> I wanted to create a high quality line of products with a price point palatable for everyday chefs. The basics, simply made better.</p>
<button className="CookwareMainDivSubDiv1b1">VISIT THE AMAZON STORE</button>
<hr/>
<h4 CookwareMainDivSubDiv1h41>STAY IN THE LOOP</h4>
<p CookwareMainDivSubDiv1p1>More products are coming in the coming weeks and months. If you’d like to stay in the loop about the next Babish Cookware release, add your email to the mailing list!</p>
</div>
</div>
)
}
export default Cookware
css
/*
Cookware
*/
.CookwareMainDiv
{
width: 80%;
height:500px;
margin: auto;
box-shadow: none;
}
.CookwareMainDivh11,.CookwareMainDivh12
{
font-weight: 100;
text-align: center;
margin-top: 5%;
}
.CookwareMainDivSubDiv1h41
{
text-transform: uppercase;
margin-top: 10%;
font-size:large;
letter-spacing: 3px;
}
.CookwareMainDivSubDiv1p1,.CookwareMainDivSubDiv1p2
{
margin-top: 5%;
word-spacing: 5px;
font-weight: 300;
}
.CookwareMainDivSubDiv1
{
width: 50%;
height: 400px;
margin: auto;
}
.CookwareMainDivSubDiv1b1
{
height: 60px;
width: 300px;
background-color: transparent;
border: 2px solid black;
border-radius: 16px;
letter-spacing: 2px;
margin-left: 20%;
}
.CookwareMainDivSubDiv1h41
{
margin-top: 5%;
margin-bottom: 5%;
}
.CookwareMainDivSubDiv1 input
{
width: 400px;
height: 30px;
border: 2px solid black;
background-color: transparent;
}
.CookwareMainDivSubDiv1b2
{
width: 100px;
height: 50px;
background-color: transparent;
border:2px solid black;
margin-left: 30%;
}
.CookwareisSubmitted input
{
width: 90%;
height: 50px;
text-align: center;
border: 2px solid rgb(203, 207, 211);
}
.CookwareisSubmitted button
{
width: 30%;
height: 50px;
text-align: center;
margin-bottom: 20%;
}
Please add the "className" to both of the tags.
<h4 className="CookwareMainDivSubDiv1h41">STAY IN THE LOOP</h4>
<p className="CookwareMainDivSubDiv1p1">More products are coming in the coming weeks and months. If you’d like to stay in the loop about the next Babish Cookware release, add your email to the mailing list!</p>
Where is your stylesheet vs where you're importing it into? Is the stylesheet global or component specific? Typically, these issues usually mean the CSS file isn't recognizing the element because it wasn't linked properly to the file the element lives in. (Sometimes, I forget that I gave an element an ID rather than a class.)
Some frameworks don't like certain naming conventions. It helps to look up their official standard. Check out this article from FreeCamp. This article talks about adding a stylesheet with Create React App.
GetBEM did an excellent article on naming conventions, too.
This code is working. Delete that extra "</div>" at the end (It might have been a problem if it didn't already cause an error).
You forgot to give the attribute of className to the Stay in loop and its below paragraph. And you are applying to give css styles as it is a class but it's not.
Your code
<h4 CookwareMainDivSubDiv1h41>STAY IN THE LOOP</h4>
It has to be
<h4 className="CookwareMainDivSubDiv1h41">STAY IN THE LOOP</h4>
Similarly in the paragraph section.
I need help related to disappearance of the popup in each day cell block, When there are too many events in a day, a link that looks like “+2 more” is displayed. How to avoid this popup, my requirement is default eventLimit: 2 and next for the remaining it should show a button, and click on this button, It should navigates to day mode similar as in the above screenshot.
Thanks & Regards,
Prabha
Then use fullcalendar.io/docs/eventLimitClick to change what happens when you click that link. If you notice, one of the options is "day". – ADyson
Thanks a lot Adyson
Using the below function in calendar intialisation we can remove the default more link text '+n more'.
eventLimitText: function() {
return " ";
}
And using the following CSS(in HTML style tag) we can insert a button like appearance instead of default text.
a.fc-more {background-size: contain;cursor: pointer;width: 14px;height: 6px;
letter-spacing: 1px;
background-image: url(dots.png);
background-color: #F0F0F0;
border-top: 1px solid #CCCCCC;
border-right: 1px solid #CCCCCC;
border-bottom: 1px solid #CCCCCC;
border-left: 1px solid #CCCCCC;
border-radius: 4px;
margin-top: 10px;
float: right;
background-position: center;
}
dots.png is the image that has 3 horizontal dots.
Using the below function in calendar instantiation we can click on 'more button' to change to day view.
eventLimit: 3,
eventLimitClick: function(cellInfo) {
calendar.gotoDate(cellInfo.date);
calendar.changeView('timeGridDay');
}
Below image is my local calendar click more button view with hover text(click for more cells) and the hover css style as:
a.fc-more:hover:after {
content: 'Click for more cells';
font-size: 9px;
text-align: center;
position: absolute;
margin-top: -2px;
margin-left: 15px;
line-height: 2em;
width: 12em;
border-radius: 0.3em;
background: #ffffcc;
display: inline-block;
}
I have an image that displays a dropdown menu on click. This is the HTML code:
<div class="menu">
<img id="menu_img" src="https://res.cloudinary.com/dqn5eqmwt/image/upload/v1493014197/Menu_jwzusk.svg">
<div id="myDropdown" class="dropdown-content">
<a id="Edprof">Edit Profile</a>
<a id="Deprof">Delete Profile</a>
<a id="Chistory">Check History</a>
<a id="Bevents">Book Events</a>
<a id="Getout">Logout</a>
</div>
</div>
This is the CSS for the entire menu:
.menu {
display: block;
position: absolute;
z-index: 2;
height:55px; /* 150/640 */
width:55px;/*150/1536*/
top: 2.5%;
right: 10.0208333333%;
float: right;
cursor: pointer;
}
#menu_img{
width:55px;
height:55px;
cursor: pointer;
}
/* Dropdown button on hover & focus */
.menu:hover, .menu:focus {
background-color: #3e8e41;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #7de88a;
border: 6px solid #7de88a;
border-radius: 10px;
width: 300%;
right: 0px;
left: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 2;
cursor: pointer;
}
/* Links inside the dropdown */
.dropdown-content a {
color: #c43396;
background-color: #fff3bb;
font-family: Chewy;
border: 6px solid #7de88a;
border-radius: 10px;
margin-top: 2.5px;
margin-bottom: 2.5px;
padding: 12px 16px;
display: block;
}
Finally, this is the JS for the onclick of image event:
$(function(){
$('#menu_img').on('click touch',function() {
document.getElementById("myDropdown").style="display:block";
})
});
I also have a JS to hide the dropdown on click anwhere in the window other than the menu_img. This works perfectly well on laptops and android phones. The only problem is iPhones. On click, the background color changes, which is actually the hover action. But dropdown menu does not appear.
From what I read these are the checks I've already tried:
1. Added cursor:pointer to menu_img in CSS
2. Removed hover action and tested if click would happen then
3. added onclick() function to the HTML code
4. Added touch along with click as the event trigger in the JS code
5. Checked if it displays on double click(but that just zooms the page)
None of these have worked for me. Any suggestions/tests/help is appreciated. Thanks!
I edited your code and run it on my server. It works perfectly on all devices. A personal tip: use jQuery everywhere or don't use it at all.
$(document).ready(function(){
$('#menu_img').click(function(){
$('#myDropdown').show();
});
});
I am using the spectrum.js flat colorpicker in a page that has a position:fixed header. The picker choices overlap the header while scrolling the page.
I have found this issue, but it seems to me that it applies to a picker contained into a fixed container, and not the other way round.
Thank you for your help.
With the F12 tools, I see that the color picker container has the sp-container class. In spectrum.css, the style defined for that class shows the following z-index property:
.sp-container {
...
z-index: 9999994;
}
If you set z-index: 9999995 (or more) for the fixed header, the color picker box will not overlap it.
$("#inputColor").spectrum({
color: "#f00"
});
#divHeader
{
position: fixed;
top: 0px;
left: 0px;
width: 100%;
color: #CCC;
background: #333;
padding: 8px;
z-index: 9999995;
}
#divContainer
{
margin-top: 40px;
width: 300px;
height: 1200px;
background-color: #E0E0E0;
border: solid 1px black;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.min.js"></script>
<div id="divHeader">Fixed header</div>
<div id="divContainer">
<input id="inputColor" type="text" />
</div>
I try to achieve something like the Facebook does when you type #<NAME_OF_A_FRIEND> in a reply. After you choose a friend, the name of that friend is highlighted with a blueish background, so you know it's a separate entity in that text.
I've "inspect element"-ed that textarea and there is no div placed on top of the textarea.
Can anyone give me a clue about how that is done ?
I have a completely different approach to this issue using HTML5. I use a div with contentEditable="true" instead of a textarea (wich I was using until I got stuck with the same problem you had).
Then if I want to change the background color of a specified part I just wrapp that text with a span.
I am not 100% sure if it is the correct approach as I am a newbie in HTML5 but it works fine in all the browsers I have tested it (Firefox 15.0.1 , Chrome 22.0.1229.79 and IE8).
Hope it helps
See this example here. I used only CSS and HTML... The JS is very more complex for now. I don't know exactly what you expect.
HTML:
<div id="textback">
<div id="backmodel"></div>
</div>
<textarea id="textarea">Hey Nicolae, it is just a test!</textarea>
CSS:
#textarea {
background: transparent;
border: 1px #ddd solid;
position: absolute;
top: 5px;
left: 5px;
width: 400px;
height: 120px;
font: 9pt Consolas;
}
#backmodel {
position: absolute;
top: 7px;
left: 32px;
background-color: #D8DFEA;
width: 53px;
height: 9pt;
}
The textarea has background-color: transparent; the extra div you're looking for is behind it, with the same text and font as the textarea, but different colours.
A short example to illustrate the point:
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<style>
* { font-family: sans-serif; font-size: 10pt; font-weight: normal; }
.wrapper { position: relative; width: 400px; height: 400px; outline: solid 1px #666; }
.wrapper > * { position: absolute; top: 0; left: 0; height: 100%; width: 100%; margin: 0; padding: 0; }
.highlighter { background-color: #fff; color: #fff; }
.highlight { background-color: #9ff; color: #9ff; }
textarea { background-color: transparent; border: 0; }
</style>
</head>
<body>
<div class="wrapper">
<div class="highlighter">
This <span class="highlight">is a</span> demonstration.
</div>
<textarea>
This is a demonstration.
</textarea>
</div>
</body>
</html>
Of course, this does not update the special div as you type into the textarea, you need a lot of JavaScript for that.
hi you can check this jquery autosuggest plugin similar to facebook .I have used this to achive the same functionality you required
http://www.devthought.com/2008/01/12/textboxlist-meets-autocompletion/
I would suggest changing the text you want to assign a background inline to to display: inline-block; background-color: #YOURCOLOR;. This should do exactly what you want it to do without all the complexities of some of the above answers.
Ultimately your CSS should look something like this:
.name {display: inline-block; background-color: purple;}
Then add some sort of event listener in jQuery (not sure how you're identifying that it is a name) and inside that conditional put:
$(yourNameSelectorGoesHere).addClass(".name");