In semantic-ui, how can I place the placeholder text (name in below example) in the center of the input box, instead of it being aligned to the left?
<input type="text" placeholder="name" class="?">
Related
I added a ":focus" CSS property to my input elements where it will add a solid border to each text input if it's clicked on.
Here's a Jsfiddle to the form, click on any text input and you'll notice a slight movement
<form>
<h1>Send me a Message</h1>
<label for="name">Name</label><br>
<input type="text" id="name" class="inpt-styles"><br>
<label for="email">Email</label><br>
<input type="text" id="email" class="inpt-styles"><br>
<label for="message">Message</label><br>
<textarea row="5" col"8" id="message" class="inpt-styles txtarea"></textarea><br>
<button type="submit">Send</button>
JSFIDDLE
How can I prevent this movement from happening and make the form feel more solid?
Thank you for any help you can provide!
You have 2 options:
add a transparent border on the non-focused input. This way the size won't change on focus, and you won't get the moving effect.
work with outline in stead of border. Outlines do not take up space and therefore won't move the form either. https://developer.mozilla.org/en-US/docs/Web/CSS/outline
Set a border on the input elements to begin with but make it transparent, like this:
border: 1px solid transparent
I am just attempting inline CSS to get this right and will move it to my "styles" file when finished. What I am attempting should make all the images and radio buttons inline in the surrounding DIV. What I can't do is get them to center height-wise. I tried a margin-bottom on the first radio button as you can see, but it doesn't do anything. What am I doing wrong? Might I need a clearfix somewhere?
<div style="height:30px;">
<input type="radio" name="pay_type" checked="checked" style="margin-bottom:10px;"> <img src="/images/cards.png" style="margin-right:40px;">
<input type="radio" name="pay_type"> <img src="/images/pay-pal.png" style="margin-right:40px;">
<input type="radio" name="pay_type"> <img src="/images/amazon-payments.png">
</div>
I hope this is what you are looking for
JSFIDDLE
I included another <div> which contains the input elements and tried to vertical-align
this inside the parent <div> . I have given the parent div a height of 600px, you can change it and check.
However I have inline styles still. Change it once it works out for you.
I have a set of jQuery Mobile radio buttons with data-type="horizontal and data-mini="true" in the fieldset.
Obviously I'm using this on a mobile site but when the screen size is reduced the radio buttons become stacked on top one another.
How can I prevent this from happening?
Here is an example
http://jsfiddle.net/sg8EJ/3/
<fieldset class="changeFulfilment" data-type="horizontal" data-role="controlgroup" data-mini="true">
<input class="changeFulfillmentInput" type="radio" name="radio-mini" id="radio-mini-1"/>
<label for="radio-mini-1">long Button----------</label>
<input class="changeFulfillmentInput" type="radio" name="radio-mini" id="radio-mini-2" />
<label for="radio-mini-2">short</label>
</fieldset>
Give its container div a min-width with css. This will solve your problem.
I have a checkbox and two text fields. When the checkbox is checked, the two textfield appear (via jquery code). I want that the two label "First field" and "Second field" be aligned with the label "MyCheckbox" Or, in some way, that the two textfield label should be indented respect to the level of the checkbox.
This is my html code:
<div>
<input type="checkbox" name="mycheckbox"> MyCheckbox
</div>
<div id="mydiv">
<div><label>First field</label>
<input type="text" name="first_field" value="">
</div>
<div><label>Second field</label>
<input type="text" name="second_field" value="">
</div>
</div>
How could I do it with css?
#mydiv div {
padding-left: 16px;
}
JSFiddle
You could put them inside of the same div and append to the div using jquery. You would access the div like this
$('input[name=mycheckbox]').parent()
and the append like this
$('input[name=mycheckbox]').parent().append($('#mydiv').html());
If you put the first field and second field outside of the div and the div has a default width //width = 100%
It will be put underneath your first checkbox div. So you need to do one of two things...
Use the above jquery to put your code inside of the 100% div
Or specify the first div's width and float the item next to it an
example of this is
////the float is optional
//div{
//width: 50%;
//float:left;
//}
//#mydiv{
//width: 50%;
//float:left;
//}
For the CSS gurus out there, this markup outputs a checkbox with a label Value1 to its right, but Value1 is too close to the checkbox.
<dd id="rr-element">
<label for="rr-1">
<input type="checkbox" value="1" id="rr-1" name="rr[]">
Value 1
</label>
</dd>
So I'm trying to create a padding-right effect to the right of the checkbox, but it's not working. The checkbox and label move together. How can I target the checkbox only or its text only so I create a padding gap?
dd label input {
padding-right:100px;
}
Use margin-right. padding is inside the element, and often acts funny with input elements because they are rendered using the OS's native input components, and are a mess to customize in general.
JSFiddle here
No unclickable gap between checkbox and label.
No line wrap disconnection of the checkbox and label.
No spaces added by code indentations.
More readable.
<dd id="rr-element">
<input type="checkbox" value="1" id="rr-1" name="rr[]">
<label for="rr-1">Value 1</label>
</dd>
<style>
#rr-element {
white-space: nowrap;
}
#rr-element label {
padding-left: 0.4em;
}
</style>