I'm trying to make a Headerelement sit next to an Button icon but I cannot make it happen.
Without attempting any Grids listing them like this
<Header as='h4'>Header text</Header>
<Button icon className='transparentButton'>
<Icon name='add'/>
</Button>
makes it look like this - each item on different line:
If I try to make a Grid with one row and two columns there is a massive space between the two and also the header text is wrapped. At least is vertically aligned I guess...
<Grid>
<Grid.Row verticalAlign='middle'>
<Grid.Column>
<Header as='h4'>Header text</Header>
</Grid.Column>
<Grid.Column>
<Button icon className='transparentButton'>
<Icon name='add'/>
</Button>
</Grid.Column>
</Grid.Row>
</Grid>
This looks like that:
I'd really love to hear how suggestions on how to make the two items sit next to each other properly. I want to make it look like this:
Example code https://codesandbox.io/s/semantic-ui-react-example-ttnxc (not sure why the Icon is not rendering there though).
Actually I think that Header Component is displaying as block
Just try to edit it's css and make:
display: inline-block;
and it should render successfully
unfortunately your example code didn't load so i couldn't try this but it should work
Related
I have Card with 2 Card.Sections. I'm trying to align the second one to far right however nothing works for me. I tried:
Setting sections as flex and assigning marginLeft: auto for the second one
Setting Card position: relative, then adding float: right to the second one
I faced the same issue today, here's how I solved it:
<Card horizontal tokens={cardTokens}>
<Card.Section>
<Checkbox
label="todo status"
/>
</Card.Section>
<Card.Item grow={1}>
<span />
</Card.Item>
<Card.Section styles={footerCardSectionStyles}>
<Icon iconName="Delete" />
</Card.Section>
</Card>
As you can see I used
<Card.Item grow={1}>
<span />
</Card.Item>
between the two Card.Sections this is inserting an element with the remaining width thus pushing the second Card.Section to the end.
I'm having a strange problem with Internet Explorer 11. Here I use a button toggle group in vertical direction and if the user clicks one one of the buttons in the group, the height changes a little bit (of the clicked button). The example code is based on this source:
<mat-button-toggle-group name="fontStyle" aria-label="Font Style" vertical>
<mat-button-toggle value="bold">Bold</mat-button-toggle>
<mat-button-toggle value="italic">Italic</mat-button-toggle>
<mat-button-toggle value="underline">Underline</mat-button-toggle>
</mat-button-toggle-group>
One button is rendered as:
<mat-button-toggle tabindex="-1" class="mat-button-toggle mat-button-toggle-appearance-standard mat-button-toggle-checked" id="mat-button-toggle-1" ng-reflect-value="bold" value="bold" _ngcontent-yuh-c0="">
<button name="fontStyle" tabindex="0" class="mat-button-toggle-button" id="mat-button-toggle-1-button" aria-pressed="true" type="button">
<div class="mat-button-toggle-label-content">Bold</div>
</button>
<div class="mat-button-toggle-focus-overlay"/>
<div class="mat-button-toggle-ripple mat-ripple" matRipple="" ng-reflect-disabled="false" ng-reflect-trigger="[object HTMLButtonElement]"/>
</mat-button-toggle>
If I look into the CSS mat-button-toggle-focus-overlay and mat-button-toggle-ripple mat-ripple get a height of 52px instead of 48px. This increases the size of the parent element too.
I can disable the font-family attribute of .mat-button-toggle and on enabling it again the elements get back to their original sizes (48px).
What could be the reason for the change in height of the clicked button and is there anything I could do? This is only happening on IE.
This sounds to me like an issue caused by whitespace between the tags of the clicked button. Try removing all whitespace between tags and see if that removes the extra 4px. If that is the issue you may be able to solve it by using display:block.
Put this into your styles.css:
.mat-button-toggle-button { display: block; }
I am referring to the React Lazy Load Image Component.
I need to tweak the display attribute of the image I am rendering with this library. But can't seem to find any way.
I tried to wrap the component with a div and use style={{display: 'inline'}}, but it didn't work.
<div className="ui image" style={{ display: 'inline' }}>
<LazyLoadImage
src={src}
effect="blur"
/>
</div>
I am using this portion of code inside a <Card/> component. The default css of the library contains display: inline-block which is making my image have an extra border at the bottom. I don't want it.
P.S.
I am using Semantic UI for my entire project. I want to use whatever style Semantic is providing me. That's why I need to teak the display attribute of this library.
I just started using react with bootstrap and implemented a navbar. I can see that bootstrap has many functionalities, however I also see that it is limited in functionality, or, it doesn't give as much 'freedom' in terms of customization. I hope I am wrong but here is my example:
<Grid>
<Row className="text-center">
<h1>Our Products</h1>
</Row>
</Grid>
This code renders the <h1> in the middle of the screen no matter your device size. It works perfectly!
<Navbar>
<Navbar.Brand className="text-center">
<a className='menuItem' href="#home">Sample Text</a>
</Navbar.Brand>
</Navbar>
This is supposed to render a navigation bar with the <Navbar.Brand> in the middle of the screen. The problem is that it has no effect!
I also tried to apply style instead of the className, or even define my own className and work with it in a .css file but it never works. Is this a limitation of React Bootstrap?
I have been able to do something like this to put the text in the middle
<Grid>
<Row className="show-grid">
<Col xs={4} md={5}></Col>
<Col xs={4} md={5}>{this.props.children}</Col>
<Col xs={4} md={5}></Col>
</Row>
</Grid>
I would still like to know how to use the className="text-center" to place the <Navbar.Brand> in the center or, any way to customize it.
I think you can change the default text alignment inside a file named "App.css" that comes with React package
I found out that this problem is pretty common and in most cases has no answer (here, tried every solution offered here but didn't work). I found out that the only way to make it work is to define a custom-className and edit it in CSS. Weird is that it doesn't work with inline styling for me!
The code becomes:
<div>
<Navbar>
<Navbar.Brand className="navbar-brand-custom">
<p>Metanice</p>
</Navbar.Brand>
</Navbar>
</div>
with an external css
.navbar-brand-custom {
width: 100%;
text-align: center;
}
I also found out that it will never work if you don't specify the width
So, I have the IssuesList component, which is the list of issues that I get using ajax and github api, and DevStatus component, which sort of wraps the list up and contains all the logic, triggers state changes by two radiobuttons and so on.
My problem: When I click on one of the radiobuttons, the DevStatus component won't change state if the click was on the text inside the radiobutton. And when I click on the corners of the radiobuttons, the blue areas without text, the state changes perfectly.
Here's the structure of the radiobuttons:
<div className="btn-group" data-toggle="buttons">
<label className="btn btn-primary active"
onClick={this.onChangeRadioButton.bind(this)}
id={this.CLOSED_ISSUE_ID}>
<input type="radio" name="options"
autoComplete="off"
id={this.CLOSED_ISSUE_INPT_ID}
onChange={this.onInputChange.bind(this)} /> Closed Issues
</label>
<label className="btn btn-primary"
onClick={this.onChangeRadioButton.bind(this)}
id={this.OPEN_ISSUE_ID}>
<input type="radio" name="options"
autoComplete="off"
id={this.OPENED_ISSUE_INPT_ID}
onChange={this.onInputChange.bind(this)} /> Open Issues
</label>
</div>
Here's the codepen with the code and here's the full page view so you could better see and understand what I'm talking about.
Please, open the full page view and try to click on parts of the button that contain text and on ones that don't and you'll notice that as long as you click on parts without text - the state changes and if you click on text itself - the state doesn't change at all.
Could you please help me with that problem?
PS: removing onChange from the input element is not the solution.
Update 1
If you go to DevTools and inspect the radiobutton element, you'll see that inside the label tag there're input and weird span elements. The span element is not in the code I wrote, did React automatically add that? For some reason, the onClick event listener is not applied to those input and span elements.
Update 2
I've tried to add click event listener to the radiobutton in the console of dev tools and tried to figure out the target of the clicked element. When I click on the text - it is the span element and when I click on place without text - it is the label element and that's why the click event is not working.
Can my problem be solved using dangerouslySetInnerHTML, so that it won't create the unnecessary span?
Could you tell me please how to solve that?
React is creating a span because your text is not in any div. Also it would create a span if there was any white space (but in your case this is because there is no div around your text).
But the real problem here is the way you check your event. You need to check e.currentTarget instead of e.target
Then no need to use the ugly dangerouslysetinnerhtml!
React appeared to sometimes be adding span tags around text, no matter if there are the free white-spaces or not. The spans didn't allow the onClick event to fire when they were clicked on.
So, to force React not to render the spans, the dangerouslySetInnerHTML may be used:
noSpanRender(text) {
return { __html: `<input type='radio' name='options' autoComplete='off'/>${text}` };
}
render() {
return (
<div className="dev-status-page col-centered">
<div className="graphs">
<h1 className="text-center page-header">
Our Recent Closed and Opened Issues from GitHub
</h1>
</div>
<div className="issues col-centered">
<div className="btn-group" data-toggle="buttons">
<label className="btn btn-primary active"
onClick={this.onChangeRadioButton.bind(this)}
id={this.CLOSED_ISSUE_ID}
dangerouslySetInnerHTML={this.noSpanRender('Closed Issues')} />
<label className="btn btn-primary"
onClick={this.onChangeRadioButton.bind(this)}
id={this.OPEN_ISSUE_ID}
dangerouslySetInnerHTML={this.noSpanRender('Open Issues')} />
</div>
<IssuesList issues={this.state.issues} />
</div>
</div>
)
}
It was vital to avoid those span elements inside the input tag, so using dangerouslySetInnerHTML finally helped.