At max-width: 380px; the text should disappear and only the search icon should appear. However, the text doesn't disappear.
#media screen and(max-width: 380px) {
nav div form span .text {
display: none;
}
}
<div class="search-container">
<form>
<input type="text" placeholder="Search..." name="search" />
<button type="submit">
<i class="fas fa-search"></i><span class="text">Search</span>
</button>
</form>
</div>
As #AHaworth said in the comments, spaces select siblings, whether direct or not. So if you have a span inside a div, or a span inside a p inside a div, div span would select that. That's not what you want. You want span.text. That selects spans with class text.
#media only screen and (max-width: 380px) {
span.text {
display: none;
}
}
<nav>
<div class="search-container">
<form>
<input type="text" placeholder="Search..." name="search">
<button type="submit"><i class="fas fa-search"></i><span class="text">Search</span></button>
</form>
</div>
</nav>
<script src="https://use.fontawesome.com/6ba8be0f46.js"></script>
JSFiddle -- Resize the window here.
Related
<div class="tree-control">
<form>
<div class="input-append" style="margin-right: 10px;">
<input class="tree-search" type="text">
<button title="search" class="btn tree-search-btn" type="button"/>
</div>
link
some text
link
</form>
</div>
Can I hide some text without adding any tags to html?
I'm trying do smth like that:
div.tree-control form {
display:none;
}
div.tree-control form > div:first-of-type {
display:block;
}
but it will hide all form. How can I hide just text?
You could use the visibility property here.
The visibility property is different than the display property in that it allows a parent element to be hidden and a child to be visible.
div.tree-control form {
visibility: hidden; /* hide the whole form */
}
div.tree-control form > div:first-of-type {
visibility: visible; /* make the first div in the form visible */
}
div.tree-control form {
visibility: hidden;
}
div.tree-control form > div:first-of-type {
visibility: visible;
}
<div class="tree-control">
<form>
<div class="input-append" style="margin-right: 10px;">
<input class="tree-search" type="text">
<button title="search" class="btn tree-search-btn" type="button"/>
</div>
some text
</form>
</div>
There is no methods for disabling only the text when you not allow to give a tag.
But there is always a workaround for you.
Changing the color of the text as the same as the background.
Hope this could help you.
<!DOCTYPE html>
<html>
<head>
<style>
div.tree-control form {
color:white;
}
div.tree-control form > div:first-of-type {
display:block;
}
</style>
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
<div class="tree-control">
<form>
<div class="input-append" style="margin-right: 10px;">
<input class="tree-search" type="text">
<button title="search" class="btn tree-search-btn" type="button">
I am Button
</button>
</div>
some text
</form>
</div>
You can always add text as an element -
<p>Some Text</p>
<label>Some Text</label>
<span>Some Text</span>
Assign and Id or Class and simple display: none; will do.
form span{
display: none;
}
<div class="tree-control">
<form>
<div class="input-append" style="margin-right: 10px;">
<input class="tree-search" type="text">
<button title="search" class="btn tree-search-btn" type="button"/>
</div>
link
<span>some text</span>
link
</form>
</div>
in html/css i have simply two form and i want to set that to single row as inline widthout using float. you can see this ONLINE DEMO
in this below code i want to set display:inline to have single row as two div. like with this screen shot:
HTML:
<div class='single-page'>
<div id="verification-panel">
<form>
<fieldset>
<legend>verification code</legend>
<label>Mobile Number:</label>
<input type="text" class="inputs" placeholder="EX:">
<span class="help-block"></span>
<button type="button" class="btn">Submit</button>
</fieldset>
</form>
</div>
<div id="activation-panel">
<form>
<fieldset>
<legend>Active Acount</legend>
<label>Verfication code:</label>
<input type="text" class="inputs" placeholder="Verficcation code">
<span class="help-block"></span>
<button type="button" class="btn">Submit</button>
</fieldset>
</form>
</div>
</div>
use display:inline-block;
#verification-panel,#activation-panel{
display:inline-block;
}
Copy this code to your CSS section:
.single-page {
display: inline-block;
width: 769px;
}
.verification-panel,
.activation-panel { display: inline-block; }
To get the forms inline, apart from declaring the display: inline-block to both classes, you have to define a width for the parent container big enough to let them sit besides each other.
Here is a demo
.single-page{
display: inline;
width: 100%;
}
#verification-panel,#activation-panel{
display: inline-block;
width: 49%; // because of margin or etc.
}
#verification-panel,#activation-panel{
display:inline-block; width:250px;
}
I have three elements inside a div. I want to position one on the left, one in the middle and the last one on the right. I have tried the following:
.search-form {
float: right;
}
.menu_icon:before {
content:url(/sites/all/themes/mytheme/images/hamburger.png);
}
.main_logo {
margin: 0% auto;
}
.main_logo:before {
content:url(/sites/all/themes/mytheme/images/logop.png);
}
.menu_icon {
float: left;
}
<div class="fixed">
<div class="fixed-container">
<form action="/search/node" method="post" id="search-form" class="search-form">
<div class="form-item">
<input type="text" class="input-text" value="Search the website" onFocus="this.value=''" onBlur="if(this.value=='') this.value='Search the website';" size="25" name="keys" />
<input type="submit" value="" name="op" alt="Search" />
<input type="hidden" value="<?php print drupal_get_token('search_form'); ?>" name="form_token" />
<input type="hidden" value="search_form" id="edit-search-form" name="form_id" />
<input type="hidden" name="type[your_content_type]" id="edit-type-your_content_type" value="your_content_type" />
</div>
</form>
</div>
</div>
Also I have tried to individually wrap those elements in divs and applying styles to those divs instead of elements. But the logo always sticks to the menu icon as it can be seen from the snippet below. Why it's not working?
Currently your a is displayed as inline, which makes it unable to be centered as a block.
Also, display:block does not work on its own with margin:0 auto, as blocks have an understood width of 100%. You also need a given width for it to work.
.first {
float:right;background:red;
}
.second{
float:left;background:blue;
}
.third{
margin:0% auto;background:gold;
display:block;width:10em;
/*Unnecessary but may be added*/text-align:center;
}
<div class="fixed">
<div class="fixed-container">
<span class="first">First</span>
<div class="second">Second</div>
<span class="third">Third</span>
</div>
</div>
I am writing some code that hides and displays a different form depending on whether the user wants to login or register. However for some reason my form isn't displaying in the html in between the <form class="login-inputs"> , its doesn't even appear in the HTML doc. Can anyone see why?
<div class="col-md-3">
<button type="button" id="login" class="btn btn-default login hidden">Login</button>
<button type="button" id="register" class="btn btn-default register">Register</button>
<form class="login-inputs hidden">
<h3>Login</h3>
<div class="form-group">
<label for="inputEmail">Email</label>
<input type="email" class="form-control" id="inputEmail" placeholder="Email">
</div>
<div class="form-group">
<label for="inputPassword">Password</label>
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-primary">Login</button>
</form>
</div>
Remove the hidden class.
media screen element "on" and "off" class:
/* For Phone device */
.visible-xs{
display: block !important;
}
.hidden-xs{
display: none !important;
}
/* For Phone device End */
#media (min-width: 768px){
.visible-sm{
display: block !important;
}
.hidden-sm{
display: none !important;
}
}
#media (min-width: 992px){
.visible-md{
display: block !important;
}
.hidden-md{
display: none !important;
}
}
#media (min-width: 1200px){
.visible-lg{
display: block !important;
}
.hidden-lg{
display: none !important;
}
}
Just use the class. This CSS already have bootstrap 3.
I want to have two elements stay on the same row.
Right now I have this code:
<fieldset data-role="controlgroup" data-type="horizontal">
<label for="textinput">Text:</label>
<input type="text" id="textinput"/>
<input type="button" id="searchbutton" data-icon="search" data-iconpos="notext" onclick="function()"/>
</fieldset>
This works. The label, the input field and the button will all be on the same row as long as you view it in fullscreen in your computer browser. But if we make the window smaller, all three elements will be shown on one row each. Is there any way to make the label appear on one row, and the input field + button on the row below?
You need to override the jQM enhancements:
http://jsfiddle.net/E4EVT/10/
http://jsfiddle.net/E4EVT/36/ (Using the grid layout)
http://jsfiddle.net/E4EVT/42/ (Using the table layout)
JS
$('#textinput2').css('width','60%').css('display','inline');
HTML
<div>
<!-- use span instead of label -->
<span>Text:</span>
<input type="text" id="textinput2"/>
<br />
<input type="button" id="searchbutton2" data-icon="search" data-iconpos="notext" onclick="function()"/>
</div>
I think you might want to look into the grid layout jQM offers
http://jquerymobile.com/demos/1.0rc1/docs/content/content-grids.html
For Jquery Mobile 1.2.0
<div class="ui-grid-a" >
<div class="ui-block-a"><input type="text" /></div>
<div class="ui-block-b"><input type="text" /></div>
</div>
you need to add attribute data-inline="true" to the input elements.
CSS:
label {
display: block;
}
input {
padding: 2px;
width: 100px;
}
.wrap {
width: 212px; /* the width of twice your input (plus borders) */
}
And your HTML:
<fieldset data-role="controlgroup" data-type="horizontal">
<label for="textinput">Text:</label>
<div class="wrap">
<input type="text" id="textinput"/>
<input type="button" id="searchbutton" data-icon="search" data-iconpos="notext" onclick="function()"/>
</div>
</fieldset>
http://jsfiddle.net/ahallicks/BWsdk/
Edit:
Sorry, misread your question! If you want them all on the same line to start with use the following CSS:
label {
float: left;
margin-right: 12px;
}
input {
padding: 2px;
width: 100px;
}
.wrap {
float: left;
width: 212px; /* the width of twice your input (plus borders) */
}
http://jsfiddle.net/ahallicks/E4EVT/