I am creating a form in Drupal 6 using form API.
I need to put a textfield and a select next to each other. they are for entering something like 'www.domainname.com' . www. is fixed. domainname section is given from user in a textfield and .com section is chosen from select element by user.
So they should be in a line. but as I see I can put these two form elements in a line, they are in their div container.
Would you help me?
Thank you.
Suppose if there are 2 form elements(text-box), you could just add an css style float:left; to the first <div> element . This makes both the text-boxes to appear in the same line.
Drupal Form :
$form['first_name'] = array(
'#type' => 'textfield',
'#default_value' => 'First Name',
'#size' => 18,
'#id' => 'first_name',
'#prefix' => '<div class="samelineDiv">',
'#suffix' => '</div>',
);
Here I have used prefix and suffix form controls
CSS:
.samelineDiv{
float:left;
}
Sample html output :
<div class="textbox">
<div class="samelineDiv">
<div id="first_name-wrapper" class="form-item">
<input type="text" class="form-text" value="First Name" size="14" id="first_name" name="first_name" maxlength="128">
</div>
</div>
</div>
<div class="textbox">
<div id="last_name-wrapper" class="form-item">
<input type="text" class="form-text" value="Last Name" size="14" id="last_name" name="last_name" maxlength="128">
</div>
</div>
Fiddle:
Related
I have an html code with contains
<div class="form-card">
<h2 class="fs-title" test-data="area_1">
About DigCompEdu
</h2>
<p></p>
<label for="academic_teaching" class="question" test-data="question_1">
<b>1- </b>
</label>
<small id="academic_teachingHelp" class="form-text text-muted">
</small>
<div class="form-check question-form-check ">
<div class="row">
<div class="col-1">
<input class="radio" type="radio" value="0" id="3" name="2" test-data="answer_1" />
</div>
</div>
So, I have h1 with testdata name after that i have a form, this form contains question with multin check radio .. i want to access this check , not by just call ([test-data="answer_2"])
because i have another tips and don't want to check them as this one ,
i did smth like this but it's not working :
cy.get('[test-data="area_1"]~[test-data="answer_2"]').check({force: true})
Any one have another idea ?
It might be the ~ between the selectors, I haven't seen that before.
Does it work with a space between instead?
cy.get('[test-data="area_1"] [test-data="answer_2"]').check({force: true})
If the heading is followed by the form like this
<h2 class="fs-title" test-data="area_1">
About DigCompEdu
</h2>
<div class="form-check question-form-check ">
...
then you would query like this
cy.get('[test-data="area_1"]')
.next('.form-check') // next element on page
.find('[test-data="answer_2"]') // this looks inside '.form-check'
.check({force: true})
I'm trying to filter some results I will get from an api using Semantic UI's dropdown search component.
The issue is that I don't know how to get the text I'm typing in the input field
The dropdown search I have:
<div class="ui fluid search selection dropdown" id="user-dropdown">
<input id="user-dropdown-input" name="country" type="hidden">
<i class="dropdown icon"></i>
<div class="default text">Search...</div>
<div class="menu" id="user-dropdown-menu">
<div class="item" data-value="af">
<span class="description">123</span>
<span class="text">User123</span>
</div>
<div class="item" data-value="af">
<span class="description">123</span>
<span class="text">User123</span>
</div>
<div class="item" data-value="af">
<span class="description">123</span>
<span class="text">User123</span>
</div>
</div>
</div>
How dropdown is initialized:
$(document).ready(function () {
$('.ui.dropdown').dropdown({
clearable: true,
fullTextSearch: true
});
});
What I tried:
$('#user-dropdown').on('keyup', function () {
let input = $('#user-dropdown');
console.log('Val: ' + input.dropdown().val());
// also tried: $('#user-dropdown-input').val()
// $('#user-dropdown-input').html()
// $('#user-dropdown-input').text()
});
Basically what I want is if I type "abc" to print the value "abc" into the console, but I don't know how to get that value.
what worked for me was searching the input used for search that looks like:
<input class="search" autocomplete="off" tabindex="0">
and I added a type to this input
document.getElementsByClassName('search').type = 'text';
and then got the value by class on keyup
$('.search').keyup(function() {
console.log($(this).val());
});
I've got some automation that is looking for a HTML data- tag (example: "data-foobar"), and I have a login.js so that:
<div className={styles.whiteBoard}>
<main className={styles.content}>
<div>
<div className={styles.spacer}></div>
<form onSubmit={e => submit(e)}>
<TextField
className={styles.input}
label="Username"
autoFocus
variant="outlined"
margin="normal"
value={username}
onChange={e => setUsername(e.target.value)}
/>
</form>
</div>
</main>
where and how would one place a HTML data- tag in the above code?
You can use the inputProps object of the TextField to set the data attributes.
<TextField inputProps={{'data-foobar': 'foo bar'}}/>
I am using redux-form and setting up a sign-up form. The fields are not like that appear in sandbox preview on their documentation site.
I tried to provide bootstrap classNames form-group, form-control for field and input respectively but it appears to be default action. Just a bar on bottom.
Actually I have a blue background so I need a completely white box so user can see the grey placeholder of an input field.
My renderFields method:
renderFields(){
return _.map(formFields, ({name,type,placeholder}) =>{
return(
<Field
key={name}
type= {type}
name={name}
placeholder={placeholder}
component={SignupField}
/>
);
})
And Field method:
<div className="form-group">
<input type={type} className="form-control" {...input}
placeholder={placeholder}/>
<div className="red-text" style={{marginBottom:"30px"}}>
{touched && error}
</div>
</div>
And form:
<form class="user-forms" onSubmit=
{this.props.handleSubmit(values=>this.submitForm(values))}>
{this.renderFields()}
<button className="btnSubmit btn btn-primary"
type="submit">Create Account
</button>
</form>
I expect a box for each input & not line at bottom.
OK I was using materialize css that caused the interference.
Please find my fiddle here, I'm trying to understand the logic behind the vertical-alignment of the inline-block elements (div.lbl) within div.panel.
<style>
label, .lbl {
width:292px;
display:inline-block;
/* text-align:left; */
}
.val {
display:block;
}
.panel {
border-bottom: 1px dashed red;
}
.lbl {
color: magenta;
}
label {
color:black;
}
</style>
<div class="panel">
<div class="lbl" for="firstname">First name:
<INPUT class="val" type="text" id="firstname" />
</div>
<div class="lbl" for="description">Long field name Long field name Long field name Long field name Long field name Long field name Long field name:
<textarea rows="5" cols="25" class="val" id="description" ></textarea>
</div>
<div class="lbl" for="lastname">Long Last name Long Last name Long Last name
<INPUT class="val" type="text" id="lastname" />
</div>
</div>
<div class="panel">
<div class="lbl" for="firstname1">Long First name Long First :
<INPUT class="val" type="text" id="firstname1" />
</div>
<div class="lbl">First name:
<textarea rows="5" cols="25" class="val" id="description1"></textarea>
</div>
<div class="lbl">Long field name Long field name Long field name Long field name Long field name:
<fieldset class="bank-address">
<label for="address1">Bank Address Line 1</label>
<input type="text" value="" id="address1" name="address1" maxlength="9" />
<label for="address1">Bank Address Line 2</label>
<input type="text" value="" id="address2" name="address2" maxlength="9" />
<label for="address1">Bank Address Line 3</label>
<input type="text" value="" id="address3" name="address3" maxlength="9" />
<label for="address1">Bank Address Line 4</label>
<input type="text" value="" id="address4" name="address4" maxlength="9" />
</fieldset>
</div>
</div>
If you notice, all label texts (in magenta) are vertically aligned bottom and their respective field elements are vertically aligned top such that the bottom of the texts are aligned in same line and the top of the field elements seem to have aligned in the same line. (Click here to see the display of the fiddle page) This is the alignment I'm trying to achieve and works in Firefox, Chrome & Safari. But looks different in all IEs.
In IE, it seems all div.lbl to have vertical-aligned bottom.
Is there a way I can bring the same effect in IE too ?
Thanks.
You can get the effect you want by adding a div element around the input boxes and then setting the elements with class "val" to float:left. Also do the same for the fieldset and give it class "val".
The added div causes the input elements to start on a new line, and the float takes the input element out of the flow, leaving the last line of text in each inline-block box to be used as the baseline for that box.
See http://jsfiddle.net/DaZWW/