I am working on a project: web terminal.
In it, the format is something this
<div class="prompt">C:/users/somebody/ </div> <input type="text" class="usrcommand">
Here, the width of .prompt is not definite(changes according to user) and the input tag should cover the remaining portion that is left after .prompt.
Note that: .prompt has been styled: display: inline
So, how to do that?
Try display:inline-block rule on both the classes (.prompt and usrcommand)
Related
First post here.
I have shopping cart software called sellerdeck previously actinic. There is a lot of different code involved.
I have a button wrapper which has pre defined text inserted. I am trying to change the width of the button to a fixed width but pretty much everything I tried, from info I've found here and elsewhere, breaks the code and the button either disappears, does not function, or shrinks to about 10px.
Is it possible to set the width in the following code or is it likely that I will have to do it elsewhere within my software?
This code creates a small rectangle green button with white text that reads "Add to Cart" the text is pulled from code elsewhere in my software.
<div class="button-wrapper cart-button-wrapper">
<input value="<Actinic:Variable Name="CartButtonText"/>" name="_<Actinic:Variable Name="ProductID"/>" type="submit" class="button cart-button" onclick="return ValidateChoices('<actinic:variable name="ProductID" />');"/>
</div>
Any help would be great, I've tried padding and manage to get top padding to work but that's it.
Michael
Button widths can be simply set by css class.
If the width is not displaying as expected then there is probably an issue with specificity.
To test if the class is being overwritted elsewhere in your code you can add !important to your classese attributes or add an inline style attribute to increase the items specificity.
e.g <input style="width:150px;"/>
IMPORTANT NOTE: All styling should be placed in your style sheet and not in your html (inline) whenever possible.
If the width now applies then it is being overwritten elsewhere.
I recommend you use your browsers debugger (f12) to see which style is taking priority.
.button-wrapper{
width:150px;
height:40px;
font-size:16px;
display:block;
}
.button-wrapper input{
height:100%;
width:100%;
}
<div class="button-wrapper cart-button-wrapper">
<input value="CartButtonText" type="submit" class="button cart-button"/>
</div>
I am working on a video game UI that is built in HTML/CSS/JS (Angular). This question has specifically to do with the chat component of the UI, which is a chat box with an input field and send button on the same line beneath it.
The simplified markup for the input and submit looks like this (removed all the angular markup):
<div class="chat-controls">
<form class="chat-form">
<input type="text" class="chat-input" />
</form>
<a href class="chat-send btn">Send</a>
</div>
Here's the problem I'm trying to solve: our game is localized for many different languages, meaning that the horizontal size of the Send button varies dramatically from one language to the next depending on the translation. Therefore I cannot predict the Send button width. I would like the text input box to fill the remainder of the space horizontally next to the send button (fixed .chat-controls width - variable .chat-send width = .chat-input width).
The tricky part is I'm trying to do this in pure CSS without using JS. I know I can measure .chat-send with JS and assign the width of .chat-input accordingly (or do something like add a CSS class to an ancestor that denotes the language version and hardcode the values for each language in CSS), but the most flexible and maintainable solution would be pure CSS.
This cannot be achieved with floating the send button right, since the text input will then either flow underneath the send button or I need to know the width of the send button to assign right padding on .chat-input to compensate. If calc() could predict the width of a sibling element this would be trivial, but alas it cannot. I played with flexbox for a while as well and it doesn't seem appropriate for this situation. My current fix is to make the send button the width of the maximum size it can currently be (Russian, which is about twice the length of "Send" in English) but this doesn't look too good.
My question is: is there any reasonable way to do this in pure CSS, or do I just need to do it in JS? Note that browser compatibility is not an issue as this is implemented with Chromium Embedded Framework so just about everything is supported.
you can use display with either flex or table.
<h1>display:flex;</h1>
<div class="chat-controls">
<form class="chat-form">
<input type="text" class="chat-input" />
</form>
<a href class="chat-send btn">Send</a>
</div>
<h1>display:table;</h1>
<div class="chat-controls bis">
<form class="chat-form">
<input type="text" class="chat-input" />
</form>
<a href class="chat-send btn">Send</a>
</div>
with this following CSS to test both version
.chat-controls {
display:flex;
}
.chat-form {
flex:1;
}
.chat-input , .bis .chat-form{
width:100%;
}
.btn {
padding:0 1em;
}
.bis {
display:table;
width:100%;
}
.bis .chat-form, .bis .btn {
display:table-cell;
}
You can play with it online here : http://codepen.io/gc-nomade/pen/MYmVZM
float is also an option if you do not mind to put the send link/button ahead in HTML (third exemple in the demo linked).
I have a form with 3 elements
<form>
<input type="search" value="long text" />
<select>
<option>Google</option>
<option>Bing</option>
</select>
<button>Search</button>
</form>
I would like to have the select and the button to have their own width, and the input to fill all the remaining space.
I found different solutions but they seems to not work properly.
Following how-to-make-element-fill-remaining-width-when-sibling-has-variable-width I get the desired effect (having to add markup and to change the order of the elements) but the input is overridden from the other elements, loosing its nice rounded borders.
button, select {
float: right;
}
input {
width: 100%;
}
.input_wrapper {
overflow: hidden
}
How can I do instead?
I need a cross-browser solution (>=IE7)
I would avoid (if possible) to use additional markup
I want to avoid that the the input could be overflown and hidden (as explained above).
PS - I usually try to avoid floats and stay with display-block. But all the suggestions are welcome
Ok, I think this can be done by setting the form to "display: table" and then the input, select and button to display: table-cell.
Then set widths on the first 2 elements and make the third element width: 100% and display: block.
Let me know how you get on.
Hello I have a problem with a fieldset in CSS.
I have this example
In this example you can see that left hand side the border
margin-left: 0px;
flushes exactly on one line/height with the dark frame. Right hand side you can see that the class fr has
margin-right: 0px;
But it does not flush with the frame border. I have tried to Google for it but I could not find anything on that. Is this phaenomenon normal or what am I doing wrong? are there some specific borders?
UPDATE
hello and thanks for answering this question. i tried to implement that code directly into my editor (dreamweaver cs6) and thought it used to be the same style as on jsfiddle. wrong. it seems like there is a problem with the editor because as a result i will get this:
it looks like there are automatically added tabs left hand side. so is there anybody who knows about that problem? thanks a lot.
UPDATE 2:
i had to reset the css default settings.
I would say the main one is that you have your labels set to 80px wide and your inputs are set to 180px wide.
Probably need them to be the same size. I'd also check your math to make sure it all adds up properly.
Add box-sizing: border-box to the inputs. (Also add -moz-box-sizing and -webkit-box-sizing for the relevant vendors)
use this instead, box-sizing:border-box causes the padding to be used from inside the input element rather than the outside.
#left #frame form fieldset ul input {
position:relative
color: #444444;
font-size: 10px;
width: 180px;
height: 18px;
padding-left: 5px;
outline:none;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
-o-box-sizing:border-box
}
yes box-sizing:border-box; is a good solution but simply reduce the size of input-box 7 pixel{5px for left-side padding and 2px for border of both left and right side border} so now final width of input-box is 173px
It looks like you want to put some input fields (a form, perhaps?) into columns and just don't seem to know the best way to do it?
I am working on a form right now, actually- here's how i do it when I want to have two columns within a div.
<form>
<fieldset>
<legend>The form to fill out</legend>
<p> Any instructions for the form. Fields marked with <span class="red">Red</span> are required.</p>
<div class="columnA">
<label for="fname">Label 1</label>
<input type="text" name="fname" tabindex="1" />
</div>
<div class="columnB">
<label for="address1">Address:</label>
<input type="text" name="address1" tabindex="10" />
</div>
<div class="fullwidth">
<input type="submit" value="Register"/>
</div>
</fieldset>
</form>
Then, make sure that these things are set (minimally) in your CSS for each of the above classes:
margin
padding
width
(advice: I actually set these first within every piece of my CSS- it gives me a structure if I have my own order of elements for my CSS. I am not saying use mine, but adopt your own- it saves time when you're troubleshooting)
Remember, if you want the parent element (whatever div is containing the form) all child elements have to be floated as well.
Now, you might think to float columnA to the left and columnB to the right, with both set at a width that adds up to 50% once you add in margins and padding. However, I've found that unless my content demands that much real estate, you can actually float both to the left and you'll get a better look for the form as a whole.
I have the following HTML:
<form action="http://localhost:2689/" method="post">
<span>
<label for="SearchBag.PowerSearchKeys" id="Label1"> Key words</label>
<input id="SearchBag.PowerSearchKeys" name="SearchBag.PowerSearchKeys" type="text" value="" />
<button id="powerSearchSubmitButton" class="fancySubmitButton" type="submit"><span><em>Search</em></span></button>
<span><em>Advanced</em></span>
</span>
</form>
The form's content needs to be centered over it's width (100% in this case).
The anchor needs to be directly under the button.
Because a picture can say a thousand words, here's the result of my awesome paint art skills:
(source: telenet.be)
And this whole block should be centered on the webpage.
--EDIT--
Because the content of all the controlls can varry greatly in length, I cannot give any element any width specifications (not even in %). Also, over estimating the width would leave confusing white spaces between elements. This too is not a desired effect.
Try setting 'display: block' on each element that you want on a separate line. You may also need to play with the margin and padding to get them centered (like margin-left: 50%; padding-left: -[1/2 width of element]) and text-align: center.
Why not just put a break in before the tag () then align the to the right?
I usually float form elements (left), and if I want to put the next one on a new line i use clear:left.
I'd replace the <span> with a <fieldset> for semantic correctness (I don't think span brings a lot to the table in terms of functionality), and apply some styling to that fieldset to the tune of
fieldset {
text-align: center;
width: 100%;
position: relative;
}
I can't tell for sure if that'll line up the anchor and the button correctly or not, but since the fieldset has position: relative set, you'll be able to position stuff if you need to with relative ease.
As much as i hate to say it, this is a case where use of tables might be considered.
But I would try positioning - i made a quick & dirty solution here
at JSbin
Basically you put your form into an element, center it with text-align and make the container position: relative. Then you use the id in the link to position it absolutely in reference to the parent. But it only works if the parent is an inline element.
Unless you change its display property (and you shouldn't), the span element should be an inline element, meaning that it exists in the flow of text. Putting block level elements inside an inline element isn't really a good idea.
You also have a lot of extraneous tags in there. Instead of this:
<button id="powerSearchSubmitButton" class="fancySubmitButton" type="submit">
<span><em>Search</em></span>
</button>
why not just do this:
<button id="powerSearchSubmitButton" class="fancySubmitButton" type="submit">
Search
</button>
The span does nothing, and the em can be emulated through CSS:
.fancySubmitButton { font-style: italic }`
Here's what I'd do:
<form>
<label for="SearchBag.PowerSearchKeys" id="Label1">Key words</label>
<input id="SearchBag.PowerSearchKeys" name="SearchBag.PowerSearchKeys" type="text" value="" />
<button id="powerSearchSubmitButton" class="fancySubmitButton" type="submit">Search</button>
Advanced
</form>
with the CSS:
form {
text-align: center;
}
.fancySubmitButton, .fancyLinkButton {
font-style: italic;
}
.fancyLinkButton {
display: block; /* this will put it on its own line */
}
Quick response to the comments: giving something the class "fancyLinkButton" doesn't imply that it has rounded corners. Anyway, if you want to put rounded corners on certain elements, I would still avoid using extraneous markup. If more wrapper elements are needed for whatever implementation you're using, then those should be added via Javascript. Remember that mozilla and webkit already support CSS rounded corners - eventually IE will too, and you'll be able to easily change your single javascript function, rather than wading through HTML to find everywhere where there are unneeded spans.