From the CSS I can tell the here-api can set a css class on the infobubble that hides the close button. How do I use it?
Update:
Here is a link to the css provided by HERE: https://js.api.here.com/v3/3.0/mapsjs-ui.css
In it there is styling to hide the close icon in the infobubble if this class "H_ib_noclose" were to be set higher in the DOM.
.H_ib_noclose .H_ib_close {display: none;}
.H_ib_noclose .H_ib_body {padding: 0 0 0 0;}
I can tell that is should be set higher the the div that has the class of H_ib_body.
So does HERE provide the method that adds the class?
I don't think, there is a direct method which uses this class. You could add the class using the "addClass" method of InfoBubble.
currentBubble.addClass("H_ib_noclose")
Related
I am learning how to use the Chakra-UI drawer component: https://chakra-ui.com/docs/overlay/drawer. It basically does everything I want it to, with one exception -- it covers the content instead of pushing it to the side. What I want is a right side drawer that when it opens pushes the content to the left.
Is this possible with the Chakra-UI Drawer component? If so, how can I do it?
Thanks.
I am not sure about this solution but you can try This
1.Don't Use Drawer.
2.Instead of drawer create a one component called custom Drawer(you can name enter code hereany) that have stuff which you required
In custom Drawer write some css for parent element class name will be as follow and class Name Will Accept By Props
.displayNone{
display:none
}
.displayNone{
display:block;
position:absolute;
top:0px;
left:0px;
width:400px
overflowX:scroll
}
3.Now By Conditional Rendering of components you have to pass following components
I.
<customeDrawer class="displayNone"><customeDrawer>
II.
<customeDrawer class="displayBlock"><customeDrawer>
Hope So It Will UseFull
what worked for me was to set padding-right: 0 !important to the body.
Is it possible to add a whole new CSS class like this in Chrome dev tools?
.myclass {
background-color: yellow;
}
On the Elements tab there's a styles tab which contains a small + button on the right side.
When you click here, you can add a whole new CSS class.
Once you've defined the new class, see Add a class to an element to learn how to apply it to an element. You could also just double-click the element in the DOM Tree on the Elements panel to add or edit the element's class attribute.
I'm doing an image button rollover that has 3 stages (normal, hover, active).
I have the normal and hover stages working, however I can't seem to get the 'active' to work. That is, I want the image to stay on the active lever after it has been clicked.
Here is what I have:
http://jsfiddle.net/pufamuf/Q3YpU/1/
Thanks! :))
What you're trying to do will require JavaScript. Your CSS is fine, but when the link is no longer active, the :active selector no longer applies, and there's not much you can do about that.
You could (for example) use JavaScript to respond to the click event by adding an extra CSS class to the tag, and use that class to style the link identically to your :active link. For example, if your JS adds the class "clicked", your rule might look like
#emailUs:active, #emailUs.clicked
{
background-position: 0 -62px;
}
Many (most?) developers would probably use jQuery for something like this.
The :active pseudo-class only applies while the element is in the process of becoming activated. Once the mouse click is released the element no longer falls under the :active category.
In order to produce your expected behavior you will need to use some Javascript.
Use jQuery addClass on click event
If you could use JavaScript, this would be simple. Come up with some class name (e.g., active), and add it to your :active declaration:
#emailUs:active, .active
{
background-position: 0 -62px;
}
Then use JavaScript to listen for the click event on that link, prevent the default action, and add/remove the active class from the element as necessary.
However, if JavaScript isn't allowed, there's a much messier way to get what you want, which probably won't be feasible on a live site.
Change the link's href so that it points to itself:
<a id="emailUs" href="#emailUs" title="Email Us"></a>
Then use the :target selector in your CSS:
#emailUs:active, #emailUs:target
{
background-position: 0 -62px;
}
Keep in mind that the second solution has some caveats that go with it:
It tries to reposition the page so that the link is at the top of the screen
There could be a bunch of issues if you're already using the fragment identifier on your site
It won't work at all in IE6-8
I'm new to Dojo and CSS, so maybe I'm missing something obvious here.
I have a page with several Dijit buttons that are created programmatically, and I want to make one of them bigger- leave the text alone and increase the space between the text and the edge of the button. I don't want to override the CSS for .dijiButtonNode to do so because there are other Dijit buttons the page that shouldn't be altered.
I tried adding this to the widget declaration:
style: { padding: "1em" }
and this:
class: "PaddedButton"
.PaddedButton
{
padding: 1em;
}
but since Dijit buttons are rendered as nested spans it padded the area around the button instead.
The best way to work with CSS is using one of the browser debugging tools (that you should already be using) like Firebug or the Chrome developer tools. You can find an element's DOM node easily with inspect_element and then directly edit its CSS styles until they do what you want. You can also see what CSS rules are active and what are being ignored or overwritten.
I have come up with a working example here:
http://jsfiddle.net/missingno/FrYdx/2/
The important part is the following CSS selector:
.paddedButton.dijitButton .dijitButtonNode {
padding: 1em;
}
This selects any node with class dijitButtonNode that descends from a node that has both of the paddedButton and dijitButton classes. I couldn't do just a .paddedButton .dijitButtonNode because then the rule would end up being cascaded by a more specific selector.
I use Firebug and Web Developer Firefox extensions. One feature I am looking for and which I am not sure if they exist in these extensions is when I am looking at a webpage source, I want to click on a class or id name and somewhere it displays the definition of that class or id. Not the css inheritance hierarchy. Just the particular class or id if they exist
For example:
.....
I click on "header" and I get the css definition or it tells me there are none. I want to filter the css tree hierarchy to just display that class.
Any extensions can do that?
Firebug can do that. Open the HTML-tab, select the element you are interested in. Look in the right box of the firebug window under the style-tab. There you will see each style applied to the element be it by id, class or any other type of selector. You can also check out the layout-tab to see the offset, margin, padding and width of the selected element.
For instance, here on StackOverflow, when I click on the body-element, I see the following:
body { /* File: all.css?v=3496 (row 1) */
background:#FFFFFF none repeat scroll 0 0;
color:#000000;
font-family:Arial,Helvetica,sans-serif;
font-size:80%;
text-align:center;
}
body { /* File: all.css?v=3496 (rad 1) */
line-height:1;
}
/* + A lot of reset styles for all elements */
This doesn't do it from the source (I don't believe) but does do it on the page. Would CSSViewer help?
https://addons.mozilla.org/en-US/firefox/addon/2104