I'm working with Zurb's Foundation to create a responsive website, however I've run in to an issue when trying to make my search form responsive.
I have an input field, then to the right of it a <button> to submit the form. The button has an image within it, which is 70px wide. So what I need to do is have the input field take up 100% of whatever is remaining.
I've tried looking at the overflow: hidden; method without much luck. I've even tried using percentages, but when you go down to the mobile size the button image is really small due to resizing (a part of foundation).
Here's what I have:
HTML:
<div class="form-search">
<input id="search" type="text" class="input-text" />
<button type="submit" class="button expand postfix">
<img src="images/search-submit.png" />
</button>
</div>
CSS:
div.form-search { overflow: hidden; }
div.form-search input { float:left; overflow: hidden; background: #ebebe7; border: none; padding: 1em; outline: none; }
div.form-search button { display: block; background: none; border: none; padding: 0; margin: 0; }
Fixed it by using:
HTML:
<div class="form-search">
<button type="submit" class="button expand postfix">
<img src="images/search-submit.png" />
</button>
<div>
<input id="search" type="text" name="search" class="input-text" />
</div>
</div>
CSS:
div.form-search div { overflow: hidden; }
div.form-search div input { width: 100%; background: #ebebe7; border: none; padding: 1em; outline: none; }
div.form-search button { float: right; width: emCalc(70); background: none; border: none; padding: 0; margin: 0; }
This floats the submit button to the right of the div and because of it's set width and overflow: hidden; on the input's parent div it fills the remaining space with a 100% width.
Related
The following HTML is being generates radio_buttons as selectors from an image label
<div class='small-2 columns buttonselector'>
<label for="content_ki_id_1">
<input class="invisi-selector" type="radio" value="1" name="content[ki_id]" id="content_ki_id_1" />
<img src="/assets/circle.svg" />
<div></div>
</label>
</div>
The CSS properly makes the radio button invisible, but there is a gap in handling the wrapper and its visibility on radio_button selected
.buttonselector > div {
width: 100%;
height: 100%;
background: #fff;
}
.invisi-selector {
opacity: 0;
}
.invisi-selector:checked + div {
border-color: #ba53ad;
border-width: 4px;
}
the wrapper cannot logically take the selector's class for it would be invisible. How can the checked action be binded to the wrapping div?
It can't, but you can use absolute positioning to make it look like it is.
.buttonselector>label {
width: 100%;
height: 100%;
background: #fff;
display: block;
position: relative;
}
.invisi-selector {
opacity: 0;
position: absolute;
}
.invisi-selector~div {
z-index: -1;
position: absolute;
left: -4px;
top: -4px;
width: 100%;
height: 100%;
}
.invisi-selector:checked~div {
border: 4px solid #ba53ad;
}
<div class='small-2 columns buttonselector'>
<label for="content_ki_id_1">
<input class="invisi-selector" type="radio" value="1" name="content[ki_id]" id="content_ki_id_1" />
<img src="/assets/circle.svg" />
<div></div>
</label>
</div>
I have a label defined where one half needs to be at left side and the other half of text needs to be on right side. How can I solve this so that the other half is pulled right?
I have added margin-right to get the text to pull at right but it's not consistent for other divs.
<div class="radio">
<input class="radio-test" type="radio" value="3" checked="checked" name="test[id]" id="test_id">
<label class="radio-label" for="test_id_1">
Test of $12.0
<span class="test-cost">Free</span>
</label>
<hr class="test-hr">
<p class="test-message"></p><p>- First test message</p><p></p>
</div>
Expected Result:
Current Result:
How can I make text in above image i.e. 'Free' to appear on the right most side as shown on expected result? Also make it always consistent on other div such that the space from div is same across.
Here is a complete working example with JsBin: https://jsbin.com/yafesuyola/1/edit?html,css,output
It uses flexbox with justify-content: space-between. I also added a div around the label and the input to keep them on the same line with 100% width.
<div class="radio">
<div class="radio-and-label">
<input class="radio-test" type="radio" value="3" checked="checked" name="test[id]" id="test_id">
<label class="radio-label" for="test_id_1">
Test of $12.0
<span class="test-cost">Free</span>
</label>
</div>
<hr class="test-hr">
<p class="test-message"></p><p>- First test message</p><p></p>
</div>
.radio {
border: 2px solid #33c;
border-radius: 5px;
padding: 10px;
background: #e0eeff;
color: #33c;
font-weight: bold;
}
.radio-and-label {
display: flex;
}
.radio-label {
width: 100%;
display: flex;
justify-content: space-between;
}
.test-cost {
text-align: right;
}
.test-hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}
Hope that helps!
Clip the element to always be pinned to top right of the element?
.radio {
position: relative;
}
.test-cost {
position: absolute;
top: 2px;
right: 2px; // or whatever px/rem/etc value that fits your need
}
I'm trying to figure out if there is any pure CSS solution to keep a drop-down element open while the input field of that element is focused? Here is an example:
div {
width: 300px;
line-height: 50px;
text-align: center;
background: #e8e8e8;
border: 1px solid #666;
}
div:hover form {
display: block;
}
form {
display: none;
padding: 0 15px;
}
<div>Hover Me
<form class="search">
<input type="search" placeholder="What are you looking for?" autofocus>
<input type="button" value="Search!">
</form>
</div>
The idea is to keep the form visible when the search field is focused. Because when a user starts typing the search inquiry and the mouse move out of the hover zone, the form hides, and that's very annoying.
Side-question: Is it possible to focus via CSS search input element each time a <div> is hovered?
The solution has been already proposed, but lacks browser support:
9.4. The Generalized Input Focus Pseudo-class: :focus-within
The :focus-within pseudo-class applies to elements for which the
:focus pseudo class applies.
An element also matches :focus-within if one of its
shadow-including descendants matches :focus.
div {
width: 300px;
line-height: 50px;
text-align: center;
background: #e8e8e8;
border: 1px solid #666;
}
div:hover form, div:focus-within form {
display: block;
}
form {
display: none;
padding: 0 15px;
}
<div tabindex="-1">Hover Me
<form class="search">
<input type="search" placeholder="What are you looking for?" autofocus>
<input type="button" value="Search!">
</form>
</div>
Meanwhile, you can use a polyfill:
div {
width: 300px;
line-height: 50px;
text-align: center;
background: #e8e8e8;
border: 1px solid #666;
}
div:hover form, div.focus-within form {
display: block;
}
form {
display: none;
padding: 0 15px;
}
<script src="https://gist.githubusercontent.com/aFarkas/a7e0d85450f323d5e164/raw/"></script>
<div tabindex="-1">Hover Me
<form class="search">
<input type="search" placeholder="What are you looking for?" autofocus>
<input type="button" value="Search!">
</form>
</div>
Wait. There's actually a pure CSS solution. But there is a drawback — it only works with just one <input> tag, and no <form> tag, like this:
div {
width: 300px;
line-height: 50px;
text-align: center;
background: #e8e8e8;
border: 1px solid #666;
padding: 0.5%;
}
input {
display: none;
margin: auto;
}
div:hover input {
display: block;
}
input:focus {
display: block !important
}
<div>Hover Me
<input type="search" placeholder="What are you looking for?">
</form>
</div>
However, you can just make the user search the form by pressing Enter on the keyboard. Unfortunately, this requires JavaScript, which defeats the whole purpose of this post.
I've also noticed that your placeholder text doesn't really work properly, since the text "Search" is still there. There are two solutions to this — use JavaScript to fix it, or change the 'type' of the input tag to "text".
I have a label, input and button one line. The width of the label and button are dynamic, they take the width of the text they contain. The label is aligned to the left, and the button to the right.
I want the button to be aligned to the far right, and the input in the middle take up all the remaining space.
I put a float: right on the button, but if I put the width of the input to 100% it goes to the next line and acts like a block element.
What would be the best / easiest way to realize what I'm trying to do here? This is a little bit tricky for me. I'm not sure what to do.
label {
margin-right: 10px;
}
input[type=text] {
width: 355px; /*100% doesnt work*/
height: 20px;
padding: 5px 10px;
}
input[type=text]:focus {
outline: 0;
}
button {
margin-left: -1px;
float: right;
vertical-align: bottom;
}
<fieldset class="last">
<label for="place">Any text here:</label>
<input type="text" id="place" value="Test value">
<button>Click</button>
</fieldset>
JSFiddle Demo
Here's a bit of a hacky way to do it:
table {
width: 100%;
}
.fixedText {
width: 1px;
white-space: nowrap;
}
.relativeText {
width: 100%;
}
#place {
width: 100%;
}
<table>
<tr>
<td class="fixedText">
<label for="place">Any text here:</label>
</td>
<td class="relativeText">
<input type="text" id="place" value="Test value">
</td>
<td class="fixedText">
<button>Click</button>
</td>
</tr>
</table>
Just to show you that you can also do it without tables (although I would probably go for the display: table-cell).
First float the label and the button to the left and right. Add a wrapper around the input. The wrapper gets overflow: hidden which creates a new block formatting context, see http://www.stubbornella.org/content/2009/07/23/overflow-a-secret-benefit/ for background information. In short this allow the wrapper to take up the remaining space.
Afterwards we apply some fixes to the padding, box-sizing, height and line-height to make it all look good again.
label {
height: 40px;
line-height: 40px;
margin-right: 10px;
float: left;
}
.wrapper {
overflow: hidden;
}
input[type=text] {
width: 100%;
height: 40px;
padding: 5px 10px;
box-sizing: border-box;
}
input[type=text]:focus {
outline: 0;
}
button {
margin-left: -1px;
float: right;
}
<fieldset class="last">
<label for="place">Any text here:</label>
<button>Click</button>
<div class="wrapper"><input type="text" id="place" value="Test value"></div>
</fieldset>
I have the Following Radio buttons in my jQuery mobile app , I need to style them as the Radio button in the image bellow . I have tried the following css but it didn't give me the same result , Please Help me ..
Html
<div data-role="page">
<div data-role="header" data-theme="b" style="height:63px;">
</div>
<div data-role="content">
<form>
<fieldset>
<input type="radio" id="Male" value=" Male" name="radio-group-1" />
<label for="Male" data-inline="true" style="background:transparent !important;">Male </label>
<input type="radio" id="Female" value=" Female" name="radio-group-1" />
<label for="Female" data-inline="true" style="background:transparent !important;" >Female </label>
</fieldset>
</form>
</div>
</div>
CSS
input[type="radio"] {
display: none;
}
.ui-btn.ui-radio-off:after, .ui-btn.ui-radio-on:after{
width: 25px;
height: 25px;
}
.ui-btn.ui-radio-off:after, .ui-btn.ui-radio-on:after{
margin-top: -18px;
margin-left: -38px;
}
.ui-btn.ui-radio-on:after{
width: 55px;
height: 55px;
background: green !important;
background-size:100px 24px;
}
This is what i get
To get a green inner circle with transparent around it and a border after that, you really need 2 circles. This could be achieved by adding a :before element as well as the :after element in CSS.
Here is a DEMO
The CSS makes the whole button 56px tall and vertically centers the text by making the line-height the same. When off, the radio image is 26x26 with a gray border. When on, the :before css adds a new 26x26 empty circle with a border while the :after css creates a smaller green circle in the center. NOTE: you may need to tweak sizes and margins to get your desired results.
input[type="radio"] {
display: none;
}
.ui-radio label {
height:56px;
line-height: 56px;
padding-left: 50px;
}
.ui-radio .ui-btn.ui-radio-off:after {
background-image: none;
width: 26px;
height: 26px;
border: 2px solid #6E7983;
margin-top: -13px;
}
.ui-radio .ui-btn.ui-radio-on:after {
background-color: #86D51C;
width: 14px;
height: 14px;
margin-top: -6px;
margin-left: 10px;
border: 0;
}
.ui-radio .ui-btn.ui-radio-on:before {
content:"";
position: absolute;
display: block;
border: 2px solid #6E7983;
border-radius: 50%;
background-color: transparent;
width: 26px;
height: 26px;
margin-top: 14px;
margin-left: -39px;
}