so I upgraded my site into responsive template, all done but stuck here!
so I know this is something very simple as a b c , but for the life of me cannot fig it out :*(
http://www.example.com/cards/holiday-greeting-cards.php
here on top right the search button with magnifying glass icon... how to make it work!
the other search button which says "search holiday cards"(which will be removed once this one starts working) is working fine...
can anyone please please help please
thanks in adv
This isn't perfect solution and it's a more of a hack, but it's really short and does its job.
Append this just after: <input type="text" placeholder="Search">
<input type="submit" style="
width: 30px;
margin-left: -40px;
opacity: 0;
">
If you add a class to your input box (you can also do an input find in search_box)
<div class="search_box pull-right">
<input type="text" class="search_input" placeholder="Search">
</div>
You can use jQuery to get the content (this example only reacts to the enter key)
$('.search_input')
.keypress(function(e) {
if(e.which == 13) { // if you press enter
window.location.assign('/cards/search-results-xmas.php?keywords=' + $('.search_input').val());
}
});
Related
I created an application which contains material input for search purpose.
I would like the horizontal line of the input field to have progress indicator, when search is in progress.
My idea is to show and hide progressBar with *ngIf and move it with css to match te input horizontal line height.
Here is the code:
<mat-form-field>
<mat-label>Search</mat-label>
<input matInput (input)="onSearchChange($event.target.value)">
<mat-progress-bar *ngIf="searchDone" style="top:9px" [color]='color' mode="query"></mat-progress-bar>
</mat-form-field>
I dont think it is the best solution, because I see the input horizontal line under the progressbar.
Is there any solution that makes the input horizontal line to show progress by itself?
As one possible solution you can start using the lib NgxMatSelectSearch.
The Api has an input option searching to display an indicator while searching.
See the example Stackblitz and try to search in "Server side search" input.
You can position the progress bar over the form field with a template like this:
<div class="container">
<mat-form-field appearance="fill">
<textarea matInput [(ngModel)]="message" [matTextareaAutosize]="true" [matAutosizeMinRows]="1" [placeholder]="placeholder"></textarea>
<button (click)="create()" mat-icon-button matSuffix matTooltip="Send" [disabled]="creating">
<mat-icon>send</mat-icon>
</button>
</mat-form-field>
<mat-progress-bar mode="indeterminate" *ngIf="creating"></mat-progress-bar>
</div>
and css like this:
.container {
position: relative;
}
mat-progress-bar {
position: absolute;
bottom: 16px;
}
I'm trying to add checkbox in my mvc form but it's always created having opcaity:0 in css
this my code where i add the checkbox
<div class="col-md-3 px-1">
<div class="form-group">
<label>Is Suspended</label>
#Html.CheckBox("IsSuspended", false, new { #checked = "checked", #class = "form-control "})
</div>
</div>
when i use inspect element in browser where i put my checkbox i found opacity:0
but i don't know why it's been added to my checkbox or if I use something wrong
<input class="form-control " id="IsSuspended" name="IsSuspended" type="checkbox"
value="true" style="position: absolute; opacity: 0;">
You have an extra piece of code in your project that is adding style="position: absolute; opacity: 0;". On my computer, I only show the input without the extra 'style'.
<input class="form-control " id="IsSuspended" name="IsSuspended" type="checkbox" value="true">
To find the source, use the inspect function in Google Chrome browser and in the Computed tab, click on a property to see where it originated. You will see the reason for the extra position and opacity styles.
Below is an example showing that an element's border-right-color was set by the .form-control class, which is defined in form-less file. You can do the same for position and opacity.
i found the problem that I'm using js library called icheck in my js files
i deleted it and now it's fine
For me, it was because I had given my checkboxes the class "tooltip", which has special meaning in bootstrap.
Heads up: I am new to this forum and English is not my main language so sorry if its not completely understandable.
I am making a mobile website for school and it is going pretty far so well...
One problem: i have a thingy(sorry, dont know the name for it) in my css file(#styled_button) and works fine. There is one button i wanted to be positioned differently so i copied the code from '#styled_button' and created a new thingy and added postion:relative; and float:right; but for some reason my button doesnt get styled at all now. (i did change the id on my button).
EDIT: If i change my button id back to button_styled it is styled.
Even without changing the code, so #logout_button is the same as #button_styled, nothing happens.
My button:
<form action='m.member.php' method='POST'>
<input type='submit' name='logout_button' value='Logout' id="button_styled">
</form>
CSS:
#button_styled {
color:white;
background:#666;
font: bold 45px Harabara;
padding: 20px;
text-decoration: none;
vertical-align: middle;
}
EDIT: Typo removed(wasnt copy pasted from my original code), but the problem is not with the form since it works...
As by request of 'brbcode' here is the code of one of the other buttons im using:
<form action='m.loginscreen.php' method='POST'>
<p>Username:</p>
<input type='text' name='username' id="styled">
<p>Password:</p>
<input type='password' name='password' id="styled"><br>
<ul>
<li><input type='submit' name="loginbutton" value='Log In' class="button_styled"></li>
<li><input type='submit' name="registerbutton" value='Register' class="button_styled"></li>
</ul>
</form>
PS: Sorry again for my fluency in english, but for those that didnt fully understand my button works its just the styling...
It sounds like you might be using an ID on several elements in your html(?). ID's should only be used once per page - typically if you have one element that's different than all others. If you're using the button_styled type in several places, you should change it to a class. In your html:
<input class="button_styled" ... >
And in your CSS:
.button_styled {
/* your styling */
}
net MVC View. At the end of the view I have the following Buttons
<div style="clear: both; padding-top: 40px; width: 720px;">
<button name="buttonHelp" value="Help" onclick="window.open('Help.htm',target='_blank');return false;">
Help</button>
<span style="float: right;">
<button name="button" value="Reset">
Reset</button>
<button name="button" value="Save">
Save</button>
</span>
</div>
The Save and Reset causes a postback and the screen gets refreshed properly.
If I click the help button it opens the Help screen in s new TAB which is what I require.
Now after using the help screen I press Save/Reset it always open a new window which I dont want and I find puzzling.
Any idea how to solve this ?
The following change solved the problem. the help still opens in a new tab as I wanted
> <button name="buttonHelp" value="Help"
> onclick="window.open('Help.htm');return false;">
> Help</button>
Check to ensure that the target isn't staying "_blank" after you click Help and that the target of the form is _self.
This is my code:
Enter your question here:
<form method="post" action="">
Title:
<input type="text" name="title">
<br>Further Explanation:<br>
<textarea name="content" rows="5"></textarea><br>
<input type="submit" name="input" value="Ask" />
<?php
if(isset($_POST['delete'])) {
include "connection.php";
if (mysql_query("TRUNCATE TABLE Questions"))
{
echo "Pitanje je uspesno obrisano";
} else {
echo "Nastala je greška pri brisanju pitanja<br>" . mysql_error();
}
}
?>
</form>
<form action="
<?php
$_SERVER['PHP_SELF'];
?>
" method="post">
<input type="submit" name="delete" value="delete all questions">
</form>
Now, this is what should my form normally look like:
But this is what happens when I put in or out of the div tag inside my dynamic page file:
http://tinypic.com/images/404.gif
What am I doing wrong? what is going on? :(
I'm not a CSS pro, but what I'd recommend is firing this up in Firefox after you download the add-on Firebug. Firebug will let you get right in there and mess with the CSS and HTML while it is running in the browser, so you can adjust things on the fly, turn on and off css elements, and isolate exactly what is causing the problem. Just find the div in the Firebug window and it will list every css element currently attached to it. From there, you should be able to move through the code and see where that weird CSS is coming from.
You probably have some CSS rules that change the appearance of input and textarea elements, probably something like:
input, textarea {
border: none;
}
That’s why your input and textarea elements do not have a border. And the centered align might be inherited from a parent element.