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")));
Related
I want to implement pretty print using jquery and html. if any div with .section class is in bottom of A4 page (my A4 body width is 595px and each page height is 842px) i add margin for push this section in next page. here is my code:
$(".section").each(function () {
//add element offset top to detect element page number
//for example if element top is 1400 then it is in page 2 (842*2 > 1400)
$(this).attr('data-top', $(this).offset().top);
});
$(".section").each(function () {
$elementTop = $(this).data('top');
if (parseInt($elementTop) > ($currentPage * $A4PageHeight)) {
if (!$(this).hasClass('rendered')) {
$(this).css('margin-top', ($elementTop - ($currentPage * $A4PageHeight)) + 'px');
$(this).addClass('rendered');
$(this).addClass('page-'+$currentPage);
}
$currentPage += 1;
}
});
enter image description here
I noticed that in CSS print there is a property called page-break-inside that prevent split element in multiple pages. so i use this and everything just works.
#media print {
.section {
display: block;
page-break-inside: avoid;
}
}
No need to JQuery
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
I'm using 'material-ui' and trying to get a table element to change color when the element has a certain value. Below is the code I tried, if the cell value is "Out of Zone", the background should go red'ish. The table renders fine, but toggling the color change doesn't work, how come (or is my approach all wrong)?
function renderRowColumn(row, column) {
if (row.status == "Out of Zone") {
return (
<TableRowColumn className="ae-zone">
{row[column.name]}
</TableRowColumn>
)
}
return (
<TableRowColumn>
{row[column.name]}
</TableRowColumn>
)
}
In style.css:
.ae-zone {
background-color: '#e57373';
font: "white";
}
Your specificity on the css selector is not high enough. The rendered TD element has an inline style in which the background property is getting inherited which is overriding your class style.
Is there any reason since you already have the logic seperated out you don't just use inline styles for something like this.
<TableRowColumn style={{backgroundColor:'red', color: 'white',}}>{row[column.name]}</TableRowColumn>
This is definitely working well and I tested it.
Your other option would be to add !important to your css.
td.ae-zone {
background-color: '#e57373' !important;
color: "white" !important;
}
I think if I had to chose though I would recommend the first as it is cleaner.
Don't put quotes around color values in css:
.ae-zone {
background-color: #e57373;
color: white;
}
Also, it's color: white, not font: white.
Most of the time the Table takes the default style, so if the styles didn't get applied try appending !important to the style. This worked for me.
.ae-zone {
background-color: '#e57373' !important;
color:red;
}
There is another way to do this :
import { makeStyles } from "#mui/styles";
// Declare this bellow your import
const UseStyles = makeStyles({
root: {
"& .MuiTableBody-root": {
backgroundColor: "#121212",
},
},
});
// Declare this after your declaration page
const classes = UseStyles();
// Now in your Table, use the class :
<Table className={classes.root}>
<TableHead>
{...}
</TableHead>
</Table>
With the inspector you can see each automatic class from Material UI and target them in the makeStyle.
Be carefull to use the same code example :
"& .MuiClassNameYouWantTarget" : {
textAlign: "center",
},
i have a template includes elements like following
<span class="arrow"></span>
style look like this :
.arrow{ width : 12px; }
inside directive
link : function($scope, element, attribute)
{
//get element width
}
in result i see width fn returns 0, why css classes not get applied? i added more elements into template, other elements css classes get not applied as well
Why can't you just use the width():
link: function($scope, element, attribute)
{
console.log( element.width() );
}
In order to create a responsive website with Typo3 and Twitter Bootstrap, I would like to remove the height and width attributs of images
Here's how images are generated in Frontend via content element of type text & image and image
<img src="typo3temp/pics/a625b79f89.jpg" width="300" height="226" alt="blabla" />
I would like to remove the dimension attributes and get this:
<img src="typo3temp/pics/a625b79f89.jpg" alt="blaba" />
Can anyone help me ?
Call an image tag in document.ready function.
$('img').removeAttr('width').removeAttr('height');
FYI: There is no way to remove this with typoscript. The width and height attribute is hardcoded in sysext/cms/tslib/class.tslib_content.php function cImage. (Typo3 4.7)
It's not possible to remove the height or width image attributes with typoscript.
But you could override it with CSS in order to create a responsive website.
img {
height:100% !important;
width:100% !important;
}
Use jquery
set an id to your image object:
<img src="typo3temp/pics/a625b79f89.jpg" width="300" height="226" alt="blabla" id="myimage" />
$('#myimage').removeAttr("height").removeAttr("width");
here is alternative javascript code:
var myImage= document.getElementById("myimage");
myImage.removeAttribute("heigth");
myImage.removeAttribute("width");
This will be possible with TYPO3 6.2 LTS. Checkout http://forge.typo3.org/issues/49723.
To remove the effects of fixed width and/or height attributes without actually removing these attributes you can set them back to "auto" in your CSS definitions:
img {
height: auto !important;
width: auto !important;
}
I suggest to do that only for the img tags where you really need the pictures to be fluid. This could be done by adding an id or class to the img tags or any surrounding tag.
E.g. if your fluid images are located in a wrapper div with class "fluid_pics" you could use:
.fluid_pics img {
height: auto !important;
width: auto !important;
}
Often you will only need to set the height back to auto, as the width is already overwritten to be 100% by your framework (e.g. Twitter Bootstrap).
TypoScript to Remove "width" and "height" attributes from the source code. TYPO3 CMS 6.1+.
tt_content.image.20.stdWrap.parseFunc.nonTypoTagStdWrap.HTMLparser.tags.img.fixAttrib {
width.unset = 1
height.unset = 1
border.unset = 1
}
tt_content.textpic.20.stdWrap.parseFunc.nonTypoTagStdWrap.HTMLparser.tags.img.fixAttrib {
width.unset = 1
height.unset = 1
border.unset = 1
}
lib.parseFunc_RTE.nonTypoTagStdWrap.HTMLparser.tags.img.fixAttrib {
width.unset = 1
height.unset = 1
border.unset = 1
}
tt_news example:
News List
plugin.tt_news.displayList.image.stdWrap.parseFunc.nonTypoTagStdWrap.HTMLparser.tags.img.fixAttrib {
width.unset = 1
height.unset = 1
border.unset = 1
}
If your image has an id or another unique attribute assigned, you can easily do this:
var myImg=document.getElementById('myImage');
myImg && myImg.removeAttribute('height') && myImg.removeAttribute('width');
This is a VERY simple solution with jQuery. i found the answer at wpwizard.net.
Here's the URL:
http://wpwizard.net/jquery/remove-img-height-and-width-with-jquery/
Here's the jQuery:
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function($){
$('img').each(function(){
$(this).removeAttr('width')
$(this).removeAttr('height');
});
});
</script>
For Typo3 6.2 upwards you may set a custom image render layout
(snippet belongs to TS setup):
tt_content.image.20.1 {
layout {
mylayout {
# equals default rendering, except width and height removed
element = <img src="###SRC###" ###PARAMS### ###ALTPARAMS### ###BORDER### ###SELFCLOSINGTAGSLASH###>
}
}
}
Enable the custom layout for css_styled_content (snippet belongs to TS constants):
styles.content.imgtext.layoutKey = mylayout
See https://docs.typo3.org/typo3cms/TyposcriptReference/ContentObjects/Image/Index.html#cobj-image-layoutkey
for details on the IMAGE cObject.
There is a solution for old TYPO3s with TYPOSCRIPT:
stdWrap {
replacement {
10 {
search = /\s+(width|height)="[^"]+"/
useRegExp = 1
replace =
}
}
}
Use this stdWrap-TS where your image is rendered.
it dont work in 6.1 :/
but u can use CSS:
img {
display: block;
max-width: 100%;
height: auto;
}