Thank you for taking a look at my question!
What I'm trying to do in bootstrap is add a textarea that have text-editor buttons in them.. "bold", "italic" and "attachment" it's supposed to look like this:
Mockup
But instead I have this:
My Results so far
The main problems I'm having is:
Hot to Prevent text in textarea from going under the editor buttons
What do I need to override in buttons to get the desired effects
By the way I'm using a bootstrap template/theme its called remark, I'm using one of their editor element:
getbootstrapadmin.com/remark/base/forms/editor-markdown.html
template/11989202
HTML I have so far:
<div>
<div class="md-header btn-toolbar btn-toolbar-btm">
<div class="btn-group">
<button class="btn-default btn-sm btn btn-pure" type="button" title="Bold" tabindex="-1" data-provider="bootstrap-markdown"
data-handler="bootstrap-markdown-cmdBold" data-hotkey="Ctrl+B"><span class="fa fa-bold">
</span> </button>
<button class="btn-default btn-sm btn btn-pure" type="button" title="Italic"
tabindex="-1" data-provider="bootstrap-markdown" data-handler="bootstrap-markdown-cmdItalic"
data-hotkey="Ctrl+I"><span class="fa fa-italic"></span> </button>
<button class="btn-default btn-sm btn btn-pure" type="button" title="Heading" tabindex="-1">
<span class="icon wb-attach-file"></span> </button>
</div>
</div>
<textarea class="form-control" rows="8" placeholder="Type something here..."></textarea>
</div>
CSS:
.btn-toolbar-btm{
position:absolute;
top:212px;
margin-left:8px;
z-index:3;
}
If you can help me in any way I will GREATLY appreciate it, you would literally save my job :/
try this code
<div class="form-group required-field-block">
<div class="col-md-12 input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-pencil"></span></span>
<textarea rows="3" size="30" value="" class="form-control" placeholder="Sporočilo"></textarea>
<div class="required-icon">
<div class="text">*</div>
</div>
</div>
</div>
Related
I want to be able to change the color of my login button (the button with the id= "loginbtn") when I hover over it, here is the html code:
<template >
<div class="login background" style="height:100%" >
<div style="color:#76323F">{{error}}</div>
<button id="signbtn" v-on:click="signup">Signup</button>
<button v-on:click="calendar">Calendar</button>
<div>
<div class="container col-lg-2 col-md-3 col-sm-4 col-xs-6 " style="margin-top:300px" >
<div class="input-group" style="margin-top:15px;">
<span class="input-group-addon" id="basic-addon1" style="background-color:#C09F80;border-color:#C09F80;opacity:.8;color:#76323F;" > <span class="glyphicon glyphicon-user"></span></span>
<input type="text" v-model="username" id="inputUsername" name="username" class="form-control col-lg-1" required autofocus placeholder="Username" aria-describedby="basic-addon1" style="opacity:.8;color:#76323F;font-weight:bold;">
</div>
<div class="input-group" style="margin-top:15px;">
<span class="input-group-addon" style="background-color:#C09F80;border-color:#C09F80;opacity:.8;color:#76323F;">
<i class="glyphicon glyphicon-lock"></i>
</span>
<input v-model="password" type="password" id="inputPassword" name="password" class="form-control" placeholder="Password" required autofocus style="opacity:.8;color:#76323F;font-weight:bold;"/>
</div>
<button id="loginbtn"v-on:click="submit" class="btn btn-lg btn-primary btn-block" style=".btn-primary{color:#C09F80;color:#C09F80;background-color:#76323F;border-color:#76323F;margin-top:20px;}" type="submit">Log in</button>
</div>
</div>
</div>
</template>
Use #loginbtn:hover { background-color:yellow; } (or whatever color you want) in your CSS.
And if that doesn't work because of the inline-styles you are using, move those inline styles out of the HTML code into the style sheet:
#loginbtn {
color: #C09F80;
background-color: #76323F;
border-color: #76323F;
margin-top: 20px;
}
#loginbtn:hover {
background-color: yellow;
}
<button id="loginbtn" v-on:click="submit" class="btn btn-lg btn-primary btn-block" type="submit">Log in</button>
If you only want to change the color of a single button (not a class of buttons) on hover, then you can add these attributes to the tags:
onMouseOver="this.style.color='#HexCodeForHoverColor'"
onMouseOut="this.style.color='#HexCodeForNormalBackground'"
You can also change color to backgroundColor -- not sure which one you'd want for what you're doing.
I can include CSS code to achieve the same thing if you want, but it's not really necessary if you only want to do this for one button.
A very similar question was asked here (Alex S. posted basically the same answer that I'm giving you).
Here's a demo. Obviously this is very basic in appearance.
<button onMouseOver="this.style.color='#00ffff'"
onMouseOut="this.style.color='#000000'">Test</button> <!-- Example of text color -->
<br>
<button onMouseOver="this.style.backgroundColor='#00ffff'"
onMouseOut="this.style.backgroundColor=''">Test</button> <!-- Example with background color -->
I'm trying to align two buttons to ad input field but I end up messing everything every single time.
I've already aligned an input field to a single button, but I'm not able to add a second button.
This is the html (I'm using some angularjs):
<div class="row">
<div class="col-lg-12">
<form class="form" ng-submit="vm.reCreateTree(ricercaSecondario)" ng-init="aggiornaRicercaPratica()">
<div class="input-group">
<input type="text" ng-model="vm.cercaSecondario" class="form-control" placeholder="{{getTestoPlaceholderRicerca(ricercaPraticaSecondario)}}" required="required" ng-disabled="disabilitaRicercaSecondaria()">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="fa fa-search"></i></button>
<button class="btn btn-default" type="submit"
tooltip="Espandi filtri di ricerca" tooltip-placement="bottom"
ng-click="toggleRicerca()" ng-show='user.ambitoSelezionato.nome == "Clienti-Polizze"'>
<i ng-class="{'fa fa-caret-up': showEspandiRicerca, 'fa fa-caret-down': !showEspandiRicerca}"></i>
</button>
</div>
</div>
</form>
</div>
</div>
This is a screenshot of the result:
As you can see the two button are not in the same line as the input field and they are also uneven (speaking about dimensions)...
Any help?!
UPDATE: updated the code (thanks to Mukesh Ram) but the buttons still have two different sizes..
You can have multiple buttons inside a single .input-group-btn. Like this:
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with multiple buttons">
<div class="input-group-btn"> <!-- add button in this div -->
<button type="button" class="btn btn-default" aria-label="Help">
<span class="glyphicon glyphicon-question-sign"></span>
</button>
<button type="button" class="btn btn-default">Action</button>
</div>
</div>
</div>
One other way :
form-inline and form-group
Bootply : http://www.bootply.com/uHEpGIOLwY
<div class="row">
<div class="col-lg-12">
<form class="form-inline" ng-submit="vm.reCreateTree(ricercaSecondario)" ng-init="aggiornaRicercaPratica()">
<div class="form-group">
<input type="text" ng-model="vm.cercaSecondario" class="form-control" placeholder="{{getTestoPlaceholderRicerca(ricercaPraticaSecondario)}}" required="required" ng-disabled="disabilitaRicercaSecondaria()">
<button class="btn btn-default" type="submit"><i class="fa fa-search"></i></button>
<button class="btn btn-default" type="submit" tooltip="Espandi filtri di ricerca" tooltip-placement="bottom" ng-click="toggleRicerca()" ng-show='user.ambitoSelezionato.nome == "Clienti-Polizze"'>
<i ng-class="{'fa fa-caret-up': showEspandiRicerca, 'fa fa-caret-down': !showEspandiRicerca}"></i>
</button>
</div>
</form>
</div>
</div>
i need help in getting my seach button near my text box it seems to come below the text box
program:
<div class="search-full text-right">
<a class="pull-right search-close"><i class=" fa fa-times-circle"></i></a>
<div class="searchInputBox pull-right">
<input type="search"
data-searchurl="search?="
name="q"
placeholder="start typing and hit enter to search"
class="search-input">
<button class="btn-nobg search-btn" type="submit">
<i class="fa fa-search"> </i>
</button>
</div>
</div>
As per Bootstrap standard, using an input-group is the best bet.
See: http://getbootstrap.com/components/#input-groups-buttons
Bootply Example using some of your code
HTML:
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<input type="search"
data-searchurl="search?="
name="q"
placeholder="start typing and hit enter to search"
class="search-input form-control">
<span class="input-group-btn">
<button class="btn search-btn" type="submit">
<i class="glyphicon glyphicon-search"> </i>
</button>
</span>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div>
EDIT: I've also created a Bootply fork with the 'clear' button for you, though it's slightly hacked. See Bootply
I'm trying to create a single row with search inputs (a text input and an 'attached' button) at the left, and a button at the right (the bit above the grid):
Here's the code:
<form class="row form-inline">
<div class="form-group col-xs-6">
<div class="input-group">
<input name="search" type="text" class="form-control input-sm">
<span class="input-group-btn">
<button class="btn btn-default btn-sm" type="submit">
<span class="glyphicon glyphicon-search"></span> Search
</button>
</span>
</div>
</div>
<div class="form-group col-xs-6">
<a class="btn btn-default btn-sm pull-right" href="#">
<span class="glyphicon glyphicon-user"></span> Create
</a>
</div>
</form>
The problem is that the width of text input is too small at the 'lg' and 'md' browser sizes, and only increases to something that looks OK when the browser is at smaller sizes. What's the best way to increase the width of the search input at larger browser sizes?
Try this as well
<form class="row form-inline">
<div class="form-group col-md-8">
<div class="input-group">
<input name="search" type="text" class="form-control col-md-6">
<span class="input-group-btn col-md-2">
<button class="btn btn-default" type="submit">
<span class="glyphicon glyphicon-search"></span> Search
</button>
</span>
</div>
</div>
<div class="form-group col-md-4">
<a class="btn btn-default pull-right" href="#">
<span class="glyphicon glyphicon-user"></span> Create
</a>
</div>
</form>
why dont you set the width on the input using bootstrap classes? e.g.
<input name="search" type="text" class="form-control col-lg-10 col-md-8 col-sm-12 col-xs-12">
As you can see in Bootstrap DOC form-inline require setting a width for input componentes:
http://getbootstrap.com/css/#forms-inline
To solve that problem I have custom classes for that:
.input-width-X {width: X}
.input-width-Y {width: Y}
...
and use media queries for this classes in order to apply them just when you are not in XS mode, because Bootstrap set 100% width on it.
Sorry about my english :)
I used an input group straight from the bootstrap documentation, and for some reason the button is way bigger than the text input.
Here's the HTML:
<div class="jumbotron">
<div class="input-group">
<input ng-model="businessName" ng-model="chosenPlace" googleplace type="text" class="form-control input-lg">
<span class="input-group-btn">
<button ng-click="findGPlace2()" class="btn btn-default" type="button">Find!</button>
</span>
</div>
</div>
I haven't made any changes to the css, just vanilla bootstrap.
Try to use the samples in Boostrap page. This is the bootply link you can customize it.
<div class="jumbotron">
<form class="form-horizontal" role="form">
<div class="input-group">
<input ng-model="businessName" ng-model="chosenPlace" class="form-control input-lg">
<span class="input-group-btn">
<button ng-click="findGPlace2()" class="btn btn-default btn-lg" type="button">Find!</button>
</span>
</div>
</form>
</div>