i want to make small CSS fix into my store, but dont can find the right class to do that myself. i checked and found that variation dropdown is using this CSS:
select#pa_facebook-business-fan-page
but still dont know how to make that dropdown to extend to max width into that area.
If I'm looking at the page you are referencing, you have a table cell that contains the label to the left of the select field cell. That is taking up some of the space that you want to get rid of. You can just simply hide it if you don't need.
Just need to modify the css to remove it and the select field will take up the entire width:
td.label {display:none;}
If you have other label cells on your website that you DON'T want to hide, you might need to be more specific in the CSS to target only this instance.
Related
I have a page that has a grid of 4 columns each column contains a blurb and a below the blurb it contains a toggle. The blurb text content is not the same. My issues is once I have aligned the toggle buttons of each the column. The toggle buttons do not align. How can I set the blurb and Toggles to line up without plenty of spacing ? I have used align-items:flex-end any other methods I could try align.
Share link will be more helpful to understand the problem. Question is still not clear to me. If its happening on Divi Latest version then check if there having div before the button tag by inspecting the button. If you are confused just take row or column and then put button inside that. It should work.
As usual button contain a or button tag which is not block level element but text level so its taking display as inline or flex instead of block and getting element only spacing. So you ned to put text level element inside block level wrap like first div then button tag to make it alignment. Hope it will help you.
Thanks
I understand from your question that the blurb in each column is a different length, so the toggles do not line up horizontally? To line them up in Divi, first you'll need to make sure the columns are equal heights, and add a class to the row:
In the row settings, go to the Design tab, and enable Equalize Column Height.
Also in the row settings, go to the Advanced tab, and add a Custom CSS Class custom_fixed_toggles.
Now add the CSS to Appearance > Divi Theme Options > Custom CSS (which is located at the bottom of the first tab in Theme Options). Something like:
.custom_fixed_toggles .et_pb_toggle {
position: absolute;
bottom: 0;
}
So i having problem to customise in bottom tabs the middle, i want to make middle tab height bigger then other tabs, so i cant find the way to customise it. It would be nice if there would be somebody that can help with this.
Link for editing link. And wanted result image.
Tried separately change the hight but, there are a feeling that flex box doesn't allow to tab go out of content.
Inherit the CSS class that holds the icon in the middle and add your custom properties.
I am working on a joomla 2.5 site and am required to insert a menu module at the the bottom i.e the footer of the template.I have three items in the middle div ( module ).All i want is that there is some spacing between the three items and also that the menu are displayed inline.so i did add a custom class suffix to the module and am using it in the CSS to exactly match the one i truly require but all i get is somehow my padding set to 0 and the padding-left that i specify in my custom CSS isnt applied.
Please help me with its
Display:inline
spacing between the items.
Please note that this custom CSS should be applied to ONLY AND ONLY this module.because otherwise the whole look of the lists and unordered lists of the site changes.
i am new to it so i am able to exactly figure why it doesnt work
First, in order to affect only the module with the menu you will want to add a module class suffix in the module parameters in the advance module options (it looks like you did that with bottom_footer_menu).
Next, margins don't work on inline elements. You will need to either float the LIs or set them to display as inline-block.
I've a table containing one row of radio options and another with two paragraphs out of which only one will be displayed and another hidden based on value selected by user in radio options.
The issue is, those two paragraphs are of different content length making one paragraph consuming more space in table. When user selects the option to display bigger paragraph, the table expands automatically to fit bigger content. But again later if user selects a radio option to display small paragraph, it does not shrink it back which should shrink to fit a small paragraph.
Is there any to handle it in CSS?
You could try add this css as below, if not work, could you please paste your codes here for further investigation? hope this helps.
table-layout:fixed;
I am designing a page to Add/Edit users - I used a repeater control and a table to display users. In users view the individual columns of the table row have labels to display a record values and when users click on edit button, the labels are hidden and text boxes are displayed for users to edit values - The problem is - as soon as the text boxes are visible, the table size increases - the row height and cells size becomes large. Is there a way to display the text boxes so that they take the same size as the labels
Dealing with tables, the question is: can your labels span on multiple text rows (ie: can you have long texts)? If yes, you may encounter layout problems any way. If no, a simple approach can be creating a CSS Class:
.CellContent { display:block; width: ...; height: ...; }
with your preferred cell width/height. Just stay a bit "large" with your height.
Assign the class to both your label and textbox, and you should not get width/height changes when switching control (thanks to the display:block property).
Again, if you have long texts, you will still encounter issues, and may want to use multilines. In that case, I would suggest ignoring height problems: just set the width to be consistent, and always show a 3-4 lines textbox for editing. Users will not be bothered to see a row height change, if they are ready to type long texts.
I'd use JS+CSS... You'll have to get your hands dirty for this one though. Visual Studio isn't going to help you much.
Here's how I'd do it:
Get the <td> clientWidth and clientHeight.
Set the <td>'s width and height to those px values (so they're no longer relative)
Swap the text for the input
In your CSS, make sure the input has no padding/margin/border and set width:100%, line-height:1em, and height:1em
When you switch back, make sure you un-set the <td> width and height so they return to automatic values.
You'll need to tweak this all slightly. I'm sure you'll have to play around with the padding on the <td> and perhaps set overflow:hidden but you should be able to do what you want.