I am trying to implement a col with 3 elements inline : 2 buttons and one select
I managed to get it to work with three buttons, but if I remove a button and add a select for some unknown reason it doesn't work.
3 buttons working and properly aligned:
If we click on Tab2, all three items appear messed up:
What I've tried so far:
I thought it was a form-select width problem, it was set to 100% so I did:
.form-select {
width: unset;
}
But still the three elements are misaligned and not inline.
How can I get those three elements inline?
LIVE JSFIDDLE DEMO
The reason your select keeps going to the next line is because the .form-select class by default has a display type of block
To fix your problem, you are correct in thinking that you should use width: unset, however you must also set display: inline-block to prevent it from going to the next line.
The following CSS should be added:
.form-select {
width: unset; /* note: width: auto; would also work here */
display: inline-block;
}
Working example: https://jsfiddle.net/bem0ojry/
Note that this will only make the 3 elements side by side if there is enough space, otherwise they will automatically wrap to the next line.
https://developer.mozilla.org/en-US/docs/Web/CSS/display
Related
I need to have the options of an html select (with option "size" so to visualize it like a 5 lines textarea) showing side by side, like in this jfiddle
jsfiddle
I could achieve my goal using this css
select {
width: 100%;
}
select#myselect option {
width: 6%;
float: left;
border: 1px solid;
text-align: -webkit-center;
border-color: darkgray;
}
but it's working perfectly only on chrome. In firefox the option "float:left" seem not to work and the options are showed one under the other. In Safari the option "width:6%" is not working and the option element occupies 100% of the width of the select. Neither the border is working, but this is less important
It is possible to achieve the same chrome result in all browser?
EDIT: adding "display:inline" to the options show them side by side on firefox but all go on one single line, resulting in the last elements not to show at all, like in this jsfiddle
Jsfiddle
Add display: inline; to the css.
Safari doesn't support the inline and inline-block nore the left floating for <option> and, i think, with good reasons: first, cause the <select><option> is not ment to work in that way and, secoundary, cause the display:inline is totally incompatible with the iphone rendering of the element itself;
cause this, also the possibility of controlling the with of the element is not supported.
I have a list of items, where each item is split up into 3 parts.
<li>[long part(1)] [separator(2)] [important part(3)]</li>
I want the first part ("long part") to truncate instead of wrap.
I can get the first part to not wrap, while the other parts wrap - but I can't figure out how to get the browser to truncate the first part.
Here's a codepen example: https://codepen.io/fiver/pen/rGRevq?editors=1010
Use the Change view button to move the output pane to the side. Then you can use the slider to see the wrapping behaviour. I tried using flexbox ("flex try") and styling overflow attributes ("overflow try") but both just extend the text out off the view.
The third item is my workaround (just let it wrap) - it's not what I want to do, but it works.
So is there any way I can get that first part to truncate (with or without ellipsis)?
I only need to get this working in modern browsers: Edge (not actually a bid deal), Chrome, Firefox and Safari (mobile and desktop). I don't need to worry about IE or Android browser.
Example of answer: https://codepen.io/fiver/pen/yEYWmp
Your "overflow try" works but you need to put these 2 in <li>
overflow: hidden;
text-overflow: ellipsis;
as you are using spans. you need to set display property in CSS and width too.
span {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 40%; /* it be upto requirment */
}
I wish to make the blue circles float left for odd numbers and right for even numbers. I've tried floating the elements but it doesn't seem to work.
I've used table and table-cells to achieve the centered text and logos but cannot seem to get them to inverse unless i switched the positioning of the elements
enter code here
Here is a current demo:
https://jsfiddle.net/7g7medn1/
Result Demo (re positioned dom elements to achieve result, need to do it without re positioning them):
https://jsfiddle.net/wcttx9vm/
you might need to a add class for the even columns and change floating and display properties as follows:
.even .content {
display: block;
}
.even .circle {
float: right;
}
.even .content {
display: inline;
}
https://jsfiddle.net/zxhbbwdm/4/
what I don't understand: When you want a table, why you don't use ? A table can be used to display table-content, but not for pure layouting.
In your case I would do it like this: Take a php-file and do the "layouting" there. That means that you will do the even-odd-placement in a for-loop and switch the odd layout there. I guess it would be the easiest way.
And your current demo code can't work, since your bubble is always first in code. That is ok for the left positioning, but for right positioning it needs to be after the text. Otherwise you will screw it up.
I need to display text vertically in a rowspan within a table. The technique I'm using via CSS seems to "work", but the width of the <p> element can't be changed or else the text wraps to the next line and its not pretty.
Take a look at this jsfiddle I put together in order to replicate my issue.
http://jsfiddle.net/wn4ofcwx/
Any alternatives here? Or possible a fix to my current CSS.
Note: Probably doesn't matter but I'm using the INK Framework (similar
to bootstrap).
Actually I figured it out, it was as simple as using white-space: nowrap;
Which I completely forgot about!
http://jsfiddle.net/wn4ofcwx/7/
The text doesn't wrap because we are explicitly stating nowrap, you can re size the window to see how it keeps its position, now I can apply a width of just 10px to take away all that excessive white space in the rowspan.
Check this out: http://jsfiddle.net/wn4ofcwx/4/
What I added to the class .rotate-vertical:
display: block;
margin: auto auto;
height: 17px;
And I took out : Width: 50px;
Cheers
Actually you can keep out the : display: block;
The p element is already a display: block by default and you didn't overwrite it anywhere.
I've been trying for ages using class="grid_x alpha omega clear etc... but no matter what I've tried I cannot get the login box # http://ci2.totalshopuk.com/login to line up correctly. Anyone able to see what I'm doing wrong?
Thanks
Try changing .blockheader { padding: 2px; } to .blockheader { padding: 1px; }
That worked for me!
Both these elements are centred in the div. You need to put the label into a or tag in order to control its position inside the parent div. Then set the widths accordingly to line it up.
The grid system is not always the best option for setting widths on form elements.