I've used time-picker from PrimeNG, I need the time only on left and the time to be displayed on the right side of text. I'm unable to add css and change its view can any one please look into this ?
<div class="ui-g-12 ui-md-4">
<h3>Select a Time</h3>
<p-calendar [(ngModel)]="date8" [timeOnly]="true" class="timer"></p-calendar>
</div>
Try this snippet.
.custom-time-picker .ui-inputtext {
width: 80px;
}
.custom-time-picker .ui-datepicker {
top: 0;
left: 80px;
}
Don't forget to set ViewEncapsulation.None in the container component.
Related
I am runnning across an issue in which I am not sure how to solve.
I have a grid system doing the following, BUT I will do a standard "div" solution. But here is my dilemna.
I have a "LogoComponent" That displays my companies logo on the left, and a partner's logo on the right.
I have two headers that display in two different conditions.
Centered Display (just the logos)
Left Aligned Display (left aligned logos, with other content on the right)
Caveats: the "partner logo" needs to confine within the div/space as sometimes the svg's are large, so I "can" offer a height, but not a width.
The image shows the two views. The "LogoComponent" I am having an issue as I was using a flexbox, but not sure that is gonna work since why I try to make it "left" as a component, it moves off the container div. Any ideas how to solve this?
I can solve it, but I feel it will be too generalized, as I'm looking to make this "LogoComponent" be wide enough for the logos, and then appropriately resize if the partner logo is there or not.
As said in the comment, you can center LogoComponent using margin: 0 auto; when it's the :only-child.
If it's not the only child, using margin-right: auto; will push all other content to the right as we are in a flex container.
.parent {
display: flex;
}
.LogoComponent {
margin-right: auto;
}
.LogoComponent:only-child {
margin: 0 auto;
}
/* for styling only */
.LogoComponent {
width: 50px;
height: 50px;
background-color: lightblue;
}
/* for styling only */
.OtherContent {
min-width: 200px;
background-color: lightgreen;
}
<div class="parent">
<div class="LogoComponent"></div>
</div>
<hr>
<div class="parent">
<div class="LogoComponent"></div>
<div class="OtherContent"></div>
</div>
Good day!
I am working on a project in React where I have several images that look almost the same, but differ in some way. Here are the four images
What I want to do is to have a slider that changes the image on slide. So the image essentially gets replaced with the next one "in place" - if that makes sense. Thus, it's not a carousel, because the image is not moving, it's being replaced by another image. Here is a mock-up of what I want to do
The images are maps with locations that change each year. So I want the user to see how the locations change without the image moving.
I hope this makes sense. Are there any libraries or principles I should look at?
Thanks!
You question is very vague. There are many ways to achieve what you want. From the tag you used i assume that you are using React? I've created a basic example on what it could look like.
One way is to position the images on top of each other and toggle the visibility/opacity, like so:
class App extends React.Component {
state = {
imageIndex: 0,
}
setIndex = (e) => {
this.setState({imageIndex: parseInt(e.target.value)});
}
render() {
const {imageIndex} = this.state;
return (
<div>
<div className="image-wrapper">
<img style={{opacity: imageIndex === 0 ? 1 : 0}} src="https://via.placeholder.com/150/ff0"/>
<img style={{opacity: imageIndex === 1 ? 1 : 0}} src="https://via.placeholder.com/150/f00"/>
<img style={{opacity: imageIndex === 2 ? 1 : 0}} src="https://via.placeholder.com/150/f0f"/>
<img style={{opacity: imageIndex === 3 ? 1 : 0}} src="https://via.placeholder.com/150/0f0"/>
</div>
<input
type="range"
value={imageIndex}
min="0"
max="3"
onChange={this.setIndex}
/>
</div>
);
}
};
ReactDOM.render(<App/>, document.body);
img {
position: absolute;
width: 100%;
height: 100%;
transition: opacity .3s;
}
.image-wrapper {
width: 150px;
height: 150px;
position: relative;
}
input[type="range"] {
width: 150px;
}
html,
body {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
Another way would be to render the image that is currently shown to the user, which can make animation handling a bit iffy, as unmounting needs to be delayed (in that case you should take a look at a React Animation Framework, e.g. React Transition Group) The image should be positioned with css in a way that it does not move.
I hope you can salvage something from this answer.
How to smoothly transition from text to svg in react.
As soon as I click on next button shown in pic as ">" ,the text changes to svg.But there is some sort of jumping due to change in overall height.
How can I smoothly transition between two.
Note: Unfortunately, I can't share the code as this is not a personal
project.
You can set the height of the containing element to the heighest element. Therefore you need to place them in a row with a negative margin-right so that they overlay each other. Only the element that you make visible will be shown when you hide the other elements with visibility: hidden;
Here is an example:
var elements = document.querySelectorAll('.block__element');
document.querySelector('button').addEventListener('click', () => {
elements.forEach(element => {
if(element.classList.contains('block__element--visible')) {
element.classList.remove('block__element--visible');
} else {
element.classList.add('block__element--visible');
}
})
});
.block {
background: #aaa;
display: flex;
}
.block__element {
width: 100%;
margin-right: -100%;
visibility: hidden;
opacity: 0;
transition: visibility 1s, opacity 1s;
}
.block__element--visible {
visibility: visible;
opacity: 1;
}
<div class="block">
<div class="block__element block__element--visible">
<div style="background: #f00">Content 1</div>
</div>
<div class="block__element">
<div style="height: 200px; background: #0f0">Longer content 2</div>
</div>
</div>
<button>Toggle between elements</button>
I'm trying to implement or add multiple class in out container when I click a button. But it seems that the styling is not being applied. Below are my code
Layout.module.css
.Content {
padding-left: 240px;
min-height: calc(100vh);
top: 0;
display: block;
position: relative;
padding-top: 80px;
background: #eee;
padding-bottom: 60px;
transition: padding-left 0.2s linear;
}
.Content.collapse {
padding-left: 100px;
display: block;
transition: padding-left 0.2s linear ;
}
Now I added the collapse class in my nav component like so
const layout = (props) => (
<Aux>
<Sidebar collapse={props.collapse} />
<div className={`${classes.Content} ${props.collapse ? 'collapse' : ''}`}>
<TopNavigation toggle={props.toggle}/>
{props.children}
<Footer />
</div>
</Aux>
);
So basically I'm just checking the props if it's collapse or not. If it is then I'll add a text collapse in the class.
Now when I click on a button it sets the state.collapse = true/false. It was able to do it's job. Now it seems that it's not reading my css style. Below is the generated class in my DOM
Notice the class .Content styling was detected. But as you can see here
Layout_Content__2WLOk collapse the div container has a class of collapse. So I was thinking it should read the .Content.collapse selector. Am I missing something here?
When using CSS modules, it creates a unique classname for each class for each instance of the component.
So you need to use the imported classes to have access to the generated classnames, just like you do for the .Content
So
<div className={`${classes.Content} ${props.collapse ? classes.collapse : ''}`}>
You are using a string not the generated hash
this part will not work
${props.collapse ? 'collapse' : ''}
Quick fix
Try not chaining it.
.collapse {
padding-left: 100px;
display: block;
transition: padding-left 0.2s linear ;
}
and add
classes.collapse instead of collapse
${props.collapse ? classes.collapse : ''}
In React you need to use the keyword 'className' instead of 'class'
https://reactjs.org/docs/dom-elements.html#classname
Also if you want to use CSS Modules you need to import your Layout.module.css file like this
import styles from './Layout.module.css';
And you can add CSS selector like this
<div className={styles.Content}></div>
you can study this here https://www.w3schools.com/react/react_css.asp
I've been struggling for hours now trying to align an icon and text inside a button to the left. Currently the button is stretched and looks like this:
I want the chevron arrow and text to be left aligned inside the button. How to achieve this? (I'm using microsofts ui-fabric, don't think the css here interfere, i don't get any text aligning even if i remove them or change DefaultButton to a regular Button)
Render method:
public render(): JSX.Element {
const { isCollapsed } = this.state;
const { buttonText, collapsibleSectionText } = this.props;
return (
<div>
<DefaultButton
onClick={this._toggleCollapse} className="CollapsibleSection"
>
{isCollapsed ? <i className="ms-Icon ms-Icon--ChevronUp" aria-hidden="true" /> : <i className="ms-Icon ms-Icon--ChevronDown " aria-hidden="true" />}
<p>{buttonText}</p>
</DefaultButton>
{isCollapsed && collapsibleSectionText}
</div>
);
}
css:
.CollapsibleSection {
margin-top: 2%;
width: 100%;
}
DefaultButton component has property text-align: center;. You can check in their official docs. What I suggest you should do is try text-align: left; If that does not override fabric's css rule, then try to see if your rule is applied, since maybe fabric's rule have greater specificity then your css rule. If this does not work, then you need to override fabric's display property and say the following:
.CollapsibleSection {
margin-top: 2%;
width: 100%;
display: flex; //overriding fabric's display inline-block;
justify-content: flex-start:
}
Hi I just had to add text-align: left to make it work
.CollapsibleSection {
margin-top: 2%;
text-align: left;
width: 100%;
}
Quick answer:
justify-content: flex-start
If you'd like to learn more about it you can play this wonderful game which will give you a good knowledge about flexbox and positioning within it.
https://flexboxfroggy.com/