so in my render function, I have
render() {
<div>
<form id="one">
<TextField id="t1" ... />
<Button id="b1" />
</form>
<div id="empty"><div/>
<form id="two">
<TextField id="t2" ... />
<TextField id="t3" ... />
<Button id="b2" />
</form>
</div>
}
and i'm trying to center everything horizontally. the 'empty' div in between the forms are to create space between the forms.
How can I do this?
Thanks !
Try Grid system from react bootstrap, With help of Row and Col you will have better control over displaying your controls horizontally and vertically. This is the link for more info. https://react-bootstrap.netlify.com/layout/grid/#grid
Related
I want to set the position of the dropdown element such that when I click on that it should remain in the same position and it should not move. As of now when I am clicking on the dropdown icon it is moving down. How can I fix this? I want that icon to stick to the input element and should not move up or down on clicking the icon.
Here's the code :
<Grid item md={6} lg={6} xs={12}>
<div className="milestone-due-date">
DUE DATE
</div>
<label>
<DatePicker
dateFormat="MM/dd/yyyy"
margin="normal"
selected={due_date}
placeholderText="Due Date"
onChange={date=>this.handleChangeDate(date,'due_date')}
maxDate={new Date()}
className={`milestone-input-due-date`}
/>
<img src={DROP_D} alt="drop down" style={{cursor:'pointer'}} className='dropdown-milestone'/>
</label>
{due_date_error && (
<div className="input-error-style">{due_date_error}</div>
)}
</Grid>
<div className="milestone-due-date">
DUE DATE
<label>
<DatePicker
dateFormat="MM/dd/yyyy"
margin="normal"
selected={due_date}
placeholderText="Due Date"
onChange={date=>this.handleChangeDate(date,'due_date')}
maxDate={new Date()}
className={`milestone-input-due-date`}
/>
<img src={DROP_D} alt="drop down" style={{cursor:'pointer'}} className='dropdown-milestone'/>
</label>
</div>
{due_date_error && (
<div className="input-error-style">{due_date_error}</div>
)}
css
.milestone-due-date {position:relative;}label{position: absolute;bottom: -10px;left: 0px;}
I have a layout like this. What I want is to let the image box next to the Render 3D button move below the button:
My Code is here
<div id="modeling">
<div className="container">
<div className="row">
<div className="col-xs-12 col-md-8">
<div className="modeling-text">
<h2>3D MODELING</h2>
<h3>Upload a 2D image to get a 3D model</h3>
<input className="btn btn-secondary" id="fileInput" name="file" type="file" onChange={fileChangedHandler} />
<button className="btn btn-primary" style={{float:"left", marginLeft: "10px"}} ng-click="showConfirm() "
ng-if="fileName.length > 0" id="renderButton">
Render 3D Model
</button>
<img src={file} alt={""} width="300" height="300" text-align="left" />
</div>
</div>
</div>
</div>
</div>
Can someone help me to move this? Thanks a lot
just display it as block
<img src={file} alt={""} width="300" height="300" text-align="left" style={{display:'block'}} />
The code inside the signing container something look like this
the label is not moving or getting hide after start typing in the text field
<div className="container">
<form className="while" onSubmit={this.onSubmit}>
<h5 className="grey-text text-darken-3"> Sign In</h5>
<div className="input-field">
<label htmlFor="email">Email</label>
<input type="email" id="email" onChange={this.onChange} />
</div>
<div className="input-field">
<label htmlFor="password">Password</label>
<input type="password" id="password" onChange={this.onChange} />
</div>
<div className="input-field">
<button className="btn pink lighten-1 z-depth-0">Login</button>
</div>
</form>
</div>
Try adding class="active" to the label. it works for me!
Make sure the label comes AFTER the input, as per the documentation.
https://materializecss.com/text-inputs.html
just add this hook in your project!
useEffect(() => {
window.M.updateTextFields()
},[])
it is activate the text fields every time when
component first loading
you can add active className on label
but this
Using Quasar Framework 0.15, I don't see any effect on using Flex related classes. A simple component:
<template>
<q-page class="flex">
<div class="row">
<div class="col-sm-6 justify-center">
<q-btn-group>
<q-btn label="1" />
<q-btn label="2" />
<q-btn label="3" />
</q-btn-group>
</div>
</div>
</q-page>
</template>
When I inspect the components, the div with class 'row', for example', don't has the full width as expected, no either any other Flex related classes like 'justify-start' or 'col-sm-6' seems to work.
My btn-group in this case is showing in top-left corner of the screen, as if no css was been aplied to it ('justify-center' should center it)
I'm running on web/material theme in a fresh install.
you can use simple q-page without any class it will take full width. you can also use the fixed center class for centering content.
<template>
<q-page>
<div class="row">
<div class="col-sm-6 fixed-center">
<q-btn-group>
<q-btn label="1" />
<q-btn label="2" />
<q-btn label="3" />
</q-btn-group>
</div>
</div>
</q-page>
</template>
I want to keep both the text input and the button input sticking together in following code. Right now, when the window gets maximized, there is space between the two controls, how to avoid this?
#{
ViewBag.Title = "Chat";
}
<h2>Chat</h2>
<div class="container">
<div class="input-group">
<input type="text" name="message" id="message" class="form-control" />
<span class="input-group-btn">
<button type="submit" name="sendmessage" id="sendmessage" class="btn btn-default">Send</button>
</span>
</div>
<input type="hidden" id="displayname" />
<ul id="discussion"></ul>
</div>
#section scripts {
<!--Script references. -->
...
ok, i am a newbie when it comes to "modern UI techniques" and now i feel a little shame because i figured out that adding:
input[id=message] {
max-width: 100%;
}
in site.css solved the problem! :-)