<span style="float:left; padding-right: 5px;">
<span style="display:block;">Harvard</span>
<span>John Smith</span>
</span>
<span style="float:left; padding-right: 5px;">
<span style="display:block;">Chicago</span>
<span>Tucker Max</span>
</span>
<span style="float:left; padding-right: 5px;">
<span style="display:block;"></span>
<span>Rihanna</span>
</span>
<span style="float:left; padding-right: 5px;">
<span style="display:block;">NYU</span>
<span>Peter Simpson</span>
</span>
//... and many more
The first span contains the university, the second span contains the name of the person. Now my problem is that whenever a I have a person who did not go to uni, I want to simply leave it blank.
But when I do that the name of the person moves up and is not aligned with the other names anymore. So in my example, Rihanna moves up:
I could write something like - or no uni, but I would much prefer to have a blank field there, as its just more tidy. I would also much prefer to have a CSS based solution.
Edit: If people downvote this, let me know why at least.
<span style="float:left; padding-right: 5px;">
<span style="visibility:hidden;"> </span><!-- Change is in this line -->
<span>Rihanna</span>
</span>
You can use "visibility:hidden" style. That way the height/width from the span will still be used while hiding the element.
Related
I have the following:
<span style="float:left; padding-right: 5px;">
<span class="noselect" style="display:block;">Harvard</span>
<span>John Smith</span>
</span>
<span style="float:left; padding-right: 5px;">
<span class="noselect" style="display:block;">Chicago</span>
<span>Tucker Max</span>
</span>
<span style="float:left; padding-right: 5px;">
<span class="noselect" style="display:block;"></span>
<span>Rihanna</span>
</span>
<span style="float:left; padding-right: 5px;">
<span class="noselect" style="display:block;">NYU</span>
<span>Peter Simpson</span>
</span>
CSS:
.noselect{
-webkit-user-select: none !important; /* Chrome 49+ */
user-select: none !important; /* Likely future */
}
Now I disabled selectability for the spans with the universities. This works. However, when I select a user or even multiple users, and then copy paste this to somewhere else, the Universities are also being copied.
How can I disable this? I would like the user to not be able to copy the university names, but only the names of the users.This would also make sense, since only the users are selectable for the user anyways.
Other than HTML & CSS I am using React & electron, if this should be of any help. This is why I am only targeting chrome, and not ff or ie etc.
PS: The solution of this "possible duplicate" does not work for me. My text is not selectable, yet when I paste it, there is more text than I saw I had selected.
I have below line which is causing next line after text 100% and 99.8%
can anyone pls help me how can i display all this in one line side by side.
<span style="font-size:12px;font-weight:bold;padding-left:800px;">99%>=<span style="color:#69BB1D;">GREEN</span><=100%, <span style="padding-left: 950px;">41%><span style="color:#FFD700;">YELLOW</span><99.8%,</span> <span style="color:#EE543D;padding-left:1100px;">RED</span><99.6%</span><br />
I believe the issue is "padding-left" in each span, it causes them to go to next line because they can't fit to the screen.
If you remove the padding -or at least decrease the value- they will be showing in one line side by side.
Example Here:
https://jsfiddle.net/zjbot272/
<span style="font-size:12px;font-weight:bold;">99%>=
<span style="color:#69BB1D;">GREEN</span><=100%,
<span style="">41%>
<span style="color:#FFD700;">YELLOW</span><99.8%,</span>
<span style="color:#EE543D;">RED</span><99.6%</span>
Try adding white-space: nowrap;. Anyway what you are doing is weird.
<span style="font-size: 12px; font-weight: bold; padding-left: 800px; white-space: nowrap;">99%>=<span style="color:#69BB1D;">GREEN</span><=100%, <span style="padding-left: 950px;">41%><span style="color:#FFD700;">YELLOW</span><99.8%,</span> <span style="color:#EE543D;padding-left:1100px;">RED</span><99.6%</span>
I want to add an iframe to the right of the vertical-alignment
http://s13.postimg.org/s5f54mux3/Screen_Shot_2015_07_30_at_4_45_06_PM.png
The code to it is:
<div style='margin-left:10px;'>
<img src='/' class='circular' style='float:left;vertical-align:middle;'>
</div>
</span>
<span class='txt'>
<span class='user-info'>
Text
</span>
<br>
<span class='user-time'>
12 Minutes Ago
</span>
</span>
</span>
</span>
</div>
How do you add an iframe to float on the right of the vertical-alignment, like so...
http://s30.postimg.org/5qfa3x8o1/Screen_Shot_2015_07_30_at_4_45_06_PM.png
I think the best solution would be to add a float:right and position it as the last element of the span that contains the user information.
I think I placed it correctly below but the code you posted is missing the top half, making it kind of difficult to guess what is what..
<div style='margin-left:10px;'>
<img src='/' class='circular' style='float:left;vertical-align:middle;'>
</div>
</span>
<span class='txt'>
<span class='user-info'>
Text
</span>
<br>
<span class='user-time'>
12 Minutes Ago
</span>
</span>
<iframe style:'float:right;'></iframe>
</span>
</span>
</div>
To put an element on the right, you can either use float: right or absolute positioning. Personally I would use absolute positioning. Here is a solution:
#theIframe {
position: absolute;
top: 0;
right: 0;
}
Also make sure the containing element is position: relative (or any other position except the default "static".)
I'm reluctant to butt in where a solution seems to have been reached but I'm wondering why one wouldn't use Flexbox. I understand that it's not supported in IE9- but the data at Can I Use suggests that this is a negligible concern and that cross-browser support is wide. Can I Use Flexbox (Note: review both the "Current Aligned" and "Useage Relative" data.)
With that in mind, would you consider something along the lines of the following.
//HTML
<div style='margin-left:10px;'>
<img src='/' class='circular' style='float:left;vertical-align:middle;'>
</div>
</span>
<div id="Flex-Container">
<span class='txt'>
<span class='user-info'>
Text
</span>
<br>
<span class='user-time'>
12 Minutes Ago
</span>
</span>
<div id="Responsive-Iframe-Container">...</div>
</div>
</span>
</span>
</div>
//CSS
#Flex-Container {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-start;
}
#Responsive-Iframe-Container {
width: 45%;
}
The HTML and CSS for the markup inside #Responsive-Iframe-Container can be found in the Pen Responsive Iframe - Flexbox.
Of course, instead of using #Responsive-Iframe-Container, one could simply substitute <iframe src="#"></iframe> styled as desired.
I am a beginner autodidact in HTML and CSS, so if there is something wrong with the suggested code, please forgive me and please let me know what it is.
I want to create a clickable rounded rectangle that will change color when clicked, using bootstrap. The best way I found to do this is with a span.
Here is the example code I've written:
<p id="proyect_c_leasons" style="height:30px;vertical-align:middle;display:table-cell"> <span class="label label-default" style="background-color:#D80909;width:35px;height:25px;display:inline-block" onclick='console.log("hola")'> </span> <b>Lecciones Aprendidas</b> </p>
This is what it shows:
What I want is the text to be align to the middle of the red square instead of the bottom of the red square.
This code:
<p id="proyect_c_leasons"> <span class="label label-default" style="background-color:#D80909;width:35px;height:25px;display:inline-block" onclick='console.log("hola")'> </span> <b>Lecciones Aprendidas</b> </p>
Shows the exact same thing (basically p ignores everything I write into style)
Can anyone provide me with a way to fix this? Or an alternative?
Set line-height for the div and then vertical-align the span within.
<p id="proyect_c_leasons" style="height:30px;line-height:30px;display:table-cell">
<span class="label label-default" style="background-color:#D80909;width:35px;height:30px;display:inline-block;vertical-align:middle;" onclick='console.log("hola")'>
</span>
<b>Lecciones Aprendidas</b>
</p>
Bootply
Try giving the vertical-align: middle; and line-height equal to the height to the <span>:
<p id="proyect_c_leasons">
<span class="label label-default" style="background-color:#D80909;width:35px;height:25px;line-height:25px;display:inline-block;vertical-align: middle;" onclick='console.log("hola")'></span>
<b>Lecciones Aprendidas</b>
</p>
<p id="proyect_c_leasons" style="line-height: 25px;"> <span class="label label-default" style="background-color:#D80909;width:35px;height:25px;display:inline-block; float: left;" onclick='console.log("hola")'> </span> <b>Lecciones Aprendidas</b> </p>
It was somewhat unclear what you were asking here, so I'll answer both interpretations.
a) You want the text in the middle of the square (contained within)
This is a relatively simple change. You just need to contain the text within the span.
b) You want the text to be vertically in the middle of the square (still outside of it)
For this, you'll want to look at text alignment.
<p id="proyect_c_leasons" style="height:30px;vertical-align:middle;display:table-cell">
<span class="label label-default" style="background-color:#D80909;width:35px;height:25px;display:inline-block" onclick='console.log("hola")'>
</span>
<b style="vertical-align: 40%;">Lecciones Aprendidas</b>
In the example above I've literally only changed the style for the <b> tag. You can alter where it lies by changing the percentage. There are a variety of different options available to you, which are listed on mdn:
https://developer.mozilla.org/en/docs/Web/CSS/vertical-align
In my jQuery themebuilder built theme I have 5 different ui-icons_* files.
Two of them are in an orange shade corresponding to the highlight color.
I want to use an orange icon as a bullet.
My first attempt gives the icon on it's own row.
<div class="heading">
<span class="ui-icon ui-icon-triangle-1-e" ></span>
Meeting
</div>
My second attempt gives the icon but not aligned properly.
<div class="heading">
<span class="ui-icon ui-icon-triangle-1-e" style="display:inline-block"></span>
Meeting
</div>
Adding the following style makes the text align with the icon:
.heading { vertical-align: top; }
http://jsfiddle.net/rypyP/1/
The color i want is in the ui-state-active set, so if I add that state to the containing unit it gets the correct color, but with the whole enchilada (border, background color, text color) and I just want the bullet point orange.
<div class="heading ui-state-active">
<span class="ui-icon ui-icon-triangle-1-e" style="display:inline-block"></span>
Meeting
</div>
http://jsfiddle.net/MEXQV/1/
Can I get just the icon from a particular ui-state in a jQuery theme without rewriting the css?
If that is not possible, what way would you suggest and why?
SOLUTION
Stylesheet:
.heading
{
vertical-align: top;
}
Html:
<div class="heading">
<span class="ui-state-active" style="border: 0px">
<span class="ui-icon ui-icon-triangle-1-e" style="display:inline-block; border: 0px">
</span>
</span>
Meeting
</div>
http://jsfiddle.net/rypyP/4/
If you just want to get the icon of a particular ui-state, you can do this:
<div class="heading">
<span class="ui-state-active ui-icon ui-icon-triangle-1-e " style="display:inline-block"></span>
Meeting</div>
What it does is it will look the specified icon on jQuery's default theme icon set (it has four icon sets by default -- active, default, highlight, and error). If you want to remove the borders etc, you'll have to override the ui-state class in your own css, e.g: adding .ui-state-active { border: 0px; }
Thanks.