I am using Foundation library.
I want to center a div in ReactJS and I am unable to achieve it.
This is a working example in plain vanilla : http://codepen.io/anon/pen/PqdzZR
<div class="vertical grid-block">
<div class="grid-block text-center"><span>Hi there !</span></div>
<div class="grid-block text-center">
<a class="button" href="#">Test Button</a>
</div>
But, this does not work with ReactJS :
var React = require('react');
var Comp = React.createClass({
render: function() {
return (<div className="grid-frame">
<div className="vertical grid-block">
<div className="grid-block text-center"><span>Instructions to login</span></div>
<div className="grid-block text-center">
<a className="button" href="#">Login with Facebook</a>
</div>
</div>
</div>);
}
});
module.exports = Comp;
In the above component, the button has the styling indicating that the Foundation css styling is working.But the div is not centered for some reason.
So, the question is how do I center a div in a ReactJS component using the Foundation library ?
return (<div class="grid-frame">
Should be className?
Check my fiddle: https://jsfiddle.net/reactjs/69z2wepo/
Maybe you forgot to add normalize.css?
var Hello = React.createClass({
render: function() {
return (<div className="grid-frame">
<div className="vertical grid-block">
<div className="grid-block text-center"><span>Instructions to login</span></div>
<div className="grid-block text-center">
<a className="button" href="#">Login with Facebook</a>
</div>
</div>
</div>);
}
});
React.render(<Hello name="World" />, document.getElementById('container'));
Not sure if React is changing the display property for the button?
Display inline-block can be horizontally centered with text align center. Display block works with margin: 0 auto;
Related
Currently, I'm stuck on how to change the Height of child elements to the height of their parent elements. I've read the documentation about the "ref" in react but I don't think it is usable in my senario as I've multiple Divs having two Childs in it. I've done that in jQuery but not in react. Any Suggestions. Here is my code.
class EventDisplay extends React.Component {
constructor() {
super();
}
render() {
return (
<div>
<div className="ecs-event-list row ">
<div className="event1Parent">
<div className="event1Child"> zxcasd </div>
<div className="event1Child">zsxcasd</div>
</div>
<div className="event2Parent">
<div className="event2Child">zxcasd</div>
<div className="event2Child">asxcasd</div>
</div>
<div className="event3Parent">
<div className="event3Child">zxcasd</div>
<div className="event3Child">asxcasd</div>
</div>
</div>
</div>
);
}
}
ReactDOM.render(<EventDisplay />, document.querySelector("#app"))
<div id="app"></div>
I am converting an existing application into ReactJS. I have found something difficult to do well in ReactJS. Below is what I would like to do
render () {
return (<div id="container">
<div className="shared">shared content here</div>
<div className="shared">shared content here</div>
<div className="shared">shared content here</div>
{featureAEnabled ?
(<div className="featureA">featureA enabled content</div>
<div className="featureA">featureA enabled content</div>) :
(<div className="old">featureA disabled content</div>
<div className="old">featureA disabled content</div>)
</div>);
}
The issue is you cannot return multiple elements in React, you must always return a single element.
My current solutions involve
Rewrite all my css to allow for elements to encapsolate any of these feature switches
Do the following:
code:
render() {
return (<div id="container">
<div className="shared">shared content here</div>
<div className="shared">shared content here</div>
<div className="shared">shared content here</div>
{featureAEnabled && <div className="featureA">featureA enabled content</div>}
{featureAEnabled && <div className="featureA">featureA enabled content</div>}
{!featureAEnabled && <div className="old">featureA disabled content</div>}
{!featureAEnabled && <div className="old">featureA disabled content</div>}
</div>);
}
Is there a way to allow for codeblocks that are based on a condition and render multiple elements like in my first code snippet?
Ideally you should try to separate 'featureAEnabled' and 'featureADisabled' elements in separate components and then render them.
Other way of doing that is to have your 'featureAEnabled' and 'featureADisabled' elements in an array and return it. Like below:
render() {
let renderFeatureA = [
<div >featureA enabled content</div>,
<div >featureA enabled content</div>
];
let disableFeatureA = [
<div >featureA disabled content</div>,
<div >featureA disabled content</div>
];
let renderItems = featureAEnabled ? renderFeatureA : disableFeatureA;
return (
<div id="container">
<div >shared content here</div>
<div >shared content here</div>
<div >shared content here</div>
{renderItems}
</div>
)
};
One way to do this is to just toggle a class in your render.
let featureEnabledClasses = 'hidden';
if (myCondition === true) {
featureEnabledClasses = '';
}
Then you can just serve up
<div className={featureEnabledClasses}>featureA enabled content</div>
I saw this document about modals.
But there is no guild-line for waking up a modal from button or anything like bootstrap.
Do you guys know how could I do it?
In Salesforce lightning we don't have any built in function to open/close Modals, This one is working for me.
Component
<div aura:id="exampleModal" class="slds-modal slds-fade-in-open hideDiv" aria-hidden="false" role="dialog">
<div class="slds-modal__container" style="max-width:50rem;">
<div class="slds-modal__header">
<button class="slds-button slds-button--icon-inverse slds-modal__close" onclick="{!c.hideExampleModal}">
<lightning:icon iconName="utility:close" size="medium" variant="bare"/>
<span class="slds-assistive-text">Close</span>
</button>
<h2 class="slds-text-heading--medium">Example Modal</h2>
</div>
<div class="slds-modal__content slds-p-around--medium">
<div class="modalContent">
<p>Content goes here</p>
</div>
</div>
<div class="slds-modal__footer">
<button class="slds-button slds-button--neutral slds-button--brand" onclick="{!c.hideExampleModal}">Close</button>
</div>
</div>
</div>
Controller.js
hideExampleModal : function(component, event, helper) {
helper.hideExampleModal(component);
},
showExampleModal : function(component, event, helper) {
helper.showExampleModal(component);
},
Helper.js
showExampleModal : function(component) {
var modal = component.find("exampleModal");
$A.util.removeClass(modal, 'hideDiv');
},
hideExampleModal : function(component) {
var modal = component.find("exampleModal");
$A.util.addClass(modal, 'hideDiv');
},
In Style
.THIS.hideDiv {
display: none;
}
By default Modal is open. You need to control using aura:if.
I have small HTML block on server which is loaded via Ajax call. It has <Link> tag from react router. I want to render this block so that <Link> tag converts to <a>.
I tried to create a temporary react component and pass the HTML block and render it. But the returned HTML is still has the <Link> tag.
Here is HTML block. <Link> tag is on the fourth line.
<div id="mobile-home-categories">
<div class="row feature-categories">
<div class="col-md-6 col-xm-6 col-sm-6 col-xs-6">
<Link to="/bedroom-furniture.htm" state="{ catId: 3 }">
<img src="{{media url="wysiwyg/furniture.png"}}" alt="furniture" />
FURNITURE</Link>
</div>
<div class="col-md-6 col-xm-6 col-sm-6 col-xs-6">
<a href="decor.htm"><img src="{{media url="wysiwyg/decor.png"}}" alt="decor" />
DECOR</a>
</div>
</div>
</div>
promise.done(function(data){
const content = jQuery("<div/>").html(data.firstElementChild.firstElementChild.textContent).html();
const comp = React.createClass({
render: function() {
return <div>{this.props.content}</div>;
}
});
const renderedComponent = ReactDOM.render(<comp content={content}/>, document.createElement('div'));
});
I need to make following functionality using angularJS without using id for controls
here is HTML code::
<div id="outterSpliter">
<div id="innerSpliter">
<div>
<div class="cont">Pane 1 </div>
</div>
<div>
<div class="cont">Pane 2 </div>
</div>
</div>
<div>
<div class="cont">Pane 3 </div>
</div>
</div>
here is script
$("#outterSpliter").ejSplitter({
height: 250, width: 401,
orientation: ej.Orientation.Vertical,
properties: [{}, { paneSize: 80 }]
});
$("#innerSpliter").ejSplitter();
To render the Splitter in Angular way, use the directive 'ej-splitter'. All JS component properties support one way biding. You need to add the prefix "e-" to the properties. Refer the below code to render the Splitter in Angular way.
<div ng-controller="SplitCtrl">
<div ej-splitter e-height="250" e-width="401" e-orientation="vertical" e-properties="new">
<div ej-splitter e-width="401">
<div>
<div class="cont">Pane 1 </div>
</div>
<div>
<div class="cont">Pane 2 </div>
</div>
</div>
<div>
<div class="cont">Pane 3 </div>
</div>
</div>
</div>
As you can see in the above code snippet, for the 'e-properties', I have specified the value "new". The "e-properties" of splitter receives array of objects as value. So in the Script section I have assigned the values of Splitter pane properties to a scope variable and assigned it as value for e-properties.
Script code
<script>
angular.module('splitApp', ['ejangular']).controller('SplitCtrl', function ($scope) {
$scope.new = [{}, { paneSize: 80 }];
});
</script>
<style type="text/css" class="cssStyles">
.cont {
padding: 10px 0 0 10px;
}
</style>