In this example the the custom control is placed below the actual leaflet-control-container element.
<div class="leaflet-control-container">
<div class="leaflet-top leaflet-left"></div>
<div class="leaflet-top leaflet-right"></div> <----- Where I want it
<div class="leaflet-bottom leaflet-left"></div>
<div class="leaflet-bottom leaflet-right"></div>
</div>
<div class="leaflet-top leaflet-right"></div> <----- Where it is actually placed
This causes that anything in leaflet-control-container leaflet-top.leaflet-right div is covered with the custom element.
Is there a way to place this custom element inside leaflet-control-container?
That example looks buggy and unnecessarily complex. Try wrapping the minimap component in a LayerControl and using that to set the position:
<LayersControl position="topright">
<MinimapControl />
</LayersControl>
Related
I masked(mask-extension) a couple of plug-ins. When the image is generated in the template, it is always wrapped in following divs:
<div id="c63" class="frame frame-default frame-type-image frame-layout-0">
<div class="ce-image ce-center ce-above">
<div class="ce-gallery" data-ce-columns="1" data-ce-images="1">
<div class="ce-outer">
<div class="ce-inner">
<div class="ce-row">
<div class="ce-column">
<figure class="image"><img class="image-embed-item"
src="fileadmin/user_upload/bla" width="975"
height="678" alt=""></figure>
</div>
</div>
</div>
</div>
</div>
</div>
Is there any way to remove all those wrappers? I simply want to have the image.
Sidenotes:
1. f:image does not work, I cannot access the proper uid for it to show. (This is perhaps an issue with mask)
2. I cannot find the tt_content.stdWrap.innerWrap > in my typoScript, as I do not know where mask puts it. It is neither in the netup.ts nor in the NewContentElementWizard.ts
You need to overwrite the fluid_styled_content partial in Resources/Private/Partials/Media/Gallery.html.
How to overwrite, you can read here: https://docs.typo3.org/typo3cms/extensions/fluid_styled_content/8.7/Configuration/OverridingFluidTemplates/
Bootstrap newbie here.
I'm trying to bootstrapify an old page but I can't seem to figure out how to stop my image from overflowing to the next column. I have a row with two columns- with the left side containing a picture. As soon as I reduce the window width, my image will start overflowing to the right column and will eventually collapse on top of the right column. I would like for the left column width to remain static or collapse to the top of the right column until the image can no longer fit in the left column.
I've tried adding the image-responsive class to the image but that will only change my image dimensions and I would prefer the image to keep its dimensions. Any help would be greatly appreciated!
Here is my code: https://www.codeply.com/go/fb14u8fsSc
Is it something like the one below you are looking for?
A couple of notes though:
It might be because of your simplified codeply example, but you use <div class="row"><div class="col-md-12">…X…</div></div>, which is the equivalent of …X…. That simplifies things.
We are talking about Bootstrap 4 here (you also use that in your codeply), but the .img-responsive class is from Bootstrap 3. That class is called .img-fluid in Bootstrap 4.
Regarding inline-style margins, I would suggest to use the spacing utility classes instead.
<div class="container-fluid" style="position: fixed">
<div class="row">
<div class="col">
<div class="card my-3">
<div class="card-header"></div>
<div class="card-body">
Insert name here<br/>
<img src="https://dummyimage.com/188x225/000/fff" class="XXXimg-fluid" alt=""/>
</div>
<div class="card-footer"></div>
</div>
</div>
<div class="col-md-9">
<div class="card text-xs-center mt-3">
<div class="card-header"></div>
<div class="card-body"></div>
</div>
</div>
</div>
</div>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
I need to figure out a way to add information from sibling pages to my template file
Here is an image of the file structure (the red items are the siblings whos info I need to access inside my template):
Here is the tpl file code that I am using:
[[+total:isequalto=`1`:then=`<div class="equalHeightListItem full_width[[+idx:isequalto=`1`:then=` column-last`]]">`:else=``]][[+total:isequalto=`2`:then=`<div class="equalHeightListItem one_half[[+idx:isequalto=`2`:then=` column-last`]]">`:else=``]][[+total:isequalto=`3`:then=`<div class="equalHeightListItem one_third[[+idx:isequalto=`3`:then=` column-last`]]">`:else=``]][[+total:isequalto=`4`:then=`<div class="equalHeightListItem one_half[[+idx:isequalto=`2`:then=` column-last`]][[+idx:isequalto=`4`:then=` column-last`]]">`:else=``]]
<figure class="projectImg bwWrapper icon-box7">
<a href="[[~[[+id]]]]">
<div class="operations productImage" style="max-width: 100%; background-image: url('[[+tv.products.category.img]]')"></div>
</a>
<div class="projectDesc equalHeightListItemInner operations">
<h4>[[+menutitle:default=`[[+pagetitle]]`]]</h4>
<p>[[+introtext]]</p>
<div>Read More</div>
<!-- I need to add sibling info here -->
</div>
</figure>
</div>
Any help is greatly appreciated.
I use pdoResources (which similar to getResources, but faster). Place this code in instead <!-- I need to add sibling info here --> and this is would help.
[[pdoResources?
&parents=`[[+id]]`
&depth=`1`
&tpl=`your_sibling_row_tpl`
]]
for sure its the easiest thing...
i need to append a certain div to a specific place inside a div block and after a specific div.
this is my code:
<div class="header">
<div class="logo">
<div class="ulWrap">
<div class="apple-logo">
<div class="android-logo">
<div class="mmBtn"></div>
<div class="mmBtnC"></div>
</div>
i need to insert a new div right after the:
<div class="logo">
i tried:
$('the div i want to append').eq(0).appendTo('.header');
but it appended it after the last div.
try after():
$('.logo').after('<div>some new div</div>');
I've my markups as
<div id="home" class="current">
<div class="header">iScroll</div>
<div class="wrapper">
<div id="scroller">
<ul id="thelist" class="plastic"><!-- li items --></ul>
</div>
</div>
<div class="footer">Footer</div>
</div>
<!-- Events Details -->
<div id="events">
<div class="header">iScroll</div>
<div class="wrapper">
<div id="scroller"> <!-- stuffsss --></div>
</div>
<div class="footer">Footer</div>
</div>
For iScroll (http://cubiq.org/iscroll) to work, I need the #scroller as ID (as per the javascript Code I'm using to initialize iScroll.
//for iScroll
var myScroll = new iScroll('scroller', {desktopCompatibility:true});
// Load iScroll when DOM content is ready.
document.addEventListener('DOMContentLoaded', loaded, false);
But since I can't have two different elements with the same ID (please notice I've got two elements with same id scroller in my markup above), some conflicts are there and the iScroll isn't working properly.
I want to be able to implement the iScroll on the markup by changing the id as classes. I tried to change them into classes and see if it works but I couldnt get it right.
Can anyone help me change the codes so that it works by implementing classes instead of the the id??
Rob is right, but you can change your code to scroller classes as you said.
Then initialise your scrollers within unique wrappers like this:
var scroll1, scroll2;
function loaded() {
scroll1 = new iScroll('wrapper1');
scroll2 = new iScroll('wrapper2');
}
I'm not totally clear on what you are trying to achieve but if you want two parts of your page to scroll I would suggest changing the IDs to be unique and instantiate two iScrolls with the different IDs.
I am sure you have figured it out, but for other users still struggling with similar layout (multiple scrollers) and want to make them work. Here is the answer from other thread
https://stackoverflow.com/a/7584694/1232232
but for this to work you need to assign ID's to your classed (div containers)
like
<div id="home" class="current">
<div class="header">iScroll</div>
<div id="wrapper-1" class="scrollable">
<div class="scroller">
<ul class="thelist" class="plastic"><!-- li items --></ul>
</div>
</div>
<div class="footer">Footer</div>
</div>
<div id="home2" class="current">
<div class="header">iScroll</div>
<div id="wrapper-1" class="scrollable">
<div class="scroller">
<ul class="thelist" class="plastic"><!-- li items --></ul>
</div>
</div>
<div class="footer">Footer</div>
</div>
Note: Remember not to assign same ID to multiple elements, always use classes for that purpose.