I am using this code with react-bootstrap and css:
<div className="justify-content-center d-flex">
<Form>
<Form.Group className="mb-3">
<Form.Control
className="width-400"
placeholder="E-mail"
onChange={this.emailHandler}
/>
{this.state.emailInvalid ? (
<span className="text-danger">
Por favor digite um e-mail válido
</span>
) : null}
</Form.Group>
<div>
{this.state.spinner ? (
<Spinner animation="border" variant="success" />
) : (
<Button
className="mb-3 width-400"
onClick={this.sendRecoveryEmail}
variant="success"
>
Recuperar
</Button>
)}
</div>
</Form>
</div>
CSS:
.width-400 {
width: 400px;
}
So I have an variable(spinner) that is a boolean, when is false a button renders and when the button is pressed the spinner is redered.
When the button is on, the form-control use the right width size and renders with 400px.
But when the spinner is on the form-control get the bootstrap default and resizes to 100%.
I can click on the checkbox and unselect and the right width size works fine, or I can use !important in the css, but I know that this is not a good anwser.
So what am I missing here?
Related
i have CSS issue, i'm looking for some help please :)
so here my page :
There is notification icon at left bottom of the page, some time it can be disabled, so the icon and switch button can disapear. If that disapear, my "Langage" dropdown is moving to left like this :
My problem is i don't know in CSS how to say if "Langage" Dropdown is the first element of my line, then do something (like adding padding for example).
There is a way in CSS to do this ?
I tried something like this :
&:first-child {
margin-left: ${spacings.medium_2};
}
but not working :/
My code (react code):
{projectNotification
&& (
<UserFormLine id="notifications_switch" xs={6}>
<Icon>notifications</Icon>
<SwitchNotifications
id="notification"
checked={user.notify}
onChange={() => handleChangeUserAttribute('notify', !user.notify)}
/>
</UserFormLine>
)
}
<ProjectFormLine id="languageId_formLine" xs={6}>
<DropDown
id="languageId"
source={appLocalesData}
label={formatMessage({ ...messages.user.language })}
value={user.language}
onChange={(value) => handleChangeUserAttribute('language', value)}
/>
</ProjectFormLine>
first-child should be working fine, if you'd like to have some more control on the specificity of the rule, you could try using another attribute to make sure that the style applies to an element that matches that attribute.
In this example, the rule will apply to an element that is the first child of the container, but also has a name attribute with a testinput1 value.
.container {
margin-bottom: 10px;
}
.container input[name="testinput1"]:first-child {
border: 1px solid red;
}
<div class="container">
Container 1
<input class="input" name="testinput1" />
<input class="input" name="testinput2" />
</div>
<div class="container">
Container 2
<input class="input" name="testinput2" />
<input class="input" name="testinput1" />
</div>
<div class="container">
Container 3
<input class="input" name="testinput1" />
<input class="input" name="testinput2" />
</div>
However, looking at your scenario, maybe you want to look into CSS Grid to build your layout, you could set it up so there's always an "empty" column where the notification control should be, so it keeps the other element aligned.
Or use the visibility: hidden property on the notification control as suggested in the comments as well.
I have the following layout:
<article class='pb5 bg-near-white'>
<header class='tc ph4-ns pt4 pt5-ns'>
<h1 class='tc blue'>Let's get started posting your question</h1>
</header>
<div class=''>
<div class='pa4 bg-white measure db center f5 f4-ns lh-copy'>
<form class='center mt3 mb4 justify-around'>
<fieldset class='ba b--transparent'>
<div class='mt4'>
<label class='db mb2 b'>Title</label>
<input
class='noresize ph3 pv3 input-reset ba b--black-10 w-100'
placeholder='title'
onChange={handleTitleChange}
></input>
</div>
<div class='mv4'>
<label class='db mb2 b'>Content</label>
<textarea
class='noresize ph3 pv3 input-reset ba b--black-10 w-100'
placeholder='Content Here!'
cols='50'
rows='5'
onChange={handleBodyChange}
></textarea>
</div>
<a
class='tc f6 fw6 b link dim br2 ph3 pv3 mb2 dib white bg-blue w-100'
onClick={handlePostQuestion}
>
Submit
</a>
</fieldset>
</form>
</div>
</div>
</article>
which uses tachyons inline css in order to create a basic form layout. However, I end up with the following ui:
The padding seems not to be applying to the title input field, but it does apply to the textarea field. When I change the input tag to a textarea tag, the padding applies but the problem is this seems to be a temporary fix. Am I doing something wrong?
On the input element, adding the class border-box or setting type="text" will make it behave as you expect.
Reason being, Tachyons does not give all input elements "border-box" box sizing; explained in more detail in the docs. Also visible in the source code.
I have a react-bootstrap component and the loading animation will not play.
Also, the button wont center. I can use margin-left: 30px; to move it closer to the center but I dont want that as a solution because on bigger screens it goes off center. For the positioning, I am using an imported CSS file.
import Spinner from 'react-bootstrap/Spinner';
import { ButtonToolbar } from "react-bootstrap";
import Button from 'react-bootstrap/Button'
class Button extends React.Component{
......rest of react component........
return(
<div>
<ButtonToolbar >
<Button variant="primary">
<Spinner
as="span"
animation="border"
size="sm"
role="status"
aria-hidden="true"
/>
Loading
</Button>
</ButtonToolbar>
</div>
Does anyone know what I am doing wrong or what I am not doing at all? Thank you for your time.
You can center align your bootstrap button by modifying its container, here the <ButtonToolbar>
Like so:
<ButtonToolbar className="text-center d-block">
<Button variant="primary">
<Spinner
as="span"
animation="border"
size="sm"
role="status"
aria-hidden="true"
/>
Loading
</Button>
</ButtonToolbar>
For the spinner, do you have any React Error?
I have created a form that adds input dynamically with an add and remove button. I would place them on the right
I can't click on remove button exept the lastet one
HTML file:
<mat-step [stepControl]="secondFormGroup">
<form [formGroup]="secondFormGroup">
<ng-template matStepLabel>Constituez votre équipe</ng-template>
<div formArrayName="pers" *ngFor="let control of secondFormGroup.controls.pers.controls; let i= index">
<mat-form-field>
<input matInput placeholder="Nom collaborateur #{{i+1}}" [formControl]="control.controls.name" required>
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Poste" [formControl]="control.controls.poste" required>
</mat-form-field>
<button *ngIf="secondFormGroup.controls.pers.controls.length > 1" (click)="deleteItem()" mat-mini-fab color="warn" class="rightButton"><mat-icon >remove</mat-icon>
</button>
</div>
<div>{{secondFormGroup.value | json}}</div>
<button (click)="addItem()" mat-mini-fab color="primary" class="rightButton"><mat-icon >add</mat-icon>
</button>
</form>
</mat-step>
CSS file :
.rightButton {
position: relative;
float: right;
}
When I disable rightButton class on the remove button , I could click on all of the buttons without a problem but they are not right positioned as I want.
Try this
.rightButton {
position: relative;
z-index: 99;
float: right;
}
This will make the button to be on top of all the HTML elements on the form. The z-index property only works on positioned elements (absolute, relative, fixed, and sticky)
For me z-index didnt work.
There was something in front of that button that is not visible. Making the button as a separate row helped.
In Bootstrap 4 this is how I made it a separate row:
<div class="row block-section">
<a data-placement="top" class="btn btn-sm btn-danger"
href="#" onclick="deleteClicked('video1');return false;">Delete </a>
</div>
Then it started working on mobile device even with
float: right
I have a problem with the automatic layout of jquery mobile:
i have a form with fieldsets:
<div data-role="collapsible" data-collapsed="false" data-theme="a">
<h3>Test</h3>
<div data-role="fieldcontain">
<label for="TextInput"> Textinput </label>
<input type="text" name="TextInput" id="TextInput">
</div>
<div data-role="fieldcontain">
<label for="ButtonInput"> Button </label>
<a href="javascript:alert('works')" data-icon="arrow-r" data-role="button" data-iconpos="right">
<label id="ButtonInput" name="ButtonInput"> Testvalue </label>
</a>
</div>
</div>
On Displays with a lower resolution everything work fine. The labels are shown in the first row, the inputs are shown in the second row:
Textinput
[Inputbox]
Button
[Button]
On Displays with a higher resolution, the input field and the label are shown in 1 row
Textinput [InputBox]
but the Button is still shown in 2 Rows:
Button
[Button]
Anyone knows the problem?
This is not an error, jQM was build to act like that.
If you want to fix it just use this simple css:
#TextInput {
width: 100% !important;
}
working example: http://jsfiddle.net/Gajotres/xrVU2/