I have a react component and the columns aren't aligning side to side.
In my return statement I have:
<Row>
<Col md="6">
<CarouselPhotos />
</Col>
<Col>
<Form>
<Form.Group controlId="exampleForm.ControlInput1">
<Form.Label>Email address</Form.Label>
<Form.Control type="email" placeholder="name#example.com" />
</Form.Group>
</Form>
</Col>
</Row>
In the example image. The label email address appears correct next to the CarouselPhotos component but then the input field pushes all the way to the bottom. It should be right below email address. Any idea what I'm doing wrong?
According to the documentation:
When no column widths are specified the Col component will render equal width columns.
This caused me to assume that Col didn't have to be set in the second Col since i thought it be rendered equally. After adding Col width it now works. It displays equally.
<Row>
<Col md="6">
<CarouselPhotos />
</Col>
<Col md="6">
<Form>
<Form.Group controlId="formGroupEmail">
<Form.Label>Email address</Form.Label>
<Form.Control type="email" placeholder="Enter email" />
</Form.Group>
</Form>
</Col>
</Row>
Related
hello i have seen a lot of example to prevent tab refreshing to the initial state,but i have no idea if it is from react bootstrap..can someone tell me how to prevent the tab active even after refreshing for bootstrap
here is the code
<Tab.Container id="left-tabs-example" defaultActiveKey="first">
<Row>
<Col sm={3}>
<Nav variant="pills" className="flex-column">
<Nav.Item>
<Nav.Link eventKey="first">Tab 1</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="second">Tab 2</Nav.Link>
</Nav.Item>
</Nav>
</Col>
<Col sm={9}>
<Tab.Content>
<Tab.Pane eventKey="first">
<Sonnet />
</Tab.Pane>
<Tab.Pane eventKey="second">
<Sonnet />
</Tab.Pane>
</Tab.Content>
</Col>
</Row>
</Tab.Container>
What do you mean by "refreshing"? Rerender or page reload?
If latter you have to persist the value somehow and get it on page load. You can do it with localStorage for example.
https://developer.mozilla.org/de/docs/Web/API/Window/localStorage
Im trynig to create a simple multiselect box but for some reason its not visible properly.
Here is my code:-
HTML
<input type="text" id="addRow" />
<input type="button" id="btn" value="Add" />
<form id="form1">
<div style="padding:20px">
<select id="chkveg" multiple="multiple"></select>
<br />
<br />
</div>
</form>
https://jsfiddle.net/04Lgnkqs/
After creating the select you should call the plugin on your select. something like this
$('#chkveg').multiselect();
Refer here
I have a react component laying out a grid of other components within a tab pane, all from react-bootstrap and contained within a div that has bootstrap's nice centred, padded container going on. Unfortunately the Grid within the Tab seems to think it should extend all the way to the right-hand edge of the screen. How can I make sure it sticks within the parent div's width?
Here's the essence of the code:
render() {
return (
<div class="container">
<Tabs>
<Tab>
<Grid>
<Row>
<Col md={12}>
<Panel>
Hi
</Panel>
</Col>
</Row>
</Grid>
</Tab>
</Tabs>
</div>
);
}
Try to use Grid's fluid prop to turn the Grid from fixed-width layout into a full-width layout.
See: https://react-bootstrap.github.io/components.html#grid : Props
render() {
return (
<div class="container">
<Tabs>
<Tab>
<Grid fluid={true}>
<Row>
<Col md={12}>
<Panel>
Hi
</Panel>
</Col>
</Row>
</Grid>
</Tab>
</Tabs>
</div>
);
}
Radio Button checked item should be true based on entry.isalbum value. Below is my View code..
#foreach(abc.Models.ddt entry in entrydetails)
{
#if(entry.isAlbum=="Album")
{
<input type="radio" id="c" name="isAlbum" checked="checked" value="Album" />
<label style="margin-right:10px" for="c"><span></span>Album</label>
}
<input type="radio" id="c1" name="isAlbum" value="Movies" />
<label style="margin-right:10px" for="c1"><span></span>Movies</label>
<input type="radio" id="c2" name="isAlbum" value="Single" />
<label style="margin-right:10px" for="c2"><span></span>Single</label>
</div>
}
}
foreach loop contain value stroed in database corresponding to Album, Movies or Single.
radio button checked should be true based on entry.isAlbum vale. How can we do this, please help to us? I have three radiobutton mention in above code. Radio Button checked will be true based on entry.Isalbum vale. Please help me
Try this:
<input type="radio" id="c" name="isAlbum" #if(entry.isAlbum=="Album"){<text>checked="checked"</text>} value="Album" />
<input type="radio" id="c1" name="isAlbum" #if(entry.isAlbum=="Movies"){<text>checked="checked"</text>} value="Movies" />
<input type="radio" id="c2" name="isAlbum" #if(entry.isAlbum=="Single"){<text>checked="checked"</text>} value="Single" />
I have some stray text next to radio buttons in a radio button group. I tried to obtain it using xpath and watir, but I had no luck with it. Here's some sample HTML for it
<html>
<head></head>
<body>
<input type="radio" name="options" value="No">No <br />
<input type="radio" name="options" value="Yes">Yes <br />
<input type="radio" name="options" value="Maybe">Maybe <br />
</body>
</html>
I can obtain the selected radio button using xpath by
selectedRadio = browser.radio(:xpath,"//input[#checked and #name='options']")
How can I obtain say Yes, No, Maybe if the corresponding radio buttons are selected? I also tried to obtain it using Watir, but the .text method would not work on the Watir::RadioButton object which would be true since the texts are stray texts.
Thanks in advance.
That HTML given is not well-formed XML, so I think the expression will depend on how Waitr parses the input. If it thinks that the text is a child of the input elements, like this:
<input type="radio" name="options" checked="checked" value="No">No </input><br />
<input type="radio" name="options" value="Yes">Yes </input><br />
<input type="radio" name="options" value="Maybe">Maybe </input><br />
Then use this expression:
//input[#checked and #name='options']/text()
If, on the other hand, it automatically closes the input and treats the text as a sibling, like this:
<input type="radio" name="options" checked="checked" value="No"/>No <br />
<input type="radio" name="options" value="Yes"/>Yes <br />
<input type="radio" name="options" value="Maybe"/>Maybe <br />
Then use the following expression:
//input[#checked and #name='options']/following-sibling::text()[1]
My guess is that this second one is the correct one, since you already said that .text did not work.
Ask the developer to make the page more testable by putting the text associated with the radio button inside a label associated with the button via an ID value
<form>
<input type="radio" name="sex" id="male" />
<label for="male">Male</label>
<br />
<input type="radio" name="sex" id="female" />
<label for="female">Female</label>
</form>
Then you can get the ID for the selected button, and find the associated label text fairly easily.
Seriously, it's a likely a lot easier for them to do that than it is for you to have to deal with sloppy page code. It also offers them a lot more formatting options (via CSS) to have that text inside a label container. Win all around.