I am beginner of cordova learning project and creating a sample application using eclipse. Using CSS file I am able to change image, height, width, margin and padding around it.
Now, to show Labels, Buttons and Radio button, listview how to add such UI components and where to add in index.html or css and handling a click event of button?
You could add any HTML component in the body tag.
<body>
//your code for various elements goes here.
</body>
But, if you want to add these components in real time use the innerHTML property (javascript) and allocate an event listener to that component.
HTML-
<label id="alpha1" onclick="fx()">Placeholder</label>
JS-
document.getElementById('alpha1').innerHTML="Content"
function fx (){
alert('Label Clicked');
}
Related
I am using the MatBlazor component library: https://www.matblazor.com/
and I am trying to understand how the designer for this website: https://blazor-wasm.quarella.net/Account/Login
centered the <MatCard/> element like so:
My following code looks like this:
#page "/login"
#using System.Text.Json;
#using Data.Models
#using MatBlazor
#inject HttpClient Http
<MatCard >
<MatCardContent >
<MatH2>Login</MatH2>
<button #onclick="OnLoginClick">Log in</button>
<p>Need an account? Sign up</p>
<button #onclick="OnSignUp">Sign up</button>
</MatCardContent>
</MatCard>
#code {
}
which outputs:
The example code provided here: Login Razor Page, specifically line 27 {<MatCard> doesn't have any classes but the element is centered nicely across the screen.
Two questions
How do I achieve this card centering effect using the MatBlazor library (minimal custom css)?
How the login page designer center it? I see there was a ".login-container" class added which is here but there's no indication of it being used in the razor page.
EDIT:
Where did the designer use class="login-body" or class="login-container" based on the answer below
As you mention, if you inspect the element of the login page, you can see that the MatCard is using the class login-container which applies a margin auto to the left and right side of the element. That's what is causing it to be centered.
Most likely, per the stylesheet you referenced, the wrapping elements on the login page reference the CSS located here. It's called .login-body and just like in item 1 above, it is using a margin of auto to center horizontally.
The login-body and login-container classes are applied to the pages by either the Shared/Components or the Shared/Layouts. For example, the Login page you reference in your question appears to be using the LoginLayout.razor here. There you can see that both of these classes are being used.
I would like to modify quite a large amount of styles on a page through a customisable panel. When a user clicks an option, the content on the page will completely change based on whatever was clicked.
This cannot be a scenario where a class is appended to a parent element and use CSS/LESS to adjust accordingly. For this scenario (for requirement reasons) the CSS needs to be internal on the angular component HTML.
Is it possible to have a value in the component TS like this:
myNewColour: "red"
That can then be used in an internal style sheet that's inside my angular component.html like this?:
<style>
.myContainer { background: myNewColour }
</style>
<!-- HTML Content -->
<div class="myContainer"> Stuff </div>
Any help with this would be appreciated! :)
"Internal in the HTML template" is called inline style ;) Apart from that, you can use ngStyle like so
<tag [ngStyle]="{'background': myNewColour}"></tag>
EDIT if it makes your code too long, what you can do is simply
let customStyle = {
'background': this.myNewColour
};
And in your tag, simply
<tag [ngStyle]="customStyle"></tag>
I have a responsive site with bootstrap 3.1.1. I want to show the desktop view when the user click a button "Desktop view".
I have used this question right here as the support but this does not help.
It does not help for 2 reasons:-
The CSS I have added in my Layout file is as shown:
<link rel='stylesheet' media='screen and (max-device-width: 480px)' href='styles/mobile.css' type='text/css' />
I have used hidden-xs, hidden-sm, hidden-md and hidden-lg classes throught out my application.
How can I make the site desktop view and mobile view with the button click?
EDIT
I am simultaneously using both the style sheets at the same time. The style sheet for "mobile.css" and "desktop.css" (for the items which doesnot need to be styled specially for mobiles).
SO swapping both the style sheet would not work.
A way: is to use Jquery to change the meta tag for the viewport when the button is clicked:
$('#buttonId').click(function (){
$('meta[name=viewport]').attr('content', "width=1024");
});
I just thought of something simple. To all you divs that have hidden-xs classes: add a special class (had-hidden-xs), for hidden-lg add had-hidden-lg and so on for every single one of them.
//when the button is clicked, every class is removed
$('#buttonId').click(function (){
//removes all the classes
$('.hidden-xs, .hidden-sm, .hidden-md, .hidden-mg').removeClass('hidden-xs hidden-sm hidden-md hidden-mg');
});
//when the button to go to mobile view is clicked:
$('#backToMobile').click(function (){
//add back your classes using the classes you created in the previous 2 steps
$('.had-hidden-xs').addClass('hidden-xs');
$('.had-hidden-sm').addClass('hidden-sm');
$('.had-hidden-md').addClass('hidden-md');
$('.had-hidden-lg').addClass('hidden-lg');
});
Before Question Edit: Looking at your style sheet, you probably have a style for desktop too since you have a mobile.css. You can easily swap the stylesheets using jquery
$('#buttonId').click(function (){
$('link[href="styles/mobile.css"]').attr('href','desktop.css');
});
$('#buttonId').click(function (){
$('link[href="style/desktop.css"]').attr('href','mobile.css');
});
By reading this I created a popup in main document outside data-role="page" as a direct child of <body>.
then the styles are not getting affected. Once I put inside data-role="page" styles are getting affected.
You must initialize the popup yourself it is outside the page. For example, it the popup's id is 'popup-outside-page', you would need the following code on your first page:
$(function(){
$( "#popup-outside-page" ).enhanceWithin().popup();
});
I have an accordion control in ASP 3.5, with multiple accordion panes. For the sake of simplicity, I will only focus on one pane as the problem is pane specific. Using JQuery, I created a draggable function and applied it to my .drag CSS class. On Page_Load, I create a bunch of image objects and assign that class to them, in addition to an image. Once I load the page, I can drag all the images around as intended. What I can't do, however, is drag those images outside of the accordion panel they were created in! Is there a way around that? I tried using this, but to no avail:
<script type="text/javascript">
$(function () {
$(".drag").draggable({ containment: 'document' });
});
</script>
Is there something in the actual aspx page that I should be focusing on? I'm adding the images to a panel in my accordion pane, and it looks like this:
<ajaxToolkit:AccordionPane id="AccordionPane1" runat="server">
<Header> Chassis</Header>
<Content>
<asp:Panel ID="ChassisPanel" runat="server">
</asp:Panel>
</Content>
</ajaxToolkit:AccordionPane>
I appreciate any guidance!
Have you tested this in multiple browsers? Sounds to me like an issue I had with IE. Perhaps adding a large Z-Index value to your .drag class in CSS would help.
All I had to do was add the clone helper, then anything I drag is able escape its parent container. This is how I updated my drag line and now it works:
$('.drag').draggable({ revert: true,helper: 'clone' });}
Now for the life I me I can't figure out the droppable bit :)