In my MVC application, I have used #Html.ActionLink. I have set their styles to display them like a button, but the problem is that there are stome styles for a, a:link, etc (I mean, all anchor behaviors) in the CSS file, and that is why the links on #Html.ActionLink appears like links, and not plain text. Any idea to get rid of all anchor behavior for those particular #Html.Actionlink controls?
Is using jQuery an option? You could write a function to remove the css from each link on startup.
$(document).ready(function() {
// to clear css from a specific item
$("#your-link-id").removeClass();
// to clear css from a bunch of links
$("your-selector a").each(function() {
$(this).removeClass();
});
});
Or you could create additional css classes that override the styles on your a tags.
<style type="text/css">
.whatever { background-color:black !important; }
</style>
#Html.ActionLink("MyAction", "MyController", new { #class = "whatever" })
Related
I am working on a project that is using angular materials design and I wanted to add certain styles to without using inline css but could not figure out the best way to do same.
Please note I tried adding a class with those styles but it was by default picking styles from .md-button class and was not picking the Css class I added
CSS class
.button__style {
text-transform :none;
font-weight :bold;
}
HTML
<md-button class='button__style'>Click me </md-button>
Also I know we can manipulate the default theme colors as below but wanted to find out if I am missing a way to add the two styles I require above i.e. text-transform : none and font-weight :bold;
angular.module('myApp', ['ngMaterial'])
.config(function($mdThemingProvider) {
$mdThemingProvider.theme('default')
.primaryPalette('pink')
.accentPalette('orange');
});
Your HTML
<div class='button__style'>
<md-button >Click me </md-button>
</div>
In your CSS :
.button__style {
button {
text-transform: none;
font-weight :bold;
//or any style you want to apply
}
}
Try this.
Code pen example for your problem
I am developing website for music school. I want to set a background image for sign in page only. How can I do that?
#Html.ActionLink("EntryMode","EntryMode","Home")
#Html.ActionLink("Students","Index","Students")
#using (Html.BeginForm(new { #class = "form login-form" }))
{ ....
//form code here
}
If you want to have a different background in a view, you have to make appropriate changes in the markup of that view, not in the _Layout.cshtml file. This can be made by simply wrapping the content of that page, for example, in a
<body style="background-image:url('background.png');">
</body>
tag, but it depends on the markup you already have.
Provide your code, it will help giving more certain answer.
UPD :
Add this to the view
<style>
body { background-image: url("background.jpg"); }
</style>
If you're using a layout page you could add the name of the controller as class on the body. That way you can do lots of controllerdriven layout manipulation. At least that's how i'd do it.
Something along the lines of this: (untested, edit at will)
<body class="controller-#ViewContext.Controller.GetType().Name">
<div id="yourheaderimage">
<img .../>
</div>
</body>
combined with css
#yourheaderimage {
display: none;
}
controller-HomeController #yourheaderimage {
display: block;
}
I have a simple (newbie here) task in jquery mobile. Change the text of a button which has a custom style applied. I can change the text without problem in the 'pageinit' event however I lose the custom style in the process. Have read lots of article in stackoverflow but still lack a working solution.
Excerpt of html page below loaded by ajax
CSS
#goal .ui-btn-inner {
text-align: center;
background: chartreuse;
ui-disabled: true;
}
Button to be styled
<div data-corners="false" data-role="controlgroup" >
<a href="#" data-role="button" id="goal" >
text to be changed
</a>
</div>
...
Here is the jquery mobile code that changes the button text.
$(document).delegate('#problem_screen', 'pageinit', function() {
$('#goal').on('click', function() {
console.log('goal clicked');
});
$('#goal .ui-btn-text').text('New button text');
});
Thanks
Finally got this to work. My first JQM mistake was to define custom styles on each page of the multiple page application. This is wrong -- you must define all your custom styles in one location, typically a style sheet file which is included by every page. Another mistake is to have same id value on different pages. Wrong -- id values must be unique throughout application.
The api that applies (in this case enhances a style) is .addClass("). In my case I defined a style as follows:
.goal-style {
text-align: center;
background: charteuse;
ui-disabled: true;
}
Now after I update the button's text I say:
$('#goal').addClass('goal-style'); // Note: do not use '.goal-style'
Is it possible to make the suggestions of autocomplete (jQueryUI) get out one iframe, having the same behaviour of "select" element? I make one example:
http://jsbin.com/ehidef/1
As a matter of fact, it can be done, though some styling will be mandatory. jQueryUI accepts an element to append the options to, and you can pass the parent window as that element. An example:
main window:
<html>
<head></head>
<body>
<iframe src="iframe.html"></iframe>
</body>
</html>
iframe.html
<html>
<head>
<!-- include jQuery and jQuery UI and the like -->
<script type="text/javascript">
jQuery(function($){
// This will take parent frame if in iframe, own body elsehow
var el=top.document.body
// Instructs jQuery UI to show things on that previous element
$('input').autocomplete({appendTo:el});
});
</script>
</head>
<body>
<input type="text"/>
</body>
</html>
The whole example is missing all things not relevant to explainig the point, so it's not functional. Addapt as needed and add some suggar.
As for the styling i was refering before, you will have to give elements a position and style, as 1) position relative to input position is irrelevant on parent window and 2) parent doesn't need to have jqueryui stylesheets loaded, although you can load them dinamically from inside the iframe with a similar technique.
IMPORTANT:
This will only work if both, parent and child are in the same domain [see: SOP]
UPDATE
After finishing doing this same thing, i came up with this solution for styling and position:
var files=[ // UI styles to be loaded on top frame
"css/ui-lightness/jquery-ui-1.10.3.custom.css",
"css/ui-lightness/custom.css"
]
// Create link tag and append to top frame head
for (var a in files) {
var style=$("<link/>", {
rel: "stylesheet",
type: "text/css",
href: files[a]
});
$(top.document).find('head').append(style);
}
// As it turns out i had many iframes, so this will get the right one
var parentIframe=$(el).find('iframe').filter(function(){
return window.frameElement==this
});
$('input').each(function(){ // Cicle inputs to use with ui autocomplete
// set position to left + input offset 2 is a fix for borders on input
var pos= "left+"+($(this).offset().left+2)+
// and to top + input position + height to have it on the bottom
" top+"+($(this).offset().top+$(this).outerHeight()+1);
// Autocomplete
$(this).autocomplete({
appendTo:top.document.body, // put it on top window's body
position:{
at: pos, // at calculated position
of:parentIframe // from parent iframe
}
})
});
Once again, there may be voids, so fill up with relevant code at will
I'm using the jquery datatables plugin and added some custom jquery-ui buttons to the table footer.
To use the datatables plugin with jquery-ui theming the "bJQueryUI" option has to be turned on.
So far no problem, but now I added the jquery-ui themeroller to my page.
When I change the theme, all the jquery-ui components change their style accordingly, just like the datatable, except for the buttons within the datatable.
I found out that it actually is a css-priority issue: the new styles applied by the themeroller got lower priority than the original styles, so these buttons never change their look.
As the jquery-ui components and the datatables plugin both are quite popular I thought I would find someone with similar problems, but had no luck so far..
That's how the initialization of the datatable and the creation of the custom buttons are done:
<table id="DataTable">
// ...
</table>
<script type="text/javascript">
$(function ()
{
var oDataTable = $('#DataTable').dataTable({
"aaData": result.aaData,
"bPaginate": false,
"bJQueryUI": true,
"bInfo": true,
"sDom": '<"fg-toolbar ui-toolbar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix"lfr>t<"fg-toolbar ui-toolbar ui-widget-header ui-corner-bl ui-corner-br ui-helper-clearfix"ipT<"toolbar">>',
"oTableTools":
{
"sRowSelect": "single"
}
});
// add buttons
$("div.toolbar").html('<button id="AddButton">New element</button>');
$("#AddButton").button().click(function () { /* ... */ });
// add more buttons...
}
</script>
Here's a screenshot of the actual html structure and applied css-styles:
http://i.stack.imgur.com/vbAuy.jpg
Any hint is greatly appreciated.
I found the solution myself:
If I add the "ui-widget-content" CSS-class to the toolbar-container div, the styles get applied correctly.
To remove the styles which that class applies (border and background), I added a more specific CSS style to remove these:
div.toolbar
{
float: right;
border: 0;
background: 0;
}
It's important here to use "div.toolbar" not ".toolbar", otherwise the ui-widget-content styles get applied.
Now the toolbar container doesnt get unwanted styles applied and the buttons inside correctly get the selected theme.
Maybe that's helpful for someone using the themeroller with custom jquery-ui buttons in datatables.
IF you want the theme to control the style of the button, then comment out the CSS that is overriding the theme roller style.
If they are themed buttons, then you will have to remove your CSS to allow the theme to take affect. Themes are made to be easily over-writable so you can add customization, only it sounds like you no longer want the customization.
Not sure if you had this problem but there are two separate css classes with datatables. Which one to use depends on if you have bJQueryUI:true or bJQueryUI:false