I have been using the timepicker and trying to customize the popup for which I might need to add a class to the popup . I tried using "popupClassName" but i don't see that class name getting added to the popup.
Kindly let me know how can i add a class to the timepicker popup .
It does work as documented. See https://codepen.io/JesperWe/pen/RVOwOV which adds a class and some CSS to give the popup a red shadow.
<TimePicker defaultValue={moment()} popupClassName="foobar"/>
result:
<div class="ant-time-picker-panel foobar ant-time-picker-panel-column-3 ant-time-picker-panel-placement-bottomLeft"
style="left: 24px; top: 63.7778px;">
<div class="ant-time-picker-panel-inner">
<div class="ant-time-picker-panel-input-wrap">
<input class="ant-time-picker-panel-input" value="02:32:41" placeholder="Select time"><a
class="ant-time-picker-panel-clear-btn" role="button" title="clear"></a>
</div>
<div class="ant-time-picker-panel-combobox">
<div class="ant-time-picker-panel-select">
<ul>...</ul>
</div>
<div class="ant-time-picker-panel-select">
<ul>...</ul>
</div>
</div>
</div>
</div>
Related
In my form, I have the following JSX written with React and after I create with the button, the success message will touch the button at the bottom, leaving no space. Is there anyway to add that space between? Thanks again.
<button className="btn btn-primary">Create a hat</button>
</div >
</form >
<div className={successClass} id="success-message">
You have created a new hat!
</div>
I tried googling methods to add properties into the button and message but nothing seems to split them apart.
Try adding padding-top to the success message div.
<button className="btn btn-primary">Create a hat</button>
</div>
</form>
<div className={successClass} id="success-message"
style={{paddingTop :"2rem"}}
>
You have created a new hat!
</div>
`
</form>
<div className={successClass} id="success-message">
The best way to position elements is by use of CSS, avoid things like {' '}
Second, make your page structure clear for example
<div class="form-wrapper" style="padding: 10px; margin-bottom:4px;">
<form>
<!-- put your create button here -->
</form>
</div>
<div class="success-msg-wrapper" style="padding: 10px;">
<!-- put your message div here -->
</div>
Finally, make use of class-based styling instead of inline css for better maintainability of the code.
I am making use of PrimeNG and Angular 8.
The code snippet is as follows -
<div class="p-col-12 p-md-6 p-col-nogutter drag-column">
<div *ngFor="let doc of availableDocs" class="ui-helper-clearfix">
<div class="ui-g-12 ui-md-4" pDraggable="docs" (onDragStart)="dragStart($event, doc)"
(onDragEnd)="dragEnd($event)">
<p-panel [header]="doc.title" [style]="{'text-align':'center'}">
<img src="assets/images/{{doc.extension}}.png">
</p-panel>
</div>
</div>
</div>
If in above code we remove the class ui-helper-clearfix, then the image cannot be dragged.
But in documentation no such requirement is mentioned. Can this be done without ui-helper-clearfix.
Or some other solution as it is not the layout i want.
enter image description here
Here's the application interface and a part of the form is behind the side dashboard of my template
<section class="uRegion #REGION_CSS_CLASSES# clearfix" id="#REGION_STATIC_ID#" #REGION_ATTRIBUTES#>
<div class="uRegionHeading">
<h1>#TITLE#</h1>
<span class="uButtonContainer">
#CLOSE##PREVIOUS##NEXT##DELETE##EDIT##CHANGE##CREATE##CREATE2##EXPAND##COPY##HELP#
</span>
</div>
<div class="uRegionContent clearfix">
width: 1360px;
height: 1002px;
right: 500px;
#BODY#
</div>
</section>
Switch to theme 42. It is possible that you're using a custom theme.
I am using React, Redux and Bootstrap setup. I am building book website that have different tabs in that tabs are items(books) that have the same id through the different tabs. All my data is stored in a store and passed down to panel like so: TabsContainer(here I filter the books and pass down via props)->[All, Favorites, ...]->List of Books (all the same for every one) -> Book (all the same).
It is hard to post all the code and also basic concepts since I don't have idea what could be wrong. I instead post the result.
This is where it is ok. I can also fix the bug by resizing the window, but then it bugges the other 4 tabs.
This is clearly a bug. Bugg happens always when I move aways from inital tab.
What could be wrong? Should I set different keys? But if I understand correctly the react would do necessary rendering.
Update Found the root of the evil is the react Equalizer that I used to match column sizes (bootstrap responsive) so that button row appeared on the bot. I believe that has to do with incompatibility with React. So the problem now is how to put button row on the bottom of the panel.
<div className="col-md-12 col-lg-6">
<div className="panel panel-default no-padding">
<div className="panel-body contentRow" style={book_item.mainContainer}>
<Equalizer>
<div className="col-xs-12 col-sm-6" style={book_item.imageContainer}>
<div>
<FavoriteIcon reading={reading} style={book_item.favorites}
onFavoriteChanged={this.onFavoriteChanged}/>
<Link to={"readings/"+reading.id+"/edit"} params={{id: reading.id}} style={book_item.imageLink}>
<img
src={'http://smartbooky.hopto.org/media/images/books/' + reading.book.id + '.jpg'}
height="210px" style={book_item.bookImage}/>
</Link>
</div>
</div>
<div className="col-xs-12 col-sm-6" style={book_item.textContainer}>
<div className="bookTitle">
<strong>{reading.book.title}</strong><br/>
</div>
<div className="bookSubtitle">
{(() => {
if (reading.book.subtitle)
return (<div><em>{reading.book.subtitle}</em> <br/></div>);
})()}
</div>
<div className="bookAuthors">
<div>{authors ? authors : "Unknown author"}<br/></div>
</div>
<div className="bookDescription hidden-xs" style={book_item.bookDescription}>
{truncatedDescription.replace(/<\/?[^>]+(>|$)/g, "")}
</div>
<div className="bookTags hidden-xs row" style={book_item.bookTags}>
{reading.book.genre ? BookCard.renderTags(reading.book.genre) : void(0)}
</div>
<div className="buttonRow"
style={window.innerHeight > 400 ? book_item.buttonRow : void(0)}>
<div className="col-xs-4">
<Button icon="glyphicon glyphicon-remove" name="Remove" kind="primary"
handleClick={this.onReadingDelete} style={book_item.buttonRemove} />
</div>
<div className="col-xs-4">
<Button icon="glyphicon glyphicon-th-list" name="Shelf" kind="primary"/>
</div>
<div className="col-xs-4">
<Button icon="glyphicon glyphicon-edit" name="Edit" kind="primary"/>
</div>
</div>
</div>
</Equalizer>
</div>
</div>
</div>
Creator of react-equalizer here. It is possibly an issue with the equalization happening before the image is loaded. I just published a new verion that fixes this issue (1.0.5).
Here is a working example with react-bootstrap tabs:
http://jsbin.com/mayanakiqo/edit?js,output
class MyComponent extends React.Component {
render() {
let colStyles = {
float: 'left',
width: '50%',
padding: '10px',
background: '#ddd',
border: '4px solid white',
boxSizing: 'border-box'
}
return (
<div>
<Tabs defaultActiveKey={2}>
<Tab eventKey={1} title="Tab 1">
<Equalizer byRow={false}>
<div style={colStyles}>
<img src="http://placehold.it/200x300" />
</div>
<div style={colStyles}>
Test content
</div>
</Equalizer>
</Tab>
<Tab eventKey={2} title="Tab 2">
<Equalizer byRow={false}>
<div style={colStyles}>
<img src="http://placehold.it/200x300" />
</div>
<div style={colStyles}>
Test content
</div>
</Equalizer>
</Tab>
<Tab eventKey={3} title="Tab 3">
<Equalizer byRow={false}>
<div style={colStyles}>
<img src="http://placehold.it/200x300" />
</div>
<div style={colStyles}>
Test content
</div>
</Equalizer>
</Tab>
</Tabs>
</div>
)
}
}
The other option would be to use flexbox to equalize the heights see https://codepen.io/imohkay/pen/gpard for example however it will depend on what browsers you need to support.
I think before answering this there are some things we need to know:
1. Do these Bootstrap tabs implement some sort of non-React JavaScript in terms of switching between them? I know that Bootstrap not only provides CSS files for installation, but it also can provide some JavaScript too to use some of its components.
2. I am guessing that in the pictures you posted, you are navigating from the Favorites Tab, to the All tab? If so, what SHOULD the All tab show? (It is possible that it is actually rendering the intended elements, and it is just the css that is making it look wrong.)
3. If the top two points are not the source of the problem, then we will need to see some code, at least for the render functions of the components involved, as well as what their states look like.
I'm writing an Ionic framework "sidemenu" type of app (based on the sidemenu demo/starter) that allows the user to choose a theme (basically, the bars and buttons colors).
The problem is when an user clicks a button to change dynamically the theme, it only changes the color of the menu's header and not the color of the views header (stays always in the first color of the array).
Here is a codepen example (just click on the "CHANGE COLOR" button on the side menu):
http://codepen.io/anon/pen/oXqQqm
NOTE: the variable $scope.temabar starts with the "ionic color positive" ($scope.temabar = 'positive';) and is changed when the button "CHANGE COLOR" is clicked.
Can anyone tell me what i'm doing wrong?
Thanks
Well you code pen does not work so I can't tell you what is wrong but if you want to change classes dynamically I would simply use ng-class directive. It is simple, easy, fast, and works. If you are already using ng-class please fix the codepen and I will update my answer :D https://docs.angularjs.org/api/ng/directive/ngClass
and an example:
http://codepen.io/sevilayha/pen/onfrd
HTML:
<div class="container" ng-app="classApp" ng-controller="mainController">
<div class="page-header">
<h1>Dynamic Angular Classes <small>String Syntax</small></h1>
</div>
<div class="row">
<div class="col-xs-6">
<!-- FORM STUFF =========================== -->
<form>
<div class="form-group">
<input type="text" class="form-control" placeholder="Type Your Class" ng-model="superClass">
</div>
</form>
<p>Try:</p>
<ul>
<li>text-danger</li>
<li>text-success</li>
<li>text-danger</li>
<li>bg-primary</li>
<li>bg-info</li>
</ul>
</div>
<div class="col-xs-6">
<!-- NGCLASS EXAMPLE ============================ -->
<div class="jumbotron text-center">
<h2 ng-class="superClass">
Stuff Stuff
</h2>
</div>
</div>
</div>
</div>
CSS:
.bubble {
animation:pulse 1s infinite;
-webkit-animation:pulse 1s infinite;
}
#keyframes pulse {
0% { transform:scale(1); }
25% { transform:scale(2); }
75% { transform:scale(1); }
}
#-webkit-keyframes pulse {
0% { -webkit-transform:scale(1); }
25% { -webkit-transform:scale(2); }
75% { -webkit-transform:scale(1); }
}
JS:
angular.module('classApp', [])
.controller('mainController', function($scope) {
});