here is the plunker- http://plnkr.co/edit/nMozzczMrbXJPfcps0A2?p=preview
If you can notice, i have added the below css class to auto lookup feature.
.dropdown-menu {
background-color:white;
overflow:scroll;
height:300px;
}
I donot mention this class in html anywhere. the bootstrap automatically takes this css class and applied it to my dropdown.
I donot want this to happen. how do i assign a new class and have the same properties assigned to the dropdown-menu which pops up at the plunker if we type any alphabet.
You can assign a new CSS class by overriding drop down template:
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap'])
.run(["$templateCache", function($templateCache) {
$templateCache.put("template/typeahead/typeahead-popup.html",
"<ul class=\"dropdown-menu your-custom-class\" ng-show=\"isOpen() && !moveInProgress\" ng-style=\"{top: position().top+'px', left: position().left+'px'}\" style=\"display: block;\" role=\"listbox\" aria-hidden=\"{{!isOpen()}}\">\n" +
" <li ng-repeat=\"match in matches track by $index\" ng-class=\"{active: isActive($index) }\" ng-mouseenter=\"selectActive($index)\" ng-click=\"selectMatch($index)\" role=\"option\" id=\"{{::match.id}}\">\n" +
" <div uib-typeahead-match index=\"$index\" match=\"match\" query=\"query\" template-url=\"templateUrl\"></div>\n" +
" </li>\n" +
"</ul>\n" +
"");
}]);
in this example I added your-custom-class class next to the dropdown-menu class, and added CSS rule - background: red
plunker: http://plnkr.co/edit/iMKsB5TULDYRcyfoYSek?p=preview
Related
We are adding custombuttons to our fullcalendar like below.
Is there a way to change the background and foreground color of the button?
And is there a way to set padding or margins to the custom buttons?
var calendar = new Calendar(calendarEl, {
customButtons: {
myCustomButton: {
text: 'custom!',
click: function() {
alert('clicked the custom button!');
}
}
},
headerToolbar: {
left: 'prev,next today myCustomButton',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
}
});
Yes, you can set any properties you like using CSS.
On inspecting how fullCalendar renders the buttons in HTML, I noticed it gives each one a class according to the property name of the button.
For example, if - per your sample code - you call the button myCustomButton then fullCalendar will give the rendered <button a CSS class called fc-myCustomButton-button. This means you can specify any rules you like for that class, e.g.:
.fc-myCustomButton-button
{
background-color: red !important;
}
(You need the !important so that fullCalendar's other CSS rules don't override it.)
Demo: https://codepen.io/ADyson82/pen/WNJqXLM
I want to apply CSS style in following code but i couldnt find the way. I want to add style to image as width 50px and height 50px
grid.Column(format:(item) =>
{
if (File.Exists(Server.MapPath("~/Content/BrandImages/" + item.BrandImage)))
{
return Html.Raw(string.Format("<text><img src=\"{0}\" alt=\"Image\"/></text>", #Url.Content("~/Content/BrandImages/" + item.BrandImage)));
}
else
{
return Html.Raw(string.Format("<text><img src=\"{0}\" alt=\"Image\"/></text>", Url.Content("~/Content/BrandImages/noimage.jpg")));
}
}
),
You have multiple solutions
1-You can add inline width and height properties to your img element
return Html.Raw(string.Format("<text><img style=\"width:50px; height:50px;\" src=\"{0}\" alt=\"Image\"/></text>", #Url.Content("~/Content/BrandImages/" + item.BrandImage)));
2- In your global stylesheet you can define new style like below
.myImageClass{
width:50;
height:50px;
}
then you can add this class your image elements
return Html.Raw(string.Format("<text><img class=\"myImageClass\" src=\"{0}\" alt=\"Image\"/></text>", Url.Content("~/Content/BrandImages/noimage.jpg")));
http://jsfiddle.net/3ypYW/
<div class="service1"><p>Option 1</p></div>
I have created a simple div with a hover feature that I'd like to convert into a radio button to be part of a form. I am well versed in forms and divs and CSS and JQuery but I have no idea how, if possible, I could tie them all together to create a radio button that would obviously stick green when selected.
Thanks!
try this:
in your css add a class for the checked style, it could be the same as the hover.
.service1:hover, .checked { background:#66ff99; color:#000; }
add a js call to your link and don´t forget the "#" to stay on page:
<a href="#" onclick="check(this)">...
finally define the js function which adds the .checked class to the div:
<script type="text/javascript">
function check(element) {
d = element.firstChild;
d.className = d.className + " checked";
}
</script>
I am binding my currently selected item like this:
The selected item gets visible, but how can I give the unselected items an unselected/default background color? When I set a background color to the template class I do not see anymore the background color set from the selection via mouse click.
Is the problem maybe that I have 2 backgrounds set but none is removed?
<div data-bind="foreach: items">
<div class="cellContainer" >
<div class="template" data-bind="click: $parent.selectItem, css: { selected: isSelected }">
<div data-bind="text: number"></div>
</div>
</div>
</div>
.selected {
background-color: #0094ff;
}
Sounds like a cascade issue. Make sure your ".template" style is defined before your ".selected" style in your css file.
Make sure your selectItem method resets isSelected on all elements before setting it to true on the argument. A naive implementation could be:
var ViewModel = function() {
// Skipped the rest for brevity...
self.selectItem = function(item) {
// Deselect all items first
for (var i = 0; i < self.items().length; i++) {
self.items()[i].isSelected(false);
}
// Select the argument
item.isSelected(true);
};
};
See this jsfiddle for a demo.
However, it is often easier to keep a reference on the parent view model to the currently selected item, and change the css binding to something like:
css: { selected: $parent.TheOneSelectedItem().number() == number() }
See this fiddle for the alternate demo.
Something like this might work.
.template {
background-color: #fff;
}
.template.selected {
background-color: #0094ff;
}
It does not look like a knockout issue.
How to remove sub attribute of style. I want to remove only display:none; attribute of style from below code.
<div class="ui-state-default ui-jqgrid-hdiv" style="width: 1085px; display: none; visibility: visible; ">
The following can remove the display subattribute of element's style attribute in Javascript+jQuery:
$('div.ui-state-default.ui-jqgrid-hdiv').each(function () {
var st = this.getAttribute('style').split(';').map(function (a) {
return a.toLowerCase().indexOf('display')>-1 ? '':a;
}).join(';');
this.setAttribute('style', st);
// alert('TEST: display property == '+ $(this).css('display')
// + ', style attribute == ' + $(this).attr('style'));
});
test
As an alternative to removing it, you can override it in your style sheet with
display: block !important;
If that code is inserted via JS, though, it might be better to remove it from the JS in the first place if you really don't want it there.
Try this:
$('.ui-state-default').css('display', 'block');