I have created a tabbox using the following code (with a screenshot attached).
How do I set the size of the tab to be larger so there is padding around the label?
<tabbox>
<tabs>
<tab label="A LABEL"></tab>
</tabs>
<tabpanels>
<button>
</tabpanels>
</tabbox>
http://img38.imageshack.us/img38/2484/tabbox.png http://img38.imageshack.us/img38/2484/tabbox.png
I have tried the following CSS:
tab, tabs, tabbox {
height: 2em;
line-height: 20px;
padding: 10px;
margin: 10px;
}
However nothing changes, I've tried to also replace the label attribute with a child label element and a child description element, however that proves futile also.
Suggestions?
edit for searching: Unable to change styles for XUL elements in firefox on Mac OS X
It is an OSX thing, which you can override with something like this :
<tabbox>
<tabs>
<tab style="-moz-appearance: none;">
<label value="test1" style="font-size: 20px; padding: 5px;"/>
</tab>
</tabs>
<tabpanels>
<button/>
</tabpanels>
</tabbox>
Now you can pretty much customize it to anything you like.
Here is a screenshot of something I did with tabs :
alt text http://img299.imageshack.us/img299/8103/selection001.png
Related
I have 3 buttons
<Button row="0" col="0" text="1" class="nums" style="height: 100;"/>
<Button row="0" col="1" text="2" class="nums"/>
<Button row="0" col="2" text="3" class="nums"/>
I can only get the height to change if I use inline style as button 1, button 2 and 3 rely on the app.css file and ignores the height although the other styles are applied.
.nums{
android-elevation: 4;
background-color: lightseagreen;
border-color: darkolivegreen;
border-radius: 10;
border-width: 5;
color: whitesmoke;
font-size: 24;
font-weight: bold;
height: 100;
width: 100;
}
Your height and width might get overridden by a higher specificity. Inline code basically overrides everything that is not !important, due to the increased specificity.
Also classes with the same specificity will get overridden when declared again after the first declaration. For example another class named .nums which gets processed after your code might interfer.
Simply appending your styles after the framework CSS or loading your custom CSS file after the framework CSS should do the trick.
Firstly, do not sentence case your element definitions: i.e: <button> not <Button>.
Your problem is easily solved:
<button row="0" col="0" text="1" class="nums" style="height: 100px;"/> <-- note the px added.
I'm trying to define a group of buttons that are on top of each other with a black border and in order to have no overlapping borders I want to do something like this:
.myCustomButton {
border: 1.5px solid black;
}
.myCustomButton:not(:last-child) {
border-bottom: none;
}
I've tried a few variations of that and had no success. I assume (after some playing around with it) this is because the elements aren't a "group", so there is no actual last child.
I have tried using the "Field Group Ids" but that didn't change much. Also tried giving the "items" its own class and use :last-child on that but that also didn't work.
<VBox xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" width="auto" direction="Column" id="vbox0_copy2">
<items class="a">
<Button xmlns="sap.m" text="1" id="flight1" press="onShowFlightDetails" class="myCustomButton" type="Transparent" fieldGroupIds="flightsbuttons"/>
<Button xmlns="sap.m" text="2" id="flight2" press="onShowFlightDetails" class="myCustomButton" type="Transparent" fieldGroupIds="flightsbuttons"/>
<Button xmlns="sap.m" text="3" id="flight3" press="onShowFlightDetails" class="myCustomButton" type="Transparent" fieldGroupIds="flightsbuttons"/>
</items>
</VBox>
To my understanding, using standard HTML and css where I define the buttons in the HTML file itself should work it out but as far as I know this is how you are supposed to do it:
<script>
sap.ui.getCore().attachInit(function() {
new sap.m.Shell({
app: new sap.ui.core.ComponentContainer({
height : "100%",
name : "ExampleScreen2"
})
}).placeAt("content");
});
</script>
So, generally speaking, am I wrong to use only one '.placeAt("content")' or am I missing another way to use :last-child correctly?
What happens is that sapui5 add a 'div' layer for each child of a VBox.
that means the generated html will look like
<div> <-- VBox
<div> <-- item 1 container
<button />
</div>
<div> <-- item 2 container
<button />
</div>
...
</div>
thus your selector cannot target a class set on the item itself (because as you said, they are not sibling in the html tree)
to achieve your goal, set a class on the VBox, like 'myCustomButtonContainer' and then set your css as
.myCustomButtonContainer > .sapMFlexItem {
border: 1.5px solid black;
}
.myCustomButtonContainer > .sapMFlexItem:not(:last-child) {
border-bottom: none;
}
I am working through Meteor React tutorial. In the code below when I change <h1> tag to h2/h3/h4 the checkbox becomes unclickable (however <b> works) in all browsers (chrome, ff, ie). Is this an issue with React or Meteor or mine?
...
return (
<div className="container">
<header>
<h1>Sample List</h1> //changing to h2/h3/h4 makes checkbox unclickable
<label className="hide-completed">
<input
type="checkbox"
readOnly
checked={this.state.hideCompleted}
onClick={this.toggleHideCompleted.bind(this)}
/>
Hide Completed Tasks
</label>
<form>...</form>
</header>
...
For me, it was solved by inserting a "br" between h1 and label.
<input
type="checkbox"
readOnly
checked={this.state.hideCompleted}
onClick={this.toggleHideCompleted.bind(this)}
/>
Hide Completed Tasks
</label>
<br /> <!-- this one here-->
<form>...</form>
To find the answer I used the devTools in Chrome. Make a right click on the checkbox and choose "Inspect element". You'll most likely see that you selected the from below.
By inserting a "br" you avoid this problem, but it isn't the ideal solution I think.
Maybe you need to update your styles/CSS to reflect the new tag being used:
h2 /* from h1 to h2, for example */ {
font-size: 1.5em;
margin: 0;
margin-bottom: 10px;
display: inline-block;
margin-right: 1em;
}
I built a List of CustomListItems in a XML View:
<!-- List with CustomListItem (seperate Icon for event) -->
<List class="cTL" id="test-list2" type="Active" headerText="CustomListItems with Icon Control" items="{path : '/products'}">
<CustomListItem title="boom" counter="3" class="cTL-item" tabindex="1">
<content>
<core:Icon tabindex="2" decorative="false"
color="{
path: 'price',
formatter:'.setPrioColor'
}"
src="sap-icon://add"></core:Icon>
<layout:VerticalLayout class="cTL-text">
<layout:content>
<Label color="#333333" class="cTL-text-title" text="Orange"></Label>
<Text maxLines="1" wrapping="true" class="cTL-text-desc" text="Spain this is a long long long text lalalala onetwothree einzweidreivier Spain this is a long long long text lalalala onetwothree einzweidreivier"></Text>
</layout:content>
</layout:VerticalLayout>
</content>
</CustomListItem>
</List>
and I added some custom css, so that it looks just like a StandardListItem:
.cTL .cTL-item.sapMLIB {
padding: 0 1rem 0 1rem;
}
.cTL .sapUiIcon {
font-size: 1.375rem;
vertical-align: 80%;
}
.cTL .cTL-text {
margin: 1rem 0.5rem 0.5rem 1rem;
}
.cTL .cTL-text .cTL-text-title.sapMLabel {
font-size: 1rem;
color: #333333;
}
.cTL .cTL-text-desc {
color: #666666;
}
So it works fine if the browser window is fullscreen, BUT: On the Screenshot you can see the List with StandardlistItems above and the CustomListItems below. .. They are not responsive! Which Layout element would you recommend to get it behave like the Standardlistitem (shorten the Text and responsive alignment)?
I would wrap the content in a HBox, and both the icon and the additional layout (which I prefer to be a VBox instead of a VerticalLayout) in their own, centered VBox:
(removed all properties except for the important ones):
<List>
<CustomListItem>
<content>
<HBox justifyContent="Start" fitContainer="true">
<VBox justifyContent="Center">
<core:Icon />
</VBox>
<VBox justifyContent="Center">
<Label />
<Text />
</VBox>
</HBox>
</content>
</CustomListItem>
</List>
In our team, we replace the VBox and HBox with sap.ui.layout.Grid control. This will allow your layout to be responsive and work in IE9.
https://sapui5.hana.ondemand.com/sdk/explored.html#/sample/sap.ui.layout.sample.GridInfo/preview
I'm trying to add a scrollbar to a firefox extension so that it displays when the window is too small.
I'm having issues with having the scrollbar span the entire range from top to bottom of the sidebar and only having it displayed when the window is too small.
One extension that has the functionality I would like is the sage extension, however searching through the CSS and XUL, I'm unable to figure out how it works.
XUL File
<vbox flex="1" id="main" align="center" pack="end" maxwidth="300">
<spacer height="10"/>
<image id="logo" maxwidth="300"/>
<spacer height="20"/>
<vbox id="button" flex="1">
<button id="a-button" label=""/>
<spacer height="20"/>
<listbox id="listbox1" width="300" maxwidth="300" rows="6">
<listhead id="list-header">
<listheader label=""/>
</listhead>
</listbox>
<spacer height="20"/>
</vbox>
<tabbox id="details-box" maxwidth="300">
<tabs id="tabs">
<tab id=a"-label" label="" style="text-align: center;"/>
</tabs>
<tabpanels>
<vbox>
<button id="another-button" label="" />
</vbox>
</tabpanels>
</tabbox>
<spacer height="20"/>
<vbox maxwidth="300">
<description id="message" style="display: none;">
<!-- updated with ajax -->
<html:h1 id="header"/>
<html:p id="body"/>
</description>
</vbox>
<spacer flex="10"/>
</vbox>
<spacer flex="10"/>
</page>
Relevant CSS
/* Main */
{
padding: 0;
margin: 0;
}
#sidebar {
background-color: #fff;
font: 10pt "arial", "sans-serif";
line-height: 11pt;
}
vbox#main {
padding-left: 20px;
padding-right: 20px;
/* min-height: 600px; */
min-width: 330px;
overflow-x: hidden;
overflow-y: auto;
}
How it currently looks
Example Screenshot http://img203.imageshack.us/img203/7209/screenshot20100805at201.png
Desired effect in Sage Extension
Sage Relevant Screenshots http://img193.imageshack.us/img193/9206/sageexample.png
The problem is that vbox#main was not the only child node of . I also had a panel in there which would popup based on some action.
By moving the panel inside of vbox#main, vbox#main would span the entire space of the sidebar.