I have the following layout:
<article class='pb5 bg-near-white'>
<header class='tc ph4-ns pt4 pt5-ns'>
<h1 class='tc blue'>Let's get started posting your question</h1>
</header>
<div class=''>
<div class='pa4 bg-white measure db center f5 f4-ns lh-copy'>
<form class='center mt3 mb4 justify-around'>
<fieldset class='ba b--transparent'>
<div class='mt4'>
<label class='db mb2 b'>Title</label>
<input
class='noresize ph3 pv3 input-reset ba b--black-10 w-100'
placeholder='title'
onChange={handleTitleChange}
></input>
</div>
<div class='mv4'>
<label class='db mb2 b'>Content</label>
<textarea
class='noresize ph3 pv3 input-reset ba b--black-10 w-100'
placeholder='Content Here!'
cols='50'
rows='5'
onChange={handleBodyChange}
></textarea>
</div>
<a
class='tc f6 fw6 b link dim br2 ph3 pv3 mb2 dib white bg-blue w-100'
onClick={handlePostQuestion}
>
Submit
</a>
</fieldset>
</form>
</div>
</div>
</article>
which uses tachyons inline css in order to create a basic form layout. However, I end up with the following ui:
The padding seems not to be applying to the title input field, but it does apply to the textarea field. When I change the input tag to a textarea tag, the padding applies but the problem is this seems to be a temporary fix. Am I doing something wrong?
On the input element, adding the class border-box or setting type="text" will make it behave as you expect.
Reason being, Tachyons does not give all input elements "border-box" box sizing; explained in more detail in the docs. Also visible in the source code.
Related
I'm trying to align the text just above the hr tag like the logout button using bootstrap.
Here's what I want to achieve:
bootstrap code :
<div className="position-relative">
<hr/>
<div className="position-absolute end-0 bottom-0 d-flex">
<p className="align-baseline //not working">Logged in as {user?.email}</p>
<button onClick={handleLogout} className="btn btn-primary ms-2 m-1">Logout</button>
</div>
</div>
Glad for any help
#Edit :
after adding mb-0 to my p tag :
Given the image, your <p> has some margin-bottom, add the bootstrap class mb-0 to the <p> tag.
Then to align the <p> to the bottom, you'd need to have the flex content pushed to bottom, that will be done with adding align-items-end to the div.
I also added a small padding to stop it from sticking to the bottom.
JSFiddle
Edit: As per the answer from G-Cyrillus, you actually don't need the positions either (I overlooked it before). A little change in structure and whole thing looks the same with lesser code. Updated JSFiddle
Here both <p> and <button> are part of d-flex. You can align both the items by using align-items utilities on flexbox containers to change the alignment of flex items on the cross axis (the y-axis to start, x-axis if flex-direction: column).
<div class="d-flex align-items-center">...</div>
You can find more resource here link.
You probably do not need absolute position , flex & order can do .
example
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="d-flex flex-column"><!-- make it a flex column to use order -->
<hr class="order-2 m-0" /><!-- resets margin & order -->
<div class="d-flex justify-content-end"><!-- here use the justify-content-xx class you need -->
<p class="m-0 mt-auto">Logged in as <b>SO User</b></p><!-- reset margins-->
<button onClick={handleLogout} class="btn btn-primary ms-2 m-1">Logout</button>
</div>
</div>
</div>
</div>
I have a grid of input fields on my form. Bootstrap is naturally adding a bit of horizontal space between the fields in Firefox, which is how I want the form to look, but the fields are getting jammed together in Chrome. In the Firefox image above, I have highlighted the col-md-2 div in Firebug which wraps the input field. The input field is highlighted in Chrome.
This seems to be the difference - Firefox seems to be constraining the input fields to fit inside the grid elements, but this is not the case in Chrome. In Firefox, the input fields in the grid are 144 px wide but in Chrome they are 170 px wide.
Here is the markup for a row of fields:
<div class="row signup">
<div class="col-md-1">
<span class="plus-icon">
<img width="18" height="18" src="/assets/plus.jpg" alt="Plus">
</span>
<span class="minus-icon">
<img width="18" height="18" src="/assets/minus.jpg" alt="Minus">
</span>
</div>
<div class="col-md-2">
<input id="sheet_slots_attributes_0_label" type="text" name="sheet[slots_attributes][0][label]" value="Food">
</div>
<div class="col-md-2">
<input id="sheet_slots_attributes_0_name" type="text" name="sheet[slots_attributes][0][name]" value="Foo">
</div>
<div class="col-md-2">
<input id="sheet_slots_attributes_0_email" type="text" name="sheet[slots_attributes][0][email]" value="foo#foo.com">
</div>
<div class="col-md-2">
<input id="sheet_slots_attributes_0_phone" type="text" name="sheet[slots_attributes][0][phone]" value="">
</div>
<div class="col-md-2">
<input id="sheet_slots_attributes_0_comments" type="text" name="sheet[slots_attributes][0][comments]" value="">
</div>
</div>
I have tried to build a fiddle to demonstrate this but I am not able to get it working. So sorry for no fiddle, but I thought someone may have seen this before.
FYI the row signup markup is just adding bottom margin to space out the rows a bit. Also, I've tried adding an extra col-md-1 to get to an even 12 both at the start and end of each row but it doesn't help. I don't have any extra markup for any of this - just using Bootstrap.
It would be great to also understand why the input boxes look relatively ugly (squarish and plain) on Chrome as well - perhaps this is related.
You need to set the width of the inputs to 100%. This makes them take up the width of their container. Otherwise, you are letting the browser determine the default width of the inputs. You can do this manually, or add the bootstrap class form-control to each input.
See it in action in this demo bootply
I want to have some text on a row, followed by an input box on the same row.
However, the input box is always going to the next row, even though there's enough space for it on same row as the text. I looked in the documentation, and there is only advice there to do what I want for forms (i.e class form-horizontal).
However, I just want some text (<p> tag) and then an input box.
See simple JSFiddle
http://jsfiddle.net/dz089gac/1/
<div class="container">
<div class="row">
<p>Hi</p>
<input type="text" placeholder="hi">
</div>
</diV>
Use below code:
<div class="container">
<div class="row">
<span>Hi</span>
<input type="text" placeholder="hi">
</div>
</diV>
Use span instead of p tag as p creates block of element and place a new line after the tag close.
This is because the p is a block element and the next element will start on a new line.
If you can not change the element type or move the input into the p tag then you can use css to make the p element inline.
.row p{
display:inline-block;
}
http://jsfiddle.net/dz089gac/3/
A paragraph (p) is a block-level element. That means it takes up the entire "row" it is on.
You should strongly consider using a label (label) instead, which is more semantically correct in this context and, as such, provides a few benefits:
<div class="container">
<div class="row">
<label for="my_input_element">Hi</label>
<input type="text" placeholder="hi" id="my_input_element">
</div>
</diV>
Clicking on the label will set the focus on the corresponding input element, and screenreaders (and other devices) recognize that the label is associated with the input, rather than a block of unrelated text. This is exactly what a label is INTENDED to be used for.
fiddle: http://jsfiddle.net/s62evwmz/
Put inside the paragraph.
<p>Hi <input type="text" placeholder="hi"></p>
But that is much more better, if you are using labels instead of p
<label>Hi <input type="text" placeholder="hi"></label>
I don't know if this is what you want, but i have put the input type into the </p> tag.
Updated fiddle here
just put the input inside the <p></p>
e.g.
<div class="container">
<div class="row">
<p>Hi <input type="text" placeholder="hi"></p>
</div>
</diV>
fiddle
You can set the display property of <P> tag to the inline-block value i.e. display=inline-block and if required you can give some margin for the Box this will add space between them.
ie .
<div class="container">
<div class="row">
<p style="display:inline-block;">Hi</p>
<input type="text" placeholder="hi" >
</div>
</diV>
Demo Link : http://jsfiddle.net/dz089gac/10/
I have html code that I cannot change.
I cannot use JS for help. So the only option is CSS. example here:
https://jsfiddle.net/4gKPL/
HTML:
<!-- code for input -->
<div class="form-group complete">
<label>label for text input</label>
<input type="text"/> <span class="error-message">This is an error message</span>
</div>
<!-- code for dropdown -->
<div class="form-group complete">
<label>label for select input</label>
<div class="custom-selectbox custom-selectbox-form">
<select name="sth" required>
<option>a</option>
<option>b</option>
<option>c</option>
<option>d</option>
</select> <span class="selectedValue"> </span>
<span class="is-visually-hidden">select to open the list</span>
</div> <span class="error-message">This is an error message</span>
</div>
CSS:
.complete:after {
content:'OK';
}
I need to display additional content (in this example 'OK') for input fields but not for select.
Spans after interactive components are optional so don't have to exist.
Any idea about how define this selector?
Since you can't use :after on input elements, all I can think of is a really hackish solution: select the element following and insert a :before pseudo element in front of it.
.complete input[type="text"] + .error-message:before {
content:'OK';
}
See this jsFiddle for a working example.
EDIT
The .error-message element's not always being present throws a wrench in this plan. You can make an unprefixed call to :before (+ :before), but then if the following element is hidden in some way, so will your OK message. And even if it is present, it picks up the styles of the element following. See this updated jsFiddle.
I'll leave this idea up so people can see it, but it doesn't look like it will work for your purposes.
I have a problem with the automatic layout of jquery mobile:
i have a form with fieldsets:
<div data-role="collapsible" data-collapsed="false" data-theme="a">
<h3>Test</h3>
<div data-role="fieldcontain">
<label for="TextInput"> Textinput </label>
<input type="text" name="TextInput" id="TextInput">
</div>
<div data-role="fieldcontain">
<label for="ButtonInput"> Button </label>
<a href="javascript:alert('works')" data-icon="arrow-r" data-role="button" data-iconpos="right">
<label id="ButtonInput" name="ButtonInput"> Testvalue </label>
</a>
</div>
</div>
On Displays with a lower resolution everything work fine. The labels are shown in the first row, the inputs are shown in the second row:
Textinput
[Inputbox]
Button
[Button]
On Displays with a higher resolution, the input field and the label are shown in 1 row
Textinput [InputBox]
but the Button is still shown in 2 Rows:
Button
[Button]
Anyone knows the problem?
This is not an error, jQM was build to act like that.
If you want to fix it just use this simple css:
#TextInput {
width: 100% !important;
}
working example: http://jsfiddle.net/Gajotres/xrVU2/