I am working with Angular 7.
I am facing a problem in setting the z-index to the list of the user that are coming with auto-suggestion.
I am using a text box in which if I type # then it will give suggestion for all the available users.
for this functionality, I am using Angular mention directives but I am not able to set z-index when all users are coming.
I want to set up z-index to the coming user's list so that it should not hide. it should come and show the complete list.
below is my code that I am using for auto-suggestion with Angular mention directives.
<textarea #cName cols="30" [mention]="items" [mentionConfig]="{ labelKey:'name'}" rows="1" style="z-index: 1 !important"></textarea>
css file:
textarea {
border-radius: 8px;
}
with the above code, it is giving the following result attached in the below image.
So in the above image, we can see that the list is hiding behind the accordion but I want to see the complete list of the users.in the code, I have applied z-index in the styles but it is not working.
can anyone help me to come out of this problem?
Thanks in Advance.
Related
I'm creating a form using the react-bootstrap Form component, and want a checkbox as one of the fields, but it looks like this:
The code that leads to this is really straightforward:
<Form.Group className="mb-3" controlId="formBasicCheckbox">
<Form.Check type="checkbox" label="I agree to the terms and conditions" />
</Form.Group>
I'm sure I could fix it with some css hack, but it shouldn't be doing this. Any ideas how to solve it?
I figured it out: another css file was setting margin: 0 auto !important; on all input elements (a good example of why !important is dangerous).
Bootstrap tried to set the checkbox margin to shift it left, but that css was overridden by the other file. I changed the offending css to use a class selector instead, and it works now!
To anyone having a similar issue, the way I figured this out was that I:
Examined the css for the checkbox in developer tools
Saw that some fields (namely margin) were crossed out
Filtered for all instances of margin
Noted the css file that those instances came from
I'm trying to get a GTM tag fired for cta tracking but it somehow doesnt't work for some css classes. I already have several other tags in place and they all work well with the exact same settings. The gtm-settings are as indicated in the screenshots bellow. I also already tried with other settings such as RegEX and CSS selector but it all doesn't work.
CSS-Class of CTA-Button:
<a href="https://exampledomain.ch/kuenstler/" target="_self" class="button primary" style="border-radius:99px;padding:5 0px 0px 0px;">
<span>Alle entdecken</span>
Does anybody has an idea? Many thanks in advance!
Screenshot variable settings
Screenshot tag settings
Screenshot trigger settings
Screenshot Debug Console Variable
Try changing your trigger filter to Matches CSS Selector. And this is the value of your selector: a.button.primary, a.button.primary *
Your problem is that click actually lands on a span in a rather than a itself, therefore, your click classes are empty. That span has no classes.
How do I know where the click lands? I can see that from the "value" of the Click Element variable in your debugger screenshot. That's not real value, but that's a generic selector that attempts to uniquely identify an element that was clicked on. The end of that selector. See how it actually has your a but then it has > span? There.
Ive got a link showing up in my wordpress menu that is not present in back end (the costumizer). The link/element only shows up in front end/the live page. I've been in touch with the theme support but they only said it was not from the theme. The code does not either give me an explenation to where it comes from. The code for the element is the following:
Register
LOL I CAN't even write the code without it showing up as only "Register" above.
I want to remove it. I have searched and tried different solutions on this forum but cannot find a way to remove the element.
So far I've tried to add the following code to the "costum css" in the costumizer with no result:
a[href='register']{ display: none }
I am not an expereinced code man. So please excuse my lack of explenation.
See code from inspect in picture below:
Picture from inspect. The element I want to remove is the >Register just where the pink ends
This is a picture of the menu. As you can see the "Register" link I want removed does not even get the same styling as the other elements in the menu..
Any one know how to remove this element? I've been struggeling for so long trying to find a solution.
Thanks!
It is likely added to the menu object by one of the plugins you have installed on the site.
Try turning off your plugins one-by-one and checking to see if it goes away.
you can try
.left-menu li:last-child { display: none; }
or
.left-menu li:not(.menu-item) { display: none; }
I have posted another similar problem yesterday. Here's the link.
Now I ran into a different problem. Under a rich-column of an extended data-table, I have added another 2 rich-datables. One table for the header, the other table for the table-data. All these were done to make sure our design doesn't get changed.
Now, coming to the problem, you can see the attached image down. [Intended Page Rendering][2]. This is what I need. But when the page loads, I generally get something like this [Actual Page rendering][3].
After looking through the generated HTML code, I can get the desired output by deselecting the background-color property of the rf-dt class. See the third image below.
[Generated HTML -code][4] - this shows by deselecting the background-color property of rf-dt class, I can achieve my purpose. But when I go to actual code and try to put the changes its not working... I tried to put this in the CSS class
.shipmentBrowseTable .rf-dt {
background-color: none;
}
where shipmentBrowseTable is the styleclass for outer Extended-data-table - the same styleclass used for inner data-table too.
The above code is not giving me the intended result. If someone can help me with this, it would be great.
.shipmentBrowseTable .rf-dt {
background-color: none !important;
}
the !important tag should override most styles
The design of the page should look like this:
http://www.ski.kommune.no/Skoler/Finstad/
Another css-file is loaded in this page, bringing some unwanted attribute of the css-tags, which makes the design undesirable, e.g. the text in the blue field is moved.
http://www.ski.kommune.no/Skoler/Finstad/Praktisk-informasjon/Test-av-bildegalleri/
Which css-tags are creating the design problem in the above example? I looked with Firebug, but I couldn't find.
What is the best way to restore the design?
The problem comes from 5th item in your main horizontal menu.
The list item there has a class="calendar".
according to browser developer tools that class is:
.skole .calendar, .skole .news-list {
overflow: hidden;
margin-bottom: 20px;
}
the problem there is margin bottom.
to solve the problem:
the best way is to separate the 2 classes and remove the margin-bottom from the calendar class.
a word of advice:
try learn how to use different browsers developer tools.
in my view the bests are chrome and firebug.
have fun!