I created a MudBlazor template project. The top "AppBar" seemed unnecessary and taking place, so I deleted it. The problem is that page content is still placed below that area as if AppBar is there. How can I remove that margin?
<MudLayout>
#* <MudAppBar Elevation="0">
<MudIconButton Icon="#Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start" OnClick="#((e) => DrawerToggle())" />
<MudSpacer />
<MudIconButton Icon="#Icons.Custom.Brands.MudBlazor" Color="Color.Inherit" Link="https://mudblazor.com/" Target="_blank" />
<MudIconButton Icon="#Icons.Custom.Brands.GitHub" Color="Color.Inherit" Link="https://github.com/MudBlazor/MudBlazor/" Target="_blank" />
</MudAppBar>*#
<MudDrawer #bind-Open="_drawerOpen" Elevation="1">
<MudDrawerHeader>
<MudText Typo="Typo.h6">MudBlazorTemplates1</MudText>
</MudDrawerHeader>
<NavMenu />
</MudDrawer>
<MudMainContent>
#*<MudContainer MaxWidth="MaxWidth.Large" Class="my-16 pt-16">*#
<MudContainer MaxWidth="MaxWidth.Large">
#Body
</MudContainer>
</MudMainContent>
</MudLayout>
Related
for a project, I am trying to provide a user interface where a user can position sensors on a foot and then save the sensors position in the image to display them later :
In doing, so I create 5 images, one per sensor and the image of the foot mapping but I have no idea how to put the sensors icon in the image and then save their position inside the image. I have the following code :
<p>Put on the foot mapping the sensors position</p>
<img
alt="foot_mapping"
src={require("assets/img/theme/circle-1.png")}
class="inner-image"
width="40em"
height="40em"
/>
<img
alt="foot_mapping"
src={require("assets/img/theme/circle-2.png")}
class="inner-image"
width="40em"
height="40em"
/>
<img
alt="foot_mapping"
src={require("assets/img/theme/circle-3.png")}
class="inner-image"
width="40em"
height="40em"
/>
<img
alt="foot_mapping"
src={require("assets/img/theme/circle-4.png")}
class="inner-image"
width="40em"
height="40em"
/>
<img
alt="foot_mapping"
src={require("assets/img/theme/circle-5.png")}
class="inner-image"
width="40em"
height="40em"
/>
<img
alt="foot_mapping"
src={require("assets/img/theme/foot.png")}
width="80%"
height="80%"
/>
I tried the inner image with no luck yet and I didn't find other ressources regarding this problem.
Thanks in advance :)
I have taken an empty template and in the index.php enter the code for displaying articles .. in the video tutorial everything is displayed correctly but nothing is displayed for me
If I set the default template as default everything works fine. I have linked everything together (article with category, category with menu) and activated but nothing is shown. When I code normal html everything is displayed to me.
...
<body class="<?php echo (($menu->getActive() == $menu->getDefault()) ? ('front') : ('site')).' '.$active->alias.' '.$pageclass; ?>">
<h1>Hello</h1>
<hr />
<jdoc:include type ="component" />
<hr />
Am i wrong? Because in the tutorial its working with the same code
<jdoc:include type ="component" />
Remove the space between type and = , like so:
<jdoc:include type="component" />
Like in HTML, there can never be space between a attribute and its value.
I am trying to click the second tab Tab1_imgImbillsTab.
<div id="menuTabsForPageContainer" >
<div id="menuTabsForPage">
<img id="Tab1_imgHomePageTab" accesskey="H" disabled="disabled" class="imgHomePageTab" src="images/home_deselected_tab.png" alt="Home" style="border-width:0px;" />
<img id="Tab1_imgImbillsTab" accesskey="B" class="imgImbillsTab" src="images/bills_deselected_tab.png" alt="Bills" style="border-width:0px;" />
<img id="Tab1_imgArchiveTab" accesskey="C" class="imgArchiveTab" src="images/chartrack_deselected_tab.png" alt="Chart Rack" style="border-width:0px;" />
<img id="Tab1_imgPracMgmtTab" accesskey="I" class="imgPracMgmtTab" src="images/managementreporting_deselected_tab.png" alt="Business Intelligence" style="border-width:0px;" />
<img id="Tab1_imgSysToolTab" accesskey="Y" class="imgSysToolTab" src="images/systemtools_deselected_tab.png" alt="System Tools" style="border-width:0px;" />
<img id="Tab1_imgBulletinTab" accesskey="S" class="imgBulletinTab" src="images/settings_deselected_tab.png" alt="Settings" style="border-width:0px;" />
</div>
</div>
I tried several things:
browser.button(:id => 'Tab1_imgImbillsTab').click
browser.div(:id, "menuTabsForPage").div(:id, "menuTabsForPage").button(:id, "Tab1_imgImbillsTab").click
I also tried to reference it as a clickable image by referencing the "src" of the image. These tabs, I believe have JavaSceript behind them. I can not figure out what I'm doing wrong.
The code:
browser.button(:id => 'Tab1_imgImbillsTab').click
Says to find a button element or input element (of type button, reset, submit or image) that has the id "Tab1_imgImbillsTab".
However, based on the HTML, the tab is an img tag. As a result, it will never be found by the button method. Tell Watir to look for the img tag instead:
browser.img(:id => 'Tab1_imgImbillsTab').click
I made an image into a map with images-map.com
I made some clickable areas, but i cant figure out how to make a function when i click on one of the areas. When I click on the images it will direct me to a website.
<img id="Image-Maps-Com-image-maps-2014-02-12-182158" src=images/map2.png border="0" width="491" height="360" usemap="#image-maps-2014-02-12-182158" alt="" />
<map name="image-maps-2014-02-12-182158" id="ImageMapsCom-image-maps-2014-02-12-182158">
<area shape="rect" coords="489,358,491,360" alt="Image Map" title="Image Map" href="http://www.image-maps.com/index.php?aff=mapped_users_0" />
<area id="cen" shape="poly" coords="242,117,227,117,212,143,232,175,244,173,252,169,264,166,272,161,278,155" alt="Centrum" title="Centrum" target="_self" href="http://www.image-maps.com/" />
</map>
I want to make a function that loads an ID of a highchart that I made when I click on that part of the image.
I tried to replace the href="http://www.image-maps.com/" with an id but it doesnt work
Do you mean JavaScript function? If yes, use JavaScript Framework, for example jQuery. If you use jQuery, here is simple event that will be bind to any img HTML tag.
$("img").click(function(){
alert("The image clicked");
}};
I was wondering how I could make R. Recco's CloudCarousel V1.0.5 plugin scalable with different image sizes.
I mean: I have included the image carousel within Foundation responsive framework and since the rest of my web application fits correctly to different font sizes (using rem base in the layout), I would like to know which properties I have to change and how in the plugin in order to keep the same aspect with bigger or smaller sizes.
At the moment, I have only changed some linear properties (xpos, ypos), but since the plugin uses some no-linear functions (cos, sin..etc) I can't work out the pattern to follow (the spaces and positions don't match after changing the size accordingly with the wrapper containers). I have also tried modifiying min-scale, but I don't know what more to touch.
Could someone provide me some hints about what needs to be changed to scale everything properly?
Here is the jsfiddle with the relevant code. Hope this will be enough.
http://jsfiddle.net/joseAyudarte91/UaJg3/6/
This is the html:
<div id="carousel_wrapper">
<div id = "cloud_carousel">
<!-- All images with class of "cloudcarousel" will be turned into carousel items -->
<!-- You can place links around these images -->
<img class="cloudcarousel" src="http://s26.postimg.org/jxv8igwfd/image.jpg" alt="Miniatura: caserio nevado" title="Caserio nevado" />
<img class="cloudcarousel" src="http://s26.postimg.org/yjm96pt7t/image.jpg" alt="Desayuno en el porche" title="Desayuno en el porche" />
<img class="cloudcarousel" src="http://s26.postimg.org/62wy00209/image.jpg" alt="Suite" title="Suite "/>
<img class="cloudcarousel" src="http://s26.postimg.org/9rmmzhc15/image.jpg" alt="Porche hamacas" title="Porche hamacas" />
<img class="cloudcarousel" src="http://s26.postimg.org/4dnurxmax/image.jpg" alt="Sauna" title="Sauna" />
<img class="cloudcarousel" src="http://s26.postimg.org/yng2myyp5/image.jpg" alt="Camino entorno" title="Camino entorno" />
<img class="cloudcarousel" src="http://s26.postimg.org/glwxp64o9/image.jpg" alt="Sala con minibar" title="Sala con minibar" />
<img class="cloudcarousel" src="http://s26.postimg.org/9swkswdux/image.jpg" alt="Pantano Landa" title="Pantano Landa" />
<!--<img class="cloudcarousel" src="images/thumbnails/09.jpg" alt="Vistas con nieve" title="Vistas con nieve" />
<img class="cloudcarousel" src="images/thumbnails/10.jpg" alt="Porche vistas exterior" title="Porche vistas exterior" />-->
</div>
<!-- Define left and right buttons. -->
<center>
<input id="slider-left-but" type="button" value="" />
<input id="slider-right-but" type="button" value="" />
</center>
<div id="title_carousel">BIENVENIDO A ATERBE</div>
</div>
Ok, sorry but I have some problems to put more code here. I can't really understand why it is needed if I have a jsfiddle link.. Anyway, everything can be seen there.
Thanks
Ok, I have run into the answer in another post I hadn't seen before. It seems that the radious of the carousel circle needs to be changed first: Smaller Cloud Carousel