In Git-Repro https://github.com/Turbo87/sidebar-v2 sidebar-v2 is presented but I can not bring it to work with ol5 when I like to import in a external .js file the necessary sidebar-v2 methods.
Tried to include the repros content into my repro but still can not run ol.control.sidebar
The div of the sidebar hast to be in the div of the map. Additionally add display: block;
position: relative; into the css #map style.
Solved the problem by adding
export {default as Sidebar} from 'sidebar-v2/js/ol5-sidebar.js';
to node_modules/ol/control.js
AND
import {Sidebar} from 'ol/control.js';
into the .js where the map is created.
Related
I am trying to reposition the entire block of navigation section in a different position than it is right now, e.g. moving it a little upward as it is shown in the attachment.
I have tried to modify the CSS file under ..porto/web/css/header/type2.css with the class .nav-sections. I have tested with other possible CSS classes and after so many attempts I haven't found it working; now I am looking for help. Can anyone please give me any hint on this issue? I am using porto theme with my site.
Ideally you would want to edit the .xml file from the correct module within your own frontend theme. But if your specifically looking to just edit the css the below might work:
.page-header.type2.header-newskin .nav-sections {
text-align: center;
position: absolute;
top: 70px;
left: 35%;
}
you can just tweak the top and left positions to your needs.
I'm trying to style two different Dropdown components from ant.design.
For one Dropdown component, I usually create a css file, find the specific className, edit the component using css, and then import the css file. Whenever I do this though, all of the Dropdown components I use throughout the webapp get modified with the same css file even if I don't import the css file into the specific file.
In this case, I want to style two Dropdown components differently. How can I do this?
Any help is appreciated; thanks in advance :)
i usually just use styled-components and then wrap the component. I use react front end tho.
import styled from 'styled-components';
<LoginForm onSubmit={this.handleSubmit}>
</LoginForm>
const LoginForm = styled(Form)`
max-width: 300px;
align-self: start;
justify-self: center;
`;
With my app, I currently have only 1 component (the nav) and I have set the CSS for app-root, as well as app-navbar as:
* {
margin: 0;
}
Despite this, the margins persist; I can't even edit them in chrome web development tools in the browser for some reason, The only way I get the margins to disappear is to go the angular root index.html file, and manually enter the style tags there,
Anything else I apply to the * tag (such as font-family) is applied to the entire document, just not margin for some reason,
If anyone knows why you'd save me from ripping any more hair out.
You can add it in app.coponent.css
* {
margin: 0;
}
and set encapsulation: ViewEncapsulation.None in component decorator.
import { Component, ViewEncapsulation } from '#angular/core';
#Component({
selector: 'app-root',
encapsulation: ViewEncapsulation.None
})
By setting ViewEncapsulation to None all the styles apply to the entire document. Or in other words, a component could overwrite styles from another component because its styles are applied to the document head later. Otherwise you can use the global style.css file generated in your directory.
When you create a project with the Angular CLI, the CLI creates a global style file, usually under the name style.ext, where ext is the extension you chose (default to css).
So you should open this default file, let's assume it being style.css, and add those lines in it.
* {
margin: 0;
}
If I were you, I would also add this to this file :
html,
body {
height: 100%;
}
This will prevent you from some errors you could encounter later on, if you want to play with heights (I do this in all of my projects)
I'm trying to edit some background on a page. I don't have access to the html file, only .css and .js. The page has a default theme that won't expand the background on the whole screen (bottom) because of the structure. I managed to swap the default background .png with an animated gradient through css but now I need to change the div. Tried with the #import url at the very top of the css file to call an external css but it won't work. Are there any ways to override the html structure? thank you
Forgot to say that I don't have access to the default template's css either. The service keeps everything on the server and once I installed the template in the local folder (the whole thing works with dropbox) I found an additional .css and .js in which I can add other code, though they come basically blank. What I need to do is to override the template's div structure from one of those 2 files. Using DevTools i found the name of the template div class and I guess I can download the relative .css. Still don't know how to override it... I'm not too familiar with coding in general...
Not clear with what you're trying to do. But you can always use Javascript DOM manipulation functions.
Check out this link for that: http://callmenick.com/post/basics-javascript-dom-manipulation.
You can also use jquery which provides better API.
If it is in some class definition or in a stylesheet file then use selector with high Specificity to get your definition on high priority
.oldclass{
width:328px;
height:328px;
background-image:url('http://via.placeholder.com/328x328');
}
/*Your New definition*/
div.oldclass{
background-image:url('http://via.placeholder.com/328x328');
}
<div class="oldclass">
</div>
If it is in inline style, then use !important tag
.oldclass{
width:328px;
height:328px
}
/*Your New definition*/
div.oldclass{
background-image:url('http://via.placeholder.com/328x328') !important;
}
<div class="oldclass" style="background-image:url('https://www.gravatar.com/avatar/fca24c2acab4d63343d4608ce256dcec?s=328&d=identicon&r=PG&f=1');">
</div>
I'm using a plugin to display vote buttons on my wordpress install.
Plugin loads the css from an external source (plugin owner site).
Since I can't touch that css I'm using custom.css to change the positioning of button.
The problem is that while it loads, for 1-2 seconds, the element that contains the button is displayed distorted. Since I have 25 such elements per page, it looks aweful until the buttons load and my css takes effect.
You can see it in action here: http://theroadmap.co/generation/
Here is my custom css for the button (also if you inspect element on my site):
.likebtn-wrapper.lb-loaded.lb-style-heartcross.lb-popup-position-top.lb-popup-style-light
position: absolute;
text-align: right;
top: -3px;
right: 0;
width: 10%;
I was wondering what would be the easiest way to fix this? I was thinking of doing display:none or visbility:hidden until the user hovers, but it doesn't seem to solve the problem. I tried using a lazyload for the image, but it's the element that's causing the visual distortion not the image.
Thanks!
Try adding following code to your CSS:
.tooltip { height: 24px; }
Edit: You'll just need to set height of list items (i.e. class tooltip).
Basically, it will create the structure while CSS gets fetched from likebtn.com