How to center SearchBar with one button on header NativeBase - css

Trying to center the searchbar with menu button in right on header using nativebase. Code has been given below:
<Header>
<Body>
<Button style={styles.searchButton} onPress={() => this.onSearchPress()} >
<Text>Search Service</Text>
</Button>
</Body>
<Right>
<Icon name='menu' style={styles.drawerIcon} onPress={()=> navigation.openDrawer()} />
</Right>
</Header>
How to position it center with full width?


<Header>
<Left/>
<Body>
<Button style={styles.searchButton} onPress={() => this.onSearchPress()} >
<Text>Search Service</Text>
</Button>
</Body>
<Right>
<Icon name='menu' style={styles.drawerIcon} onPress={()=> navigation.openDrawer()} />
</Right>
</Header>

Related

How to make react-bootstrap modal stay same size and just scroll instead of expanding?

<Modal size="lg" scrollable show={showInvModal} onHide={handleCloseInvModal}>
<Modal.Header closeButton>
<Modal.Title>Sell your items!</Modal.Title>
</Modal.Header>
<Modal.Body>
<ItemCard
title="The Last Egg of 2012"
price="492"
image="https://rest-bf.blox.land/render/76692407"
/>
<ItemCard
title="The Last Egg of 2012"
price="492"
image="https://rest-bf.blox.land/render/76692407"
/>
</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={handleCloseInvModal}>
Close
</Button>
<Button variant="primary" onClick={handleCloseInvModal}>
Save Changes
</Button>
</Modal.Footer>
</Modal>
I wanna keep it the same as the two items even when it's three, and just make it scrollable instead, does anyone have any idea for how I can do this?

It seems that Modal already has scrollable set for Modal.Body to be scrollable when overflowing.
Perhaps try style Modal.Body with a maxHeight so that it does not grow higher when at this point, instead becomes scrollable.
Example:
<Modal size="lg" scrollable show={showInvModal} onHide={handleCloseInvModal}>
<Modal.Header closeButton>
<Modal.Title>Sell your items!</Modal.Title>
</Modal.Header>
{/* 👇 Add style for a custom max height and adjust value to fit use case */}
<Modal.Body style={{ maxHeight: '650px' }}>
<ItemCard
title="The Last Egg of 2012"
price="492"
image="https://rest-bf.blox.land/render/76692407"
/>
<ItemCard
title="The Last Egg of 2012"
price="492"
image="https://rest-bf.blox.land/render/76692407"
/>
</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={handleCloseInvModal}>
Close
</Button>
<Button variant="primary" onClick={handleCloseInvModal}>
Save Changes
</Button>
</Modal.Footer>
</Modal>

Center component vertically and horizontally in 'Antd' library not working

I have a weird issue where I can't center a Row vertically in my screen.
The Card I have is perfectally centered horizontally but not vertically. How can I do that ?
I used the Row component which has align='middle' to align vertically but it isn't working
Here is my implementation:
<Row align='middle' justify='center'>
<Col span={18}>
<Card>
{/* <img className='login-logo' src={logo} alt='logo' /> */}
<Text size='30px' type='BOLD'>
QIFF DASHBOARD
</Text>
<Form name='login' onFinish={formik.handleSubmit}>
<Form.Item>
<Input
id='email'
name='email'
label='Email'
placeholder='Email'
type='email'
autoComplete='new-email'
onBlur={formik.handleBlur}
onChange={formik.handleChange}
value={formik.values.email}
/>
{formik.errors.email ? <Text>{formik.errors.email}</Text> : null}
</Form.Item>
<Form.Item>
<Input
id='password'
name='password'
placeholder='Password'
type='password'
autoComplete='new-password'
onBlur={formik.handleBlur}
onChange={formik.handleChange}
value={formik.values.password}
/>
{formik.errors.password ? <Text>{formik.errors.password}</Text> : null}
</Form.Item>
<div className='submit-button'>
<Button
htmlType='submit'
onClick={formik.handleSubmit}
style={{ width: '100%', backgroundColor: '#f85940', color: 'white' }}
>
Sign in
</Button>
</div>
</Form>
</Card>
</Col>
</Row>

<Row align='middle' justify='center'></Row>
Presumably, the Row tag does not set the attribute display:flex
So justify='center' is invalid
The following solutions can be used：
1、Child element (Need to be centered vertically)
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
2、 <Row style="display:flex"></Row>

css: How can I set the position of an element?

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;}

VUE - QUASAR - TIPTAP - How to Set CSS Height on Editor's Inner Element

How can I get the inner editor portion (which is highlighted with a thin blue line) to go full height. This is the internal element that gets created by the tiptap editor:
<div contenteditable="true" tabindex="0" class="ProseMirror" spellcheck="false"> Editable content goes here./div>
UPDATE:
I manually added the classes ('col' and 'column') in the rendered output and now it works the way I want it to. Is there a way to do this without having to reach into the class property of the element?
<div contenteditable="true" tabindex="0" class="ProseMirror col column" spellcheck="false"> Content Here </div>
Here is the component code I am using in my quasar example app. I have tried umpteen different variations of classes in the divs around the editor. Nothing I do seems to affect the resulting "contenteditable" div container above.
<template>
<q-page class="column justify-start">
<div class="column col absolute-full bg-secondary">
<div class="col column editor">
<editor-menu-bar :editor="editor" v-slot="{ commands, isActive }">
<div class="menubar">
<button
class="menubar__button"
:class="{ 'is-active': isActive.bold() }"
#click="commands.bold"
>
<icon name="bold" />
</button>
<button
class="menubar__button"
:class="{ 'is-active': isActive.italic() }"
#click="commands.italic"
>
<icon name="italic" />
</button>
<button
class="menubar__button"
:class="{ 'is-active': isActive.strike() }"
#click="commands.strike"
>
<icon name="strike" />
</button>
<button
class="menubar__button"
:class="{ 'is-active': isActive.underline() }"
#click="commands.underline"
>
<icon name="underline" />
</button>
<button
class="menubar__button"
:class="{ 'is-active': isActive.code() }"
#click="commands.code"
>
<icon name="code" />
</button>
<button
class="menubar__button"
:class="{ 'is-active': isActive.paragraph() }"
#click="commands.paragraph"
>
<icon name="paragraph" />
</button>
<button
class="menubar__button"
:class="{ 'is-active': isActive.heading({ level: 1 }) }"
#click="commands.heading({ level: 1 })"
>
H1
</button>
<button
class="menubar__button"
:class="{ 'is-active': isActive.heading({ level: 2 }) }"
#click="commands.heading({ level: 2 })"
>
H2
</button>
<button
class="menubar__button"
:class="{ 'is-active': isActive.heading({ level: 3 }) }"
#click="commands.heading({ level: 3 })"
>
H3
</button>
<button
class="menubar__button"
:class="{ 'is-active': isActive.bullet_list() }"
#click="commands.bullet_list"
>
<icon name="ul" />
</button>
<button
class="menubar__button"
:class="{ 'is-active': isActive.ordered_list() }"
#click="commands.ordered_list"
>
<icon name="ol" />
</button>
<button
class="menubar__button"
:class="{ 'is-active': isActive.blockquote() }"
#click="commands.blockquote"
>
<icon name="quote" />
</button>
<button
class="menubar__button"
:class="{ 'is-active': isActive.code_block() }"
#click="commands.code_block"
>
<icon name="code" />
</button>
<button
class="menubar__button"
#click="commands.horizontal_rule"
>
<icon name="hr" />
</button>
<button
class="menubar__button"
#click="commands.undo"
>
<icon name="undo" />
</button>
<button
class="menubar__button"
#click="commands.redo"
>
<icon name="redo" />
</button>
</div>
</editor-menu-bar>
<editor-content class="col column editor__content" :editor="editor" />
</div>
</div>
</q-page>
</template>
<script>
import Icon from 'components/Icon'
import { Editor, EditorContent, EditorMenuBar } from 'tiptap'
import {
Blockquote,
CodeBlock,
HardBreak,
Heading,
HorizontalRule,
OrderedList,
BulletList,
ListItem,
TodoItem,
TodoList,
Bold,
Code,
Italic,
Link,
Strike,
Underline,
History
} from 'tiptap-extensions'
export default {
components: {
EditorContent,
EditorMenuBar,
Icon
},
data () {
return {
editor: new Editor({
extensions: [
new Blockquote(),
new BulletList(),
new CodeBlock(),
new HardBreak(),
new Heading({ levels: [1, 2, 3] }),
new HorizontalRule(),
new ListItem(),
new OrderedList(),
new TodoItem(),
new TodoList(),
new Link(),
new Bold(),
new Code(),
new Italic(),
new Strike(),
new Underline(),
new History()
],
content: `
<h2>
Hi there,
</h2>
<p>
this is a very <em>basic</em> example of tiptap.
</p>
<pre><code>body { display: none; }</code></pre>
<ul>
<li>
A regular list
</li>
<li>
With regular items
</li>
</ul>
<blockquote>
It's amazing 👏
<br />
– mom
</blockquote>
`
})
}
},
beforeDestroy () {
this.editor.destroy()
}
}
</script>
<style>
</style>
I have been learning about Vue.js & Quasar UI toolset. I want to use the TIPTAP WYSIWYG editor component (available here: https://github.com/scrumpy/tiptap). I am fine with their examples, I can get the component to load and work fine. But for the life of me, I cannot figure out how to get the inner editing part (which gets outlined in blue when you click on it) to go 'Full Height' from the outset.
I have tried everything I can think of and searched and searched for some sort of example. The editor expands (grows) fine when you add content, but for some reason, I can't get it to start at full height-- which I'll note the example doesn't illustrate either.
What am I not doing?

Try writing this on css
/* remove outline */
.ProseMirror:focus {
outline: none;
}
/* set */
.ProseMirror {
min-height: 100px;
max-height: 100px;
overflow: scroll;
}

how to center horizonally everything in forms

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

Resources