I am trying to make header & tab fixed while the main content is scrolled. Since those 2 header images & html tab is placed within page <content>. It scrolls. But how to make it fixed in its position?. Or is there any alternate solution to put the header out of page's content?. Here is my code
<mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" controllerName="budgetspend.controller.App" xmlns:html="http://www.w3.org/1999/xhtml"
displayBlock="true">
<App id="BA_APP">
<pages>
<Page>
<content>
<Image class="logo" src="../images/logo_new.png"/>
<Image class="header" src="../images/header-bg.png"/>
<html:ul class="tab">
<html:li>
<html:a id="onBud" class="tablinks active">Budget Analyzer</html:a>
</html:li>
<html:li>
<html:a id="onSpend" class="tablinks">Spend Analyzer</html:a>
</html:li>
</html:ul>
<sap.ui.layout:VerticalLayout xmlns:sap.ui.layout="sap.ui.layout" id="budget_layt" class="lay_cont">
<sap.ui.layout:content> .............
NOTE : Header image & tab covers almost 130px. so I can't place it inside <headerContent> tag.
You can place the content part of the page (which is now a VerticalLayout) into a sap.m.ScrollContainer, which provides scrolling capabilities to its content. With this, you can scroll the content inside the container. You can set a custom height to the scroll container.
Have you tried to implement an sap.m.IconTabBar control instead of creating HTML elements in the XML view?
Related
I have been migrating codes from .NET(webform) to .NET Core :
Within _Layout.cshtml, the following tags <hr>, <section> covers the full width(e.g. 100%) of the html as expected.
However, inserting similar tags within the content pages such as Index.cshtml do not cover the full width of webpage, for some reasons.
Even after adding in Index.cshtml
#page
#model IndexModel
#{
ViewData["Title"] = "Home page";
}
//test
<div class="container-fluid">
<hr style="width:20000%" />
</div>
one ends up with the horizontal line leading the expecting result from the right end side only, as opposed to the left-hand side, thus leaving me puzzled.
I was expecting to face issues following the code(s) migration on items other than the beforementioned tags. Thus any suggestion would very be appreciated.
For this phenomenon, I think you should take a look at the official documentation on _layout.
Doc:What is a Layout.
Article:What are Layout, _ViewStart, RenderBody, and RenderSection in MVC?.
RenderBody() is called to render the content of a child view. Any content on said view that is not in a #section declaration will be rendered by RenderBody(). Using the Layout view above, that means that all content in a child view will be rendered inside the . This allows us to separate layout that is common to all views from layout that is specific to a single view.
If we need some part of the page to change based on which child view the user is on,you can use RenderSection().
In your _layout:
#RenderSection("Body", required: false)
In your view:
#section Body
{
<div class="container-fluid">
<hr style="width:20000%" />
</div>
}
regarding to that article https://www.polymer-project.org/0.5/articles/spa.html i want to know how to add some content?
i know there is an example which loads external html files. but how to add my own content in the other examples?
Thank you
kind regards
Viktoria
on the page you linked there is a section headed "then drop in your content:"
then it is followed with this code.
<div layout horizontal center-center fit>
<core-animated-pages selected="0" transitions="slide-from-right">
<section layout vertical center-center>
<div>Single</div>
</section>
<section layout vertical center-center>
<div>page</div>
</section>
...
</core-animated-pages>
</div>
in that code each section tag is a diff page and the content of that page is in the enclosed div tag <div>Single</div> replace that tag to change the app content. it might also help to look over the documentation on the elements used in that example so you have a better understanding of how they work.
animated pages
https://www.polymer-project.org/0.5/docs/elements/core-animated-pages.html
I am a newbie to html and css so sorry if this sounds dumb.
How do I create a clickable area that contains two images, text, and whitespace that when clicked, opens ANOTHER html file within the page?
So far I got an html file to appear inside an html file like this:
<object data=EXAMPLE.html width=100% height=100% /> Error </object>
But the problem with that is that you must scroll within the content box to view it, and I would prefer if it expanded the content box indefinitely downward based on how big the html file was.
As #Jarred Farrish pointed out: Regular frames do what you describe. You don't need object elements.
I believe this question becomes a duplicate of this question.
You can make a "button" by creating a div, placing the other elements within the div, and setting an onclick handler on the div itself. You are free to have as much "empty" space, because the emptiness is really the div.
<div class=my_button onclick=my_button_press();>
<img src="..."></img>
<img src="..."></img>
<span class=my_text>My text here</span>
</div>
<iframe id=my_frame></iframe>
<script>
function my_button_press() {
document.getElementById('my_iframe').src = "...";
}
</script>
Check this example http://jsfiddle.net/b6sdunqj/1/.
You'd want to combine the instruction in the question referenced above with my_button_press() to complete everything.
In the _Layout.cshtml, I have a heading image and two link images that change into other images when the cursor hovers over them. When the page is loaded initially (e.g. //localhost:58055/), the images are shown. When I redirect through the links so that the URL is //localhost:58055/Home/Index, for instance, the images only show the little "broken image" icon. Why might this be? Here is where I specify the header's image in _Layout.cshtml.
<header>
<div class="trippy-title">
<img src="images/title_wider.jpg" width="100%" height="100%" repeat>
</div>
</header>
I recommend you read this article for a better understanding of locations in ASP.net.
http://www.west-wind.com/weblog/posts/2009/Dec/21/Making-Sense-of-ASPNET-Paths
as a simple solution you can use ~/images/title_wider.jpg this works with Razor 2+
I have the following HTML Code, If I have a lot of text inside my div called content, the footer div doesn't move downward and the texts go over my footer div.
To see the problem, please check this link http://jsfiddle.net/LhzrQ/
Could You please tell me how to solve the problem?
<div id="container" style="width:500px">
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Main Title of Web Page</h1>
</div>
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript
</div>
<div id="content" style="background-color:#EEEEEE;width:400px;float:left;">
HyperText Markup Language (HTML) is the main markup language for displaying web pages and other information that can be displayed in a web browser.
HTML is written in the form of HTML elements consisting of tags enclosed in angle brackets (like <html>), within the web page content. HTML tags most commonly come in pairs like <h1> and </h1>, although some tags, known as empty elements, are unpaired, for example <img>. The first tag in a pair is the start tag, the second tag is the end tag (they are also called opening tags and closing tags). In between these tags web designers can add text, tags, comments and other types of text-based content. The purpose of a web browser is to read HTML documents and compose them into visible or audible web pages. The browser does not display the HTML tags, but uses the tags to interpret the content of the page.
</div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
Copyright © W3Schools.com
</div>
</div>
</body>
You can delete the height element of the content div.
See: http://jsfiddle.net/LhzrQ/1/
Working fiddle
remove the fixed height to the content div. it will work .