This is for a mobile app, running on the iPhone simulator, using SDK v 3.0.2 GA and the Alloy framework.
I have a window that has a tableview with an autocompleting search bar atop that table view. When the autocomplete begins to fire, it displays a tableview with the results below the search box, allowing a user to select from the results.
This all works fine, except that including the TableView on the search view causes the TableView on the original window to disappear.
The code is as follows:
myPlaces.xml
<Alloy>
<Window id="myDrawersWin">
<RightNavButton>
<Button id="showMyDrawers" title="Show Drawers" />
</RightNavButton>
<Require src="findPlace" id="findPlace"/>
<TableView id="placeListTable"/>
</Window>
</Alloy>
findPlace.xml
<Alloy>
<View id="searchContainer">
<TextField id="searchInput" hintText="Find a place..." />
</View>
<TableView id="searchResultsTable"/>
</Alloy>
findPlace.js
$.searchInput.addEventListener("change", function(){
if ($.searchInput.value.length > 2 && $.searchInput.value != "Find a place...") {
// do the search and get a response successfully
_.each(returnedVenues, function(venue){
tblData.push(Alloy.createController("venueSearchListItem", venue).getView());
});
$.searchResultsTable.setData(tblData);
$.searchResultsTable.visible = true;
},
onerror: function(e){
console.log("error");
console.log(e);
}
});
// invoke the HTTP client here
}
else {
$.searchResultsTable.visible = false;
}
});
findPlace.xml
"#searchContainer":{
width: "100%",
height: 50,
backgroundColor: "#B8D0DB",
top: 0
}
"#searchInput":{
width: "80%",
height: 30,
backgroundColor: "#FFFFFF"
}
"#searchResultsTable":{
width: "80%",
visible: false
}
If I take out the TableView in findPlace.xml, the original TableView on the window (placeListTable) shows up fine. If I add it back, it disappears. Also, if I move the TableView inside of <View id="searchContainer"> it will show up (but obviously, doesn't fit, due to the height restriction on searchContainer).
Any ideas? Is this a bug, or am I doing something stupid here?
Thanks for any help.
Justin
Found the solution to this problem, and as I suspected, it was stupidity.
The problem was that I'd set layout:vertical on the window stylesheet, meaning that the second TableView was displaying below the other one. Removing that solved the problem.
Related
I'm trying to throw together a simple phone app mockup using React Native & React Native Elements as a set of UI components. I want to set the styling of various elements to a common theme, so I'm following the example in the documentation: https://reactnativeelements.com/docs/customization#using-themeprovider.
But the trouble with the example there (as it says in the docs), it sets the style of all buttons. What I'd like to do is to set the background colour of only the solid buttons for example, leaving the clear buttons, clear! Can anyone point me in the right direction of how to do this?
Current snippet (trimmed to save space):
const myTheme = {
Button: {
buttonStyle: {
borderRadius: 4,
backgroundColor: '#03E0EE',
},
titleStyle: {
color: '#180D43',
},
},
};
...
<ThemeProvider theme={myTheme}>
<View style={styles.footerContainer}>
<Button title="Primary Button"/>
<Button title="Secondary Button" type="clear" />
</View>
</ThemeProvider>
Create a wrapper component for SolidButton and or ClearButton. Make this wrapper components consuming the myTheme context with style props (e.g. ButtonSolid\ButtonClear). AFAIK there are no selector capabilities like in css.
in React-Admin I want to limit the width of the columns that show edit, show buttons in the datagrid
I know I can use styles to set the width of other cells like TextFields, but cant find a way to do this with buttons
enter image description here
Inside Datagrid you can use the headerClassName cellClassName props to style both the cell in the header row and in body rows as described in the docs under section Datagrid/CSS-Api
<ShowButton
headerClassName={classes.hiddenOnSmallScreens}
cellClassName={classes.hiddenOnSmallScreens}
/>
*EDIT
Obviously this approach doesn't work when using typescript, probably a bug - you can work around it in this way:
const usePostListActionToolbarStyles = makeStyles({
toolbar: {
alignItems: "center",
display: "flex",
marginTop: -1,
marginBottom: -1
}
});
const PostListActionToolbar = ({ children, ...props }) => {
const classes = usePostListActionToolbarStyles();
return (
<div className={classes.toolbar}>
{Children.map(children, (button) => cloneElement(button, props))}
</div>
);
};
and then inside your Datagrid:
<Datagrid>
//...fields
<PostListActionToolbar>
<ShowButton/>
<EditButton/>
</PostListActionToolbar>
</Datagrid>
I have a question about scrollview for appcelerator titanium, I want to scroll labels inside scrollview:
scrollpage.xml
<View id="content" layout="vertical" top="100dp" width="100%">
<ScrollView contentWidth="Ti.UI.SIZE" contentHeight="Ti.UI.SIZE" top="10dp" id="svc" height="48dp" backgroundColor="#ff0000" >
</ScrollView>
</View>
</Window>
scrollpage.js
for ( i = 0; i < 19; i++) {
var scrollLabel = Ti.UI.createLabel({
width : Ti.UI.SIZE,
height : '40dp',
font : { fontSize : 14 },
color:'#000',
text : 'Portfolio'+i,
id:'label_'+i,
});
$.svc.add(scrollLabel);
}
The result
I tried ScrollableView but I want many items showing directly on screen.
My aim is to achieve this :
Please explain what did I do wrong! Thank you!
That's because by default the layout of a ScrollView is composite. So, if you want different layout, add layout="horizontal" on your ScrollableView to place your child element :
<ScrollView contentWidth="Ti.UI.SIZE" contentHeight="Ti.UI.SIZE" top="10dp" id="svc" height="48dp" backgroundColor="#ff0000" layout="horizontal"></ScrollView>
More information here about layout : http://docs.appcelerator.com/platform/latest/#!/guide/Layouts,_Positioning,_and_the_View_Hierarchy-section-29004895_Layouts,Positioning,andtheViewHierarchy-Layoutmodes
How can I apply a dynamic width and height to a react-bootstrap modal window?
I have checked the react-bootstrap docs here but could not figure out how to do that.
Actually the value of width and height props would be dynamic (could be any values) as this will be a reusable component in my app (to be used on many pages) thus can't apply width/height through some CSS class.
'bsSize' property as mentioned in docs also not working, although predefined sizes of xs, md, lg is not what I exactly want, rather I need width and height to be set on modal via props.
Here is my sample JSX code:
var MyWindow = React.createClass({
getInitialState() {
return { show: true };
},
close() {
this.setState({ show: false });
},
open() {
this.setState({ show: true });
},
save() {
},
render: function () {
var Button = ReactBootstrap.Button,
Modal = ReactBootstrap.Modal,
ModalBody = ReactBootstrap.ModalBody,
ModalHeader = ReactBootstrap.ModalHeader,
ModalFooter = ReactBootstrap.ModalFooter,
ModalTitle = ReactBootstrap.ModalTitle;
return (
<Modal show={this.state.show} onHide={this.close}>
<ModalHeader closeButton>
<ModalTitle>My Cool Window</ModalTitle>
</ModalHeader>
<ModalBody>
<h4>Text in a modal</h4>
<p>Duis mollis, est non commodo luctus</p>
</ModalBody>
<ModalFooter>
<Button onClick={this.close}>Cancel</Button>
<Button bsStyle="primary" onClick={this.save}>Save</Button>
</ModalFooter>
</Modal>
);
}
});
React.render(<MyWindow width={700} height={400} />, mountNode);
According to its documentation, you have to customize your own css class to achieve the style you want via modal's prop dialogClassName.
So we might have my.jsx code below:
<Modal dialogClassName="my-modal">
</Modal>
With my.css below:
.my-modal {
width: 90vw /* Occupy the 90% of the screen width */
max-width: 90vw;
}
Then you will have your custmized modal!
.my-modal{
min-width: 50%
}
Works for me!!!
The other mentioned solution only works for setting the width.
For editing the height, you need to add your custom css class to the contentClassName attribute.
For Example:
<Modal contentClassName="modal-height"></Modal>
Css Class:
.modal-height {
height: 70%;
}
For editing the width you need to add your custom css class to the dialogClassName attribute.
For Example:
<Modal dialogClassName="modal-width"></Modal>
Css Class:
.modal-width {
width: 70%;
}
Possible Issues:
Sometimes you will have to use !important to over-ride bootstrap imposed CSS, so experiment with that as well.
Credits: Found the solution here.
Hi guys I have situation, where I am loading table rows dynamically. The code that set table row is like:
var rows = [];
_.each(records, function(rec) {
var row = Alloy.createController('myRow', rec).getView();
rows.push(row);
});
}
$.myaTable.setData(rows);
I have different value in each row. And I want to set row height to fit the texts. I tried to set the row height
"TableViewRow": {
height: Ti.UI.SIZE
}
I also changed the myRow.js like $.myRow.height = Ti.UI.SIZE.
But the problem - it is applying same height of to all rows. I show below in image:
Current Output:
My need is:
EDIT:
myRow.xml:
<TableViewRow id="ideaRow">
<View id="content">
<Label id="myTitle"></Label>
<Label id="myDesc"></Label>
<View id="control">
<View id="Control1" />
<View id="Control2" />
<View id="Control3" />
</View>
</View>
<TableViewRow>
myRow.js:
$. myTitle.text = args.title
$. myDesc.text = args.description
Do you think any solutions exists in Titanium for this. Thanks in advance
I can't reproduce your exact problem with 3.3.0.GA.
On iOS, the tableViewRows automatically fill up the whole screen without any TSS. This is because the Views inside your myRow.xml are set to Ti.UI.FILL by Titanium's default. The solution is to make sure you set height: Ti.UI.SIZE for your tags inside the myRow.xml