I have an item that looks like this:
items: [{
xtype: 'box',
html: '<img src="http://chart.apis.google.com/chart?mychart" alt="" style="text-align:center" />',
name: 'first',
id: 'first',
align:'center',
style:
{
float:'left',
padding: '0px 0px 10px 0px',
},
width:'100%'
}]
I am trying to get it aligned center, I have tried putting in a custom style (underneath padding:) but it says unrecognized character in "text-align". I've also tried putting align:'center' which isn't doing anything at all, but its not causing any errors.
Last thing I did (getting desperate) I added in an inline-style for text align but the box that its inside needs the style not the actual html.
I've tried looking through the documentation and couldn't find text-align under the style doc.
Thanks!
Using text-align without quoting it isn't valid syntax for an object literal. c.f. "JSON syntax for property names".
style: {
...
text-align: 'center'
...
}
... should instead be ...
style: {
...
"text-align": 'center'
...
}
It also sounds like you're likely to have more luck with vertical-align or line-height than text-align.
text-align only works on child elements, you have a couple of choices here:
Use the deprecated html properties valign="middle" and align="center", which work on the current element.
Put a div around the img and then put style="text-align:center", just remember that text-align only works on inline elements. (img is inline).
You can write a css class in Main.scss file ,declare all the aligning properties in that and apply class in your component where you're using it in js file,using
cls:"align-Items",
in scss file
.align-Items{
vertical-align: top;
}
Related
I'm using JSS(Javascript Style Sheets) in my React project. I was trying to select first-child or last-child, so I tried the following
carousel: {
"& img:first-child": {
padding: "0 5px"
}
},
However, it doesn't work. In Chrome Developer tool, it correctly shows right CSS codes, however for some reaons, it selects every img tags, not just first-child. How can I select only first element in JSS?
JSS is just a compiler, once it produced valid CSS and you verified its correctness, you have to search somewhere else for a mistake. Your selector looks OK to me.
However if you just care about the first child inside a container not the type of child then you can just use
carousel: {
"& > :first-child": {
padding: "0 5px"
}
},
Generally all the child inside of a container belongs to the same type, so type of child doesn't matter everytime.
I have a datatable with primefaces:
<p:dataTable var="wapsoplandtl" id="wapsoplandtlList" widgetVar="wapsoplandtlList" value="#{exportController.wapsoplandtls}"
paginator="true" rows="50" scrollable="true" scrollWidth="2500px;" styleClass="borderless"
paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {CurrentPageReport}"
currentPageReportTemplate="{startRecord} - {endRecord} of {totalRecords}" paginatorPosition="bottom"
rowsPerPageTemplate="10,25,50" rowKey="#{wapsoplandtl.dtlsys}">
and produce something like this:
As you can see, it has scrollwidth attribute, but the header got scrolled to the far right. I want only scroll the content of datatable, not the header and footer (paging). Can anyone help me?
This can be done by CSS only, forget about the scrollable attribute of the <p:datatable> component, apparently it will always overflow the whole table, and not just the content.
In this case, do the following:
Remove the scrollable and scrollWidth attribute from your <p:datatable> component;
Include another CSS class (any name, but keep this name to be used later, in this case I will use the name 'overflow-content') in the styleClass attribute from <p:datatable>;
Include the following CSS rule in your page:
-
.overflow-content .ui-datatable-tablewrapper table {
overflow: auto;
width: 2500px;
}
The result will be something like this:
For this you need to first add the option scrollX: true and should add css to table width:100% inline.
$('#example').dataTable( {
"scrollX": true
} );
and you are done.
what i'm trying to do is a panel inside a panel without padding.
when i write in the developer-mode
.sapUiPanelCont
{
padding. 0px !important;
}
my panel has no padding anymore. that's exactly what i need.
how to override this class with an own name? so others panel got the normal sapUiPanelCont and when i add this class to my control, everything is working like charms.
i've added my styleClass like shown below:
control.addStyleClass("exampleClass");
Your CSS selector has to be more specific than the default .sapUiPanelCont one.
The most specific selector 'wins'.
So you could try to use the selector .sapUiPanelCont.exampleClass and omit the !important flag:
.sapUiPanelCont.exampleClass
{
padding: 0px;
}
You can add the style to a new .css file and reference it in your component metadata/descriptor. See Table 4 of documentation.
...
"sap.ui5": {
"resources":{ //relative urls inside component
"css": [{
"uri": "myStyles.css"
}]
},
...
With that the myStyles.css will be added to the html document once as soon as your component is loaded.
Alternatively, if you are using XMLViews, you can inline the styles into the view:
<mvc:View controllerName="whatever" xmlns="sap.ui.commons" xmlns:mvc="sap.ui.core.mvc"
xmlns:html="http://www.w3.org/1999/xhtml">
<html:style>
.sapUiPanelCont.exampleClass
{
padding: 0px;
}
</html:style>
<Panel class="exampleClass" text="Outer Panel">
<Panel text="Inner Panel">
</Panel>
</Panel>
</mvc:View>
I have a set of div whose visibility is set to either hidden or visible. Based on this css visibility property i need to add the css property on those div, like
<div class="div-class" style="color:#ff0000; margin: 0px 10px; visibility:hidden;">
[Block of Code]
</div>
Now i need to define the following in style.css file.
.div-class:visible {top:10px;left:50px;}
.div-class:hidden {top:0px;left:0px;}
Is this possible???
yes with css attributre selectors you can do it
try the below css:
.div-class[style*="visible"] {
color: green;
}
.div-class[style*="hidden"] {
color: red;
}
What you are trying to do is not "really" possible.
I mean it's ill thought by design in the first place.
Even Vamsikrishna's solution might not work as expected.
If you set the overflow property to hidden via javascript or inline styles, the .div-class[style*="hidden"] rule will apply since the style attribute will contain the hidden string.
Moreover , setting inline styles on html elements is bad practice itself in most cases.
I suggest you try and learn css principles a little more.
I'd do the following:
HTML
<div class="div-class div-hidden">
[Block of Code]
</div>
CSS
.div-class {color:#ff0000; margin: 0px 10px; top:10px;left:50px;}
.div-hidden {visibility:hidden;}
.div-class.div-hidden {top:0px;left:0px;}
Then you can use javascript to toggle the "div-hidden" class.
You can do something using attrchange - a jQuery plugin ,
like this:
Add "attrchange" script into HTML page like
In Javascrip catch event
var email_ver_input = $("input#email_ver_input.verifyInput");
email_ver_input.attrchange({
trackValues: true,
callback: function (event) {
if (email_ver_input.is(":visible")){
$("#inputcode_wrap").show();
}
}
});
If i I remove say
height:200
from my ExtJs panel and add a css class in its place
cls: "someclass"
My height property in my css class is overided because Extjs still puts in a style on the element for e.g. but with minimal value (2-4 px)
<div class="someclass" stlye="height:2px"></div>
Any idea how to stop that?
Thanks
Solution
using
bodyCls: "someclass"
is stronger than
cls: "someclass"
use bodyCls in your panel and set your css to the following:
.x-panel .someclass {
//css stuff in here
}
In Ext 3 you can use autoHeight: true in your config object to prevent Ext JS controlling it. See http://docs.sencha.com/ext-js/3-4/#!/api/Ext.Panel-cfg-autoHeight for the docs.
For Ext 4 there doesn't seem to be an equivalent property, there is a discussion about this on the Ext forum: http://www.sencha.com/forum/showthread.php?133148-autoHeight-feature.
However in this case if you leave the height parameter out and add bodyCls : "someClass" to the config object, you can set the height using a css rule like: .someClass: { height: 200px; }.
Found it on a the Sencha forum
.someclass .x-panel-body {
height:600px;
}
dont ask me why :)