A client has asked me to create a search bar like this
I succeeded this far
Word-spacing works fine between the words, "Homepage", "Blog", and "Sample Page". but I don't know how to control the spacing between "Sample Page"?
Html code:
<div class="wp-block-navigation__responsive-container-content" id="modal-1-content">
<input type="search" id="wp-block-search__input-1" class="wp-block-search__input " name="s"
value="Homepage Blog Sample Page" placeholder="" required="">
CSS Code:
.wp-block-search__input {
padding: 8px;
flex-grow: 1;
min-width: 26em;
border: 1px solid #949494;
font-size: inherit;
font-family: inherit;
line-height: inherit;
color: #6fabac;
direction: rtl;
word-spacing: 20px;
}
How to control the space between the text "Sample page"?
You can just add spaces, you don't need to use word spacing for this. The only downside of this is that when sending a post, it would show up as "Homepage( spam)Blog( spam)Sample Page".
.wp-block-search__input {
padding: 8px;
flex-grow: 1;
min-width: 26em;
border: 1px solid #949494;
font-size: inherit;
font-family: inherit;
line-height: inherit;
color: #6fabac;
direction: rtl;
}
<div class="wp-block-navigation__responsive-container-content" id="modal-1-content">
<input type="search" id="wp-block-search__input-1" class="wp-block-search__input " name="s"
value="Homepage Blog Sample Page" placeholder="" required="">
nbsp; would be a more future-proof method of doing this, but you can just substitute it with spaces like the other answers if you really need to.
This is the only way to do it, since "Sample Page" is not a single word, it is multiple, so you cannot trick the browser into thinking that it is.
You can change the size of the word spacing by changing the amount of there is. By the way, if you are wondering, there is the placeholder attribute if that is what you're looking for. It would be better to have this for a search bar.
You can read more about HTML entities, like nbsp; (Non-Breaking Space) here.
I am not sure having the text as values within the input is the best way to achieve what you desire. I would be asking myself why do I need to do it this way?
However to answer your question directly, why not just simply use spaces to add space?
.wp-block-search__input {
padding: 8px;
flex-grow: 1;
min-width: 26em;
border: 1px solid #949494;
font-size: inherit;
font-family: inherit;
line-height: inherit;
color: #6fabac;
direction: rtl;
}
<div class="wp-block-navigation__responsive-container-content" id="modal-1-content">
<input type="search" id="wp-block-search__input-1" class="wp-block-search__input " name="s" value="Homepage Blog Sample Page" placeholder="" required="">
Related
So I'm making a fill in the blank with text in between (See my previous question), now I have a problem where I evenly spaced the text in-between with margin-left and margin-right however if I put let's say 1 instead of 0 it looks like 1 : and with 0 it's normal 0: but since 1 is fewer pixels it doesn't look very good, I could always just leave it like that and hope nobody notices but I'd like to probably make it as clean looking as possible.
See for yourself here
If not here's the code,
.text1 {
display: inline-block;
font-size: 4vmin;
margin-right: -22px;
margin-left: -4px;
user-select: none;
text-align: right;
}
.fill-out {
outline: none;
border: 0;
margin-left: 18px;
display: inline-block;
}
#box1 {
width: 13px;
}
#box2 {
width: 13px;
}
#box3 {
width: 21px;
}
<div>
<input class="fill-out" id="box1" type="text" placeholder="00" maxlength="2" />
<span class="text1">:</span>
<input class="fill-out" id="box2" type="text" placeholder="00" maxlength="2" />
<span class="text1">.</span>
<input class="fill-out" id="box3" type="text" placeholder="000" maxlength="3" />
</div>
```
Type in only 2's then run again and type in 1's
Try using monospaced fonts.
because i don't think you will have the result you want with the default font.
see on wikipedia the difference wiki.
I'm 15 days into learning to code. I did the HTML modules on Freecodecamp, and I've started a mini project on CodePen. I've found I've already forgotten a ton, but I want to crack on with the project as that's what's helping me learn stuff.
My mini-project is a sign up form. Currently only email, but later I want to add first/last name plus other data points. However I want to know how to style the box of the email so it can be a bit bigger, plus I want to be able to make the text next to my checkbox smaller. But I've gotten stuck on both parts. I used a basic template for the form and adjusted it from there, but I'm really stuck on the styling.
My code is below. Am I along the right lines?
HTML
<!--- These are my sign up form elements --->
<div class="myForm"><b>Below is a form</b></div></br>
<label for="email">
<input type="text" placeholder="Enter Email" name="email" required>
</br></br>
</label>
<label>
<button type="submit" class="signupbtn">Sign me up!</button>
</br>
</br>
</label>
<label>
<input type="checkbox"> I agree to the terms and conditions here</input>
</label>
CSS
body {
font-family: Verdana,Arial,sans-serif;
font-size: 18px;
}
p {
font-size: 14px;
}
.myForm{
font-family: Verdana,Arial,sans-serif;
width: 200px;
}
button {
background-color: #4CAF50;
color: white;
border-radius: 10px;
font-size: 16px;
padding: 8px;
}
label[for=email] {
font-size: 20px;
}
body {
font-family: Verdana, Arial, sans-serif;
font-size: 18px;
}
.myForm {
width: 200px;
}
.enter-email {
width: 300px;
/* what ever width you want */
height: 20px;
/* change the height if you want like this */
}
button {
background-color: #4CAF50;
color: white;
border-radius: 10px;
font-size: 16px;
padding: 8px;
}
.terms-conditions {
font-size: 16px;
/* change the size of the font */
}
<!--- These are my sign up form elements --->
<div class="myForm"><b>Below is a form</b></div>
</br>
<label for="email"> Enter E-mail:</label>
<input class="enter-email" type="text" placeholder="Enter Email" name="email" required>
</br>
</br>
<button type="submit" class="signupbtn">Sign me up!</button>
</br>
</br>
<input type="checkbox">
<span class="terms-conditions"> I agree to the terms and conditions
here
</span>
</input>
This will help you. To change the input box for the text use a class on it and change its properties(search for more other than the two I showed) or you could have done input[type=text] to select that text input but classes are better if you have more text inputs and want them styled differently.
As for the changing text of terms and conditons, you could have wrapped it in paragraph tags, heading tags and also as I used span tags. Then again give them a class and change the font-size.
Also as pointed out in the comment you don't need to specify the font-family everytime unless you want a different font applied there. Everything text property applied in body will be given to all the text in the body unless you specify something for that text otherwise.
I have a set of radio buttons, and everything works fine when onclick is used, but when onclick is replaced with onmousedown (or ontouchstart, tested in developer mode), checked+label works fine, but the alert requested in the HTML doesn't. The reason why I want to replace onclick (with ontouchstart) is to improve the performance of a hybrid app in IOS.
Any clue what my problem is... I've managed to get from zero coding to creating a quite complex physics app in 5 months without posting a single question anywhere, and I quite embarrassed by this one!
Here's the HTML:
<div class="switch-field1">
<input type="radio" id="sine1" name="switch_3" onclick = "alert('This works fine')" checked/>
<label for="sine1"> SINE </label><br>
<input type="radio" id="square1" name="switch_3" onmousedown = "alert('If I see this, problem solved')"/>
<label for="square1"> SQUARE </label><br>
<input type="radio" id="triangle1" name="switch_3" onclick = "alert('This works fine')"/>
<label for="triangle1"> TRIANGLE </label>
</div>
Here's the CSS:
.switch-field1 {
font-family: "sans-serif", Tahoma, Verdana, Lucida ;
padding: 0px;
overflow: hidden;}
.switch-title1 {
margin-bottom: 3px;
margin-left: 0px}
.switch-field1 input {
position: absolute !important;
clip: rect(0, 0, 0, 0);
height: 1px;
width: 1px;
border: 0;
overflow: hidden}
.switch-field1 label {
float: left;}
.switch-field1 label {
display: inline-block;
width: 100%;
background-color: #e6ffe6;
color: black;
font-size:11px;
text-align: center;
border: 1px solid rgba(0, 0, 0, 0.2);}
.switch-field1 input:checked + label {
font-weight: bold;
font-size: 12px;
color: white;
background-color: #009900;}
The onmousedown event works, but only on the radio button, not on the label.
You should attach an event listener to the label itself, like:
<label for="square1" onmousedown="alert('If I see this, problem solved')">SQUARE</label>
Update:
The ontouchstart with function call worked for me, but you need to use it on touch capable 'device', I used the chrome device toolbar under dev tools (ctrl+shift+j, mobile icon at top left).
I used this function:
function whichbuttonID(){
// need js to select the option
document.getElementById("squarel").checked = true;
alert('Ok');
}
I have used this in my CSS to create an smaller input field:
.input-xs {
height: 22px;
padding: 2px 5px;
font-size: 12px;
line-height: 1.5; /* If Placeholder of the input is moved up, rem/modify this. */
border-radius: 3px;
}
But of course I need to adjust the input-group-addon as well or it will look like this.
To prevent this and make the input-group-addon smaller, I have added this to my CSS.
.input-group-xs > .form-control,
.input-group-xs > .input-group-addon,
.input-group-xs > .input-group-btn > .btn {
height: 22px;
padding: 2px 5px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px;
}
But it looks like this now.
Any suggestions to get it aligned again?
Complete code
<div class="input-group-xs form-group" id="div_exp_aantal['.$i.']">
<input type="number" min="0" class="form-control input-xs" id="exp_aantal['.$i.']" name="exp_aantal" placeholder="Huidige aantal" value="'.$row_list['aantal_huidig'].'" onkeyup="validate_exp(this, '.$i.')" onmousemove="validate_exp(this, '.$i.')">
<span class="input-group-addon">stuk</span>
</div>
If I were you, I'd add the class name "input-group" before the "input-group-xs" in order to add the base css.
.input-group {
position: relative;
display: table;
border-collapse: separate;
}
So your code should look like this:
<div class="input-group input-group-xs form-group" id="div_exp_aantal['.$i.']">
<input type="number" min="0" class="form-control input-xs" id="exp_aantal['.$i.']" name="exp_aantal" placeholder="Huidige aantal" value="'.$row_list['aantal_huidig'].'" onkeyup="validate_exp(this, '.$i.')" onmousemove="validate_exp(this, '.$i.')">
<span class="input-group-addon">stuk</span>
</div>
I've a Flask based application which has
Class itemform:
item2 = [("a", 'One'), ("b",'Two')]
items3 = SelectField(u'List items', choices=items2)
form similar to above which is rendered
return render_template('item.html', item3=item3)
on views.
item.html jinja2 template has below content
<form action="/items/" method="post" name="items">
{{ form.item3 }}
<input type="submit" name="submit" class="btn" value="done" />
</form>
the dropdown works properly, I can select the items and gather it
back it. The Problem is, the width of dropdown box is too small.
option name ("One") is barely visible and become visible only
when I click the dropdown arrow.
How to change width of it? Thanks for help!
EDIT:
Here's the link http://jsfiddle.net/SvN3F/
You mean height ? I've added height:auto at last line of css, visible on jsFiddle, it's default css who forced select to have height:18px.
input[type="text"], input[type="password"], textarea, select {
border: 1px solid #ccc;
border-radius: 3px;
color: gray;
display: inline-block;
font-size: 13px;
height: 18px;
line-height: 18px;
padding: 4px;
width: 210px;
}