I'm using semantic ui to build a form input. I know how to put an icon with an input together. However I hope to put two icons with an input on left side and right side. Does anyone knows if it's possible? Thanks!
<div class="ui left icon right action input">
<i class="email icon"></i>
<input type="text" placeholder="type...">
<i class="check icon">
<button class="ui basic button">submit</button>
</div>
Perhaps this is what you want.
<div class="ui left icon right action input">
<i class="email icon"></i>
<input type="text" placeholder="type...">
<button class="ui basic labeled icon button"><i class="check icon">submit</button>
</div>
Related
I would like to place Have an account?, Login button, and Link A Link B directly underneath something something something something, Enter Zip Code input field and Enter Zip Code button.
The way I've set up my Bootstrap (version 3.3.7) and HTML, I'd think that it would've appeared underneath but it's actually displaying the complete opposite of what I expect. Instead, it's all the way on the left side as per the picture below.
Why's is carrying out this behavior? If more information is needed please let me know.
picture of what I'm describing
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="col-7">
<form class="pull-right col-12 zipSection">
<h6 class="pull-right">something something something something</h6>
<div class="form-group">
<input type="text" class="form-control" placeholder="Enter Zip Code">
</div>
<button type="submit" class="btn btn-default center-block enterZipCodeButton">Enter Zip Code</button>
</form>
<div class="col-12">
<p class="col-12">Have an account?</p>
<button type="submit" class="loginButton" onclick="document.location = '/'">Login</button>
Link A
Link B
</div>
</div>
</div>
Your form has a class called pull-right (which has been renamed to float-right in Bootstrap 4). What that does is forces the div to the far right. Since this is bootstrap, everything else adapts, which means the div which theoretically should be under, gets forced up to the top row, and to the left (since left-alignment is the default). A solution to that is to use the class of row from the Bootstrap grid system. Every row you want, you make a new div with a class of row. This way, they will now be under each other.
However, the Have an account? would still be on the left. To fix that, give it a class of pull-right.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div class="col-7">
<form class="pull-right col-12 zipSection">
<h6 class="pull-right">something something something something</h6>
<div class="form-group">
<input type="text" class="form-control" placeholder="Enter Zip Code">
</div>
<button type="submit" class="btn btn-default center-block enterZipCodeButton">Enter Zip Code</button>
</form>
</div>
</div>
<div class="row">
<div class="col-12 pull-right">
<p class="col-12">Have an account?</p>
<button type="submit" class="loginButton" onclick="document.location = '/'">Login</button>
Link A
Link B
</div>
</div>
</div>
i have linked copy code here please find the result
https://codepen.io/manikandanpa/pen/RyeEpX?editors=1010
You need to move your .ui.labeled.input into a div with .fluid.field
<form class="ui form">
<div class="fluid field">
<div class="ui labeled input">
<div class="ui label">
Example
</div>
<input class="ui input " type="text" name="example" required>
</div>
</div>
</form>
https://jsfiddle.net/4x8d56sw/
I need to use text box with a glyphicon in one straight line, here what I've done:
http://plnkr.co/edit/GZQeGTqDsvTh9XsXmMFy?p=preview
<div class="w3-row" style="vertical-align:middle">
<div class="w3-col s6">
<input ng-readonly="true" type="text" ng-model="login" placeholder="Login" class="form-control" />
</div>
<div class="w3-col s4">
<input class="form-control" ng-readonly="true" type="text" ng-model="password" placeholder="Password" />
</div>
<div class="w3-col s2">
<button class="glyphicon glyphicon-refresh btn btn-default"></button>
</div>
</div>
It looks alright, but the glyph button is slightly below than the bottom line of text inputs, I want its height to be stretched to those inputs, or, at least, to be in the middle relatively to their center, then it will be good looking.
Please help me find the solution.
Notice:
Either w3.css or angular-ui's bootstrap can be used to solve this issue.
The solution should not depend on using the "form-inline".
The best solution would be the one which doesn't use "row" "col" classes whatsoever, because they make it impossible to stretch line horizontally to 100% and fill each column without making it look ugly!
Thank you.
change your button markup to this
<button class="btn btn-default">
<span class="glyphicon glyphicon-refresh "></span>
</button>
plunk
I have two scenarios with similar problems. I'm attempting to add a font awesome icon:
Inline with a text input and 'add on' button, yet superscript (JSFiddle1)
<div>
<div class="input-group">
<input class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" id="copy-link" type="button">
<i class="fa fa-files-o"></i> Copy
</button>
</span>
</div>
<span>
<i class="fa fa-info-circle"></i>
</span>
</div>
Inline with text in a bootstrap panel heading text, but in the top right corner of the heading area (JSFiddle2)
<div class="panel panel-default">
<div class="panel-heading">
<b>
Text
</b>
<span>
<div class="dropdown">
<i class="fa fa-cog dropdown-toggle listing-cog" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></i>
</div>
</span>
</div>
<div class="panel-body">
</div>
</div>
Here's how I'd like each to look:
I don't know if this is important, but as a side note:
In the first scenario, the icon has a popover
In the second scenario, the icon has a dropdown
I don't think these have any effect on the layout, so I left out the related code.
For the first problem, your HTML structure is wrong. You need to add the icon inside the input-group DIV. Also to do superscript, you need a CSS class for that. Here is the update code for you:
JS Fiddle
For your second problem, your DIV must be displayed inline with a flotation. Here is the CSS for it:
.dropdown {
display:inline-block;
float:right
}
For your first issue: JS Fiddle
For your second issue as Raed N. said before just add a float:right to your dropdown:
.dropdown { float:right; }
Is there a semantic-ui ready-to-use solution for ui component that combine text input and dropdown of predefined values. The sample is "A dropdown menu can appear to be floating below an element" (http://semantic-ui.com/modules/dropdown.html), but it would be text input instead of button.
ContentEditable Solution:
Try using the new html5 element, "contenteditable".
e.g.
Original standard Semantic UI code:
<div class="ui selection dropdown">
<input type="hidden" name="gender">
<div class="default text">gender</div>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item" data-value="Male">Male</div>
<div class="item" data-value="Female">Female</div>
</div>
</div>
New Modified Code with contenteditable:
<div class="ui selection dropdown">
<input type="hidden" name="gender">
<div class="text" contenteditable="true"></div>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item" data-value="Male">Male</div>
<div class="item" data-value="Female">Female</div>
</div>
</div>
Notice 3rd line is modified in several ways.
I removed the "default" class since I don't want the grey placeholder effect.
I added contenteditable attribute.
And I also removed the placeholder text.
Now you need a JQuery event handler that handles that div's onChange event, or the form's submit's button click event so that you can copy the div's value to the hidden text input.
Datalist HTML5 Solution:
If you strictly don't need the dropdown styling semantic UI provides, such as option dividers, then you can use:
<div class="ui input">
<input list="browsers" type="text">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</div>