The size Quasar Button component can be adjusted and from docs it seems the icon in a button should change size accordingly. See this picture for example from the docs:
When I try the icon stays same size (button changes). My code:
<q-btn
v-if="$route.name === 'resetpassword'"
class="absolute-top-right"
flat
round
wait-for-ripple
dense
size="15px"
color="primary"
icon="mdi-window-close"
#click.native="goToSignIn"
/>
What's wrong?
1. The Problem
I ran into the same problem today. But if you change the button size to an extreme number (e.g. 200px), you'll see that the icon DID change size with the button.
The problem is that the default padding area between the icon and the button is too big, which makes the icon look small comparing to the button itself.
2. The Solution
Here's how I solve it using Deep Selectors. You make a custom button component around your button code. Then give it following style:
<style scoped>
.q-btn>>>.q-icon {
font-size: 40px;
}
</style>
And also give the size attribute in your template the same size, so size="40px". Then all aspects of the button have same size.
When using Vue with 3rd party UI Frameworks/Components, Deep Selector makes it really easy to make quick changes to component styles. And the changes can also be scoped (only change style locally) if you put the scoped keyword.
A good solution is to use q-icon inside q-btn for changing the size of the icon.
<q-btn size="xs" color="primary" dense>
<q-icon name="add" size="15px"></q-icon>
</q-btn>
I used Quasar v2.0.4. With Quasar v2.0.4, you can change the icon(or button) size with size attribute.
For example:
<q-btn size="xl" icon="close" />
<q-btn size="100px" icon="close" />
But if you use size attribute with fab or fab-mini attribute , size attribute doesn't work, then, only fab or fab-mini attribute works instead of size attribute.
For example:
<q-btn size="xl" fab icon="close" />
<q-btn size="100px" fab-mini icon="close" />
Related
I create a dashboard with reactJs and react bootstrap. Due to the different size of the card on my dashboard, it's resulting the gap on my dashboard. This is the screenshot :
I want to fill the gap on my dashboard. According to the bootstrap flex documentation, I used d-flex align-items-stretch to fill the gap. Like this :
<Row>
<Col lg="6" md="6" sm="12" className="d-flex align-items-stretch"> //I placed it on Col
<FrequentUsers />
</Col>
<Col lg="6" md="6" sm="12" className="d-flex align-items-stretch">
//Other content
</Col>
</Row>
Placing the d-flex align-items-stretch on the <Col> tag is the
only way that I found worked in my case. If I place it in <Row> tag
or in <div> tag as a container outside it, it didn't work.
The result is the y-axis stretched well as I expected, but the x-axis suddenly shrink :
So I manage my grid layout to make it wider. The grid layout is still working but it didn't affecting the card, it is only affecting the gap like there is a invisible container in it. So I'm assuming that the grid system at this point is "broken"
I'm guessing that this is because the d-flex. But as I read the documentation, it should've instead make the content fully extended to the side. Please check it on the documentation here
Based on #ChewySalmon's comment. I try to adjusting flex-basis on my card. The reason I do it directly on my card is because as I provided in a code sample in my question above, I stretched my item on a <Col> tag, which is stretch the conten vertically (as my screenshoot shown above). So I need to do it on my card (also because this is the only way that worked in my case), so it stretched horizontally. And it work perfectly. Here is the implementation code :
<Card style={{flexBasis: "100em"}}>
//my content
<Card>
I use 100em because it's the only way besides 100px that worked for me. I hard coded it like that because the value is the same in all card, which is 100em. But I recommend you using props in JSX attribute. Hope that help you who have a same problem with me in the future. Thanks to #ChewySalmon.
I use ant design in react project.
This is tabs from offsite
When I click on tab content the frame appears around the content
How can I remove this border?
Thank you!
Remove outline styles
outline: none;
Usage sample:
<Tabs defaultActiveKey="1" onChange={callback}>
<TabPane tab="Tab 1" key="1" style={{outline: 'none'}}>
...
Im new to react (and react bootstrap) frontend and im a bit stuck. Is there a way to use a dropdown like this and have the 2 date inputs next to eachother (horizontally) instead of vertically? Orcan i only achieve that by using accordion? It needs to look like a dropdown before you click it.
This is how it looks now. And as you see it isnt quite fancy.
My current code:
return (
<Dropdown>
<Dropdown.Toggle variant="light" style={ buttonStyle } id="dropdown-basic" className="uniform-select" >
{headerTitle}
</Dropdown.Toggle>
<Dropdown.Menu>
<Form.Control
type="date"
name="startTime"
id="startDateId"
onChange={ handleStartDate }
/>
<Form.Control
type="date"
name="enddate"
id="endDateiD"
onChange={ handleEndDate }
/>
</Dropdown.Menu>
</Dropdown>
)
Help would be appreciated!
Well, im quite new too but you can probably change the flexbox properties, from a column to a row, if you havent tried it. just inspect the DOM element, and create a new css style with the classname and experiment with the flex directions, cause as far as i know most of react bootstrap components use flex anyways
I am using this component https://element.eleme.io/#/en-US/component/popover
Issue related to triggering element (it is used to calculate where is popover located)
For the triggering element, you can write it in two different ways: use the slot="reference" named slot, or use the v-popover directive and set it to Popover's ref.
Everything ok with default examples. But I am using transparent wrapper for el-popover component like so.
<script id="my-popover" type="x-template">
<el-popover
ref="mypopover"
transition="el-zoom-in-top"
v-bind="$attrs"
v-on="$listeners"
>
<!-- Pass on all named slots -->
<slot
v-for="slot in Object.keys($slots)"
:slot="slot"
:name="slot"
/>
<span> My popover </span>
</el-popover>
</script>
It works ok with slot="reference" named slot.
<my-popover
placement="bottom"
title="Title"
width="200"
trigger="manual"
v-model="visible"
>
<el-button
slot="reference"
#click="visible = !visible"
>
Click me
</el-button>
</my-popover>
But due to complex layout I need to use v-popover directive. Got no luck with wrapped component.
<my-popover
ref="popover"
placement="right"
title="Title2"
width="200"
trigger="manual"
v-model="visible2"
>
</my-popover>
<el-button
v-popover:popover
#click="visible2 = !visible2"
>
Click me too
</el-button>
So I need somehow to pass in v-popover reference to ref="mypopover" from wrapped component. I.e. pass ref to child directly in template.
I've tried v-popover:popover.$refs.mypopover but that doesn't work.
Related codepen https://codepen.io/anon/pen/rgRNZr
Click on button Click me too should show popup connected to that button.
The problem is that the ref you want is the one that is on the el-popover but you are using the ref that is set on the my-popover component instead of the one you want.
This is kind of a wierd thing since that component wants a ref but it will be annoying to get one from the component inside your component.
I would put the button and popup with a slot in the same component.
I want to put the toggle element on the other side, but the problem is that listItem according to the Material-ui documentation doesn't support a leftToggle option (the attribute leftToggle doesn't exist). Is there any way to do this?
I want to do put the toggler and secondary text on the same line. Also, is there a solution that doesn't involve ListItem?
<ListItem primaryText={theEEState ? "Allow": "Disallow"}
secondaryText="Allow / Disallow"
rightToggle={
<Toggle
onToggle={onToggleStateMethod}
toggled={theEEState}
/>
}
/>
Use the Toggle component. The documentation contains an example of a left hand side switch.
http://www.material-ui.com/#/components/toggle
<Toggle
label="Label on the right"
labelPosition="right"
style={styles.toggle}
/>